質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

vue-cli3.0 typescript モジュールの使い方

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 815

akao

score 50

https://alligator.io/vuejs/using-new-vue-cli-3/

↑vue-cli3.0 で環境を構築しました

https://www.npmjs.com/package/vue-mce

↑こちらのモジュールを使ってみたいです

//main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import VueMce from 'vue-mce'; //←ここと

Vue.use(VueMce) //←ここ

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

このように宣言すれば

<vue-mce/>

タグが使えるのかなと思ったのですが

vue-mce.common.js?9a3b:1 Error: TinyMce was not found

と言われ使えませんでした

ここで必要とされているtinymce

https://github.com/tinymce/tinymce-vue

を入れてみたのですが、同じエラーが出てしまいます

そもそもモジュールの使い方が間違っているのでしょうか

//router.ts

import Vue from 'vue';
import Router from 'vue-router';

import Top from './views/Top.vue'
import openNewFiles from './views/openNewFiles.vue'
import createNew from './views/createNew.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: Top,
    },
    {
      path: '/openNewFiles',
      name: 'openNewFiles',
      component: openNewFiles,
    },
    {
      path: '/createNew',
      name: 'createNew',
      component: createNew,
    }
  ],
});

これはrouter.tsなのですが
ルーターインスタンスをexportするという宣言でしょうか

そして、vueを初期化する際の引数に入れることで、routerモジュールを適用しているのでしょうか

new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

では逆に、router.tsの

Vue.use(Router);

という宣言はどのような役割を担うのでしょうか

//vueMce.ts

import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

//export default new VueMce(){}

export 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コンポーネントのところは

<div class="tinymce">
  <div class="tinymce__init-area" id="mce_0" style="visibility: hidden;"> 
  </div> 
  <input name="" hidden="hidden">
</div>

このようになってました

//main.ts

import tinymce from 'tinymce'

import paste from 'tinymce/plugins/paste';
import link from 'tinymce/plugins/link';

tinymce.init({
    plugins: [paste, link]
})

このような書き方も試してみたのですが、動かなかったです...

最終的には

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タグではやりたくないです
どのようにすればいいでしょうか...

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

tinymce-vue は tinymce 公式の Vue コンポーネントです。tinymce 本体ではありません。
vue-mce は tinymce-vue の非公式版みたいなものです。

vue-mce/src/component/index.js の

  mounted() {
    if (!window.tinymce) {
      return this.handleError(new Error('TinyMce was not found'))
    }

を見ると分かるように、window.tinymce がないとダメっぽいので、

import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

を適当なところに記載し、テーマCSSとかもimportしてテンプレートにタグを書くだけです。


router.ts の解釈は合ってます。
Vue.use(...) はプラグインをインストールする際に使います。

vue-router の場合は <router-view><router-link>コンポーネントのインストールに加えて、全てのコンポーネントにミックスインを適用してbeforeCreateにフックし、this.$routerのように簡単にルーターインスタンスにアクセスできるようにしたりということを中でやってます。this.$router にルーターインスタンスを入れるために Vue インスタンス作成時のオプションで router を設定してる感じですね。

今回の場合はコンポーネントのインストールだけなので、

new Vue({
  .
  .
  .
  vueMce
})


などとする必要はありません。

ちなみに VueMce の中身は vue-mce/vue-mce.d.ts に書いてあるとおり、

export interface VueMce {
  install: PluginFunction<never>

  component: VueMceComponent
}

のようになっています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/19 11:39

    Vue.prototype.$userName = "nichika";

    declare module "vue/types/vue" {
    interface Vue{
    $userName : string
    }
    }

    プロパティの追加、これでできて感動してます

    declareについて

    https://docs.solab.jp/typescript/ambient/declaration/

    "vue/types/vue"と言う外部モジュールが使われることを宣言しているのでしょうか

    キャンセル

  • 2018/06/20 14:37

    うーん。CodeSandbox で色々試してみましたがイマイチ原因分かりません。
    TinyMCE の公式ドキュメントにモジュールの読み込みについて書かれてましたが書き換えても同じエラーが出てしまいますね。

    https://www.tinymce.com/docs/advanced/usage-with-module-loaders/

    vue-mce はそれほど難しいことしてる訳でなくコードも短いので、vue-mce を参考にご自分で TinyMCE のラッパーコンポーネント書いてしまったほうが早いかもしれませんね。

    キャンセル

  • 2018/06/21 11:34

    ありがとうございます
    わかりました、ちょっとやってみます...
    本当にありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る