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

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

ただいまの
回答率

90.51%

  • Vue.js

    753questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    353questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

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

解決済

回答 1

投稿 編集

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

nihcika

score 20

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/15 17:26 編集

    丁寧な回答ありがとうござます

    「全てのコンポーネントにミックスインを適用してbeforeCreateにフックし、this.$routerのように簡単にルーターインスタンスにアクセスできるようにしたりということを中でやってます。this.$router にルーターインスタンスを入れるために Vue インスタンス作成時のオプションで router を設定してる」

    ということに関して、

    https://jp.vuejs.org/v2/guide/mixins.html
    ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。

    例えば、あるコンポーネントにmixinを適用し、そのコンポーネントで元々created関数が定義されてた場合、mixinで定義したcreated関数の中の処理が、そのコンポーネントのcreated関数の中に加えられるといった感じでしょうか

    つまりこの場合だと、ルーターインスタンスにアクセスできる処理を全てのコンポーネントに加えるようなイメージでしょうか

    そのような処理や、this.$router にルーターインスタンスを入れる処理などは

    beforeCreateのタイミングでしかできないのでしょうか

    キャンセル

  • 2018/06/15 22:45

    > 同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック前に呼ばれます。

    と公式ドキュメントに書かれてます。
    ミックスインで beforeCreate にフックした場合は、各コンポーネントの beforeCreate メソッドが呼び出される前にミックスインの beforeCreate メソッドが呼び出されるような形ですね。

    this.$router などに値を入れるだけなら他のタイミングでも出来ますが、created や computed 内で呼び出されることが想定されるなら beforeCreate にフックする必要があります。特別な意図がない場合は beforeCreate にフックすれば良いと思います。

    ただし、これはプラグインなどを制作する場合の話で、アプリ制作などで Vue.prototype を変更しても大丈夫な場合は↓のような感じでプロパティを定義してしまえばOKです。

    Vue.prototype.$appName = 'My App'

    詳しくはこちら https://jp.vuejs.org/v2/cookbook/adding-instance-properties.html

    また TypeScript の場合は宣言ファイルを書く必要が出てきます。
    ↓例

    import Vue from 'vue';

    declare module 'vue/types/vue' {
    interface Vue {
    $appName: string;
    }
    }

    キャンセル

  • 2018/06/18 15:28

    いつも本当にありがとうございます
    ドキュメントをもう一度、読み直してみます(T_T)

    なるほどです、フック関数と言うのはvueで言うcreatedとかbeforeCreateとかが当たるのでしょうか
    ただ、フックと言う言葉を調べていると
    「フック (プログラミング) フック(Hook)は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。」
    とあるので、普通にmethodsに追加する関数の方がフック関数っぽいなとか思いました、って解釈変ですかね(>_<)

    そして例えばcreatedだと、mixinの処理もvueインスタンスの処理も両方実行されるのですね(mixinのcreatedの処理→vueインスタンスのcreatedの処理の順で)
    methodsだと同じ名前の関数は、vueインスタンスの方の処理だけが実行されるのですね

    なるほどです

    Vue.prototype.$appName = 'My App'
    今 $appName は、作成前でも全ての Vue インスタンスで使用可能です。 実行した場合:

    new Vue({
    beforeCreate: function() {
    console.log(this.$appName)
    }
    })
    "My App" はコンソールに記録されます。

    これはインスタンスが作られる前にVueクラスに直接プロパティを追加しているイメージでしょうか

    そしてtypescriptからコンパイルするためには型定義が必要だと

    export interface Vue {
    readonly $el: HTMLElement;
    readonly $options: ComponentOptions<Vue>;
    readonly $parent: Vue;
    readonly $root: Vue;
    readonly $children: Vue[];
    readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };
    readonly $slots: { [key: string]: VNode[] };

    'vue/types/vue' (vue.d.ts)に上記インターフェースが定義されていました
    ここに追加するイメージでしょうか

    ---------------------------------------------------------------------------------------------------------------------------------------

    vue-mceに関する質問を質問本文に追記したので良かったらみて見てください(T_T)

    キャンセル

  • 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.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • Vue.js

    753questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    353questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。