https://alligator.io/vuejs/using-new-vue-cli-3/
↑vue-cli3.0 で環境を構築しました
https://www.npmjs.com/package/vue-mce
↑こちらのモジュールを使ってみたいです
typescript
1//main.ts 2 3import Vue from 'vue'; 4import App from './App.vue'; 5import router from './router'; 6import store from './store'; 7 8import VueMce from 'vue-mce'; //←ここと 9 10Vue.use(VueMce) //←ここ 11 12Vue.config.productionTip = false; 13 14new Vue({ 15 router, 16 store, 17 render: (h) => h(App), 18}).$mount('#app');
このように宣言すれば
<vue-mce/>タグが使えるのかなと思ったのですが
vue-mce.common.js?9a3b:1 Error: TinyMce was not found
と言われ使えませんでした
ここで必要とされているtinymce
https://github.com/tinymce/tinymce-vue
を入れてみたのですが、同じエラーが出てしまいます
そもそもモジュールの使い方が間違っているのでしょうか
typescript
1//router.ts 2 3import Vue from 'vue'; 4import Router from 'vue-router'; 5 6import Top from './views/Top.vue' 7import openNewFiles from './views/openNewFiles.vue' 8import createNew from './views/createNew.vue' 9 10Vue.use(Router); 11 12export default new Router({ 13 routes: [ 14 { 15 path: '/', 16 name: 'top', 17 component: Top, 18 }, 19 { 20 path: '/openNewFiles', 21 name: 'openNewFiles', 22 component: openNewFiles, 23 }, 24 { 25 path: '/createNew', 26 name: 'createNew', 27 component: createNew, 28 } 29 ], 30});
これはrouter.tsなのですが
ルーターインスタンスをexportするという宣言でしょうか
そして、vueを初期化する際の引数に入れることで、routerモジュールを適用しているのでしょうか
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
では逆に、router.tsの
Vue.use(Router);
という宣言はどのような役割を担うのでしょうか
typescript
1 2//vueMce.ts 3 4import Vue from 'vue'; 5import VueMce from 'vue-mce'; 6 7Vue.use(VueMce); 8 9//export default new VueMce(){} 10 11export default VueMce
router.tsを真似して作ってみました
vueMceは定数みたいで、newできないと言われてしまったので
export default VueMce
としてみました
main.tsの方でimportして、引数に加えてみたのですが、
'vueMce' does not exist in type 'ComponentOption
と言われてしまい、できませんでした
どなたか教えてくださいませんでしょうか...
--------------------追記--------------------
yhg様、毎回本当にありがとうございます
回答を参考に今朝から色々試していたのですが、うまくできませんでした...
まず
npm install --save tinymce
でtinymceをnode_modulesに加えました
次に
import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';
Vue.use(VueMce);
こちらを main.tsに書き足しました
これでできるのかなと思ったのですが、
theme.js:1 Uncaught SyntaxError: Unexpected token <
というエラーが出てしまいました
elementを見ると
vue-mceコンポーネントのところは
html
1<div class="tinymce"> 2 <div class="tinymce__init-area" id="mce_0" style="visibility: hidden;"> 3 </div> 4 <input name="" hidden="hidden"> 5</div>
このようになってました
typescript
1 2//main.ts 3 4import tinymce from 'tinymce' 5 6import paste from 'tinymce/plugins/paste'; 7import link from 'tinymce/plugins/link'; 8 9tinymce.init({ 10 plugins: [paste, link] 11})
このような書き方も試してみたのですが、動かなかったです...
最終的には
import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';
Vue.use(VueMce);
と
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>こちらをindex.htmlのヘッダーに書くというので正しく動くのですが、
なるべくimportで解決したいです...(T_T)
あまり、scriptタグではやりたくないです
どのようにすればいいでしょうか...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/15 09:20 編集
2018/06/15 13:45
退会済みユーザー
2018/06/18 06:28
退会済みユーザー
2018/06/19 02:39
2018/06/20 05:37
退会済みユーザー
2018/06/21 02:34