Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

npm をインストール tinymce -S
npm インストール @types/tinymce -S
npm をインストールします @tinymce/tinymce-vue -S

<テンプレート>
    <div>
        <エディター:id="id" v-model="content" :init="init"></エディター>
    </div>
</テンプレート>

<script lang="ts">
'vue-property-decorator' から { Component、Prop、Vue、Watch } をインポートします。

'tinymce' から tinymce をインポートします。
'@tinymce/tinymce-vue' から Editor をインポートします。

'tinymce/themes/silver/theme' をインポートします。
'tinymce/plugins/image' をインポートします。
'tinymce/plugins/link' をインポートします。
'tinymce/plugins/code' をインポートします。
'tinymce/plugins/table' をインポートします。
'tinymce/plugins/lists' をインポートします。
'tinymce/plugins/contextmenu' をインポートします。
'tinymce/plugins/wordcount' をインポートします。
'tinymce/plugins/colorpicker' をインポートします。
'tinymce/plugins/textcolor' をインポートします。
'tinymce/plugins/media' をインポートします。
'tinymce/plugins/fullscreen' をインポートします。
'tinymce/plugins/preview' をインポートします。
'tinymce/plugins/pagebreak' をインポートします。
'tinymce/plugins/insertdatetime' をインポートします。
'tinymce/plugins/hr' をインポートします。
'tinymce/plugins/paste' をインポートします。
'tinymce/plugins/codesample' をインポートします。
'tinymce/icons/default/icons' をインポートします。

コンソールにログ出力します。

@Component({ name: 'TinymceEditer', components: { エディター } })
エクスポートデフォルトクラスはVueを拡張します{
    //プロパティIDを設定する
    @Prop({ デフォルト: 'vue-tinymce-' + +new Date() }) id!: 文字列;
 
 //デフォルトの高さ @Prop({ default: 300 }) height!: number;

    @Prop({ デフォルト: '' })
    プライベート値!: 文字列;

    プライベートコンテンツ: 文字列 = '';

    @Watch('値')
    プライベートonChangeValue(newVal: 文字列) {
        this.content = newVal;
    }

    @Watch('コンテンツ')
    プライベートonChangeContent(newVal: 文字列) {
        this.$emit('input', newVal);
    }

    //リッチテキストボックスの初期化構成 private get init() {
        戻る {
            セレクター: '#' + this.id, //リッチテキストエディターID
            language: 'zh_CN', //言語language_url: '/tinymce/zh_CN.js', //言語パッケージkin_url: '/tinymce/skins/ui/oxide', //エディターが正しく動作するにはスキンが必要なので、前にコピーしたスキンファイルを指すように skin_url を設定しますmenubar: false, //メニューバーplugins:
                'リンク リスト 画像 コード テーブル カラーピッカー テキストカラー 単語数 コンテキストメニュー メディア テーブル 全画面プレビュー ページブレーク 挿入日時 時間 貼り付け コードサンプル 絵文字', //プラグイン ツールバー:
                : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
            //実行をインスタンス化 init_instance_callback: (editor: any) => {
                this.content && editor.setContent(this.content);

                //this.hasInit = true
                editor.on('NodeChange KeyUp SetContent を変更', () => {
                    //this.hasChange = true
                    コンテンツを編集します。
                });
            },

            //ビデオ設定コールバック video_template_callback: (data: any) => {
                `<ビデオ幅=" を返します
                    ${data.width} " 高さ="${data.height}"
                    ${data.poster ? 'poster="' + data.poster + '"' : ''}
                    コントロール="コントロール">
                    <ソース src="${data.source}"/>
                </ビデオ>`;
            },

            // 画像を貼り付けるコールバック images_upload_handler: (blobInfo: any, success: Function, failure: Function) => {
                this.handleImgUpload(blobInfo、成功、失敗);
            },
        };
    }

    プライベートマウント() {
        this.content = this.value;
    }

    //写真をアップロード private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
        this.$emit('upload', blobInfo, success, failure);
    }
}
</スクリプト>

<スタイル lang="scss">
.tox-tinymce-aux {
    z-index: 3000 !重要;
}
</スタイル>

<テンプレート>
   <tinymce v-model="コンテンツ" />
</テンプレート>

<script lang="ts">
'vue-property-decorator' から Component、Vue } をインポートします。
'@/components/tinymce/tinymce.vue' から Tinymce をインポートします。

@成分（{
    コンポーネント:
        ティニムス、
    },
})
エクスポートデフォルトクラスはVueを拡張します{
    プライベートコンテンツ: 文字列 = '';
}
</スクリプト>

<style lang="scss" スコープ></style>

 初期化: {
        言語: "zh_CN",
        スキンのURL: "/tinymce/skins/ui/oxide",
        高さ: "100%",
        フォントサイズ形式: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",
        フォントフォーマット:
          "Microsoft YaHei=Microsoft YaHei;Founder FangSong_GBK=Founder FangSong_GBK;Songti=simsun,serif;FangSongti=FangSong,serif;Boldti=SimHei;Times New Roman=Times New Roman;",
        プラグイン: {
	      タイプ: [文字列、配列],
	      デフォルト: "コード リスト 画像 メディア テーブル 単語数 インデント 2em"
	    、
        ツールバー:
	      タイプ: [文字列、配列],
	      デフォルト：
	        「コード | 行の高さ | 元に戻す やり直し | フォントサイズ選択 | フォント選択 | 形式選択 | 太字 斜体 前景色 背景色 | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | 箇条書き 数値リスト アウトデント インデント indent2em | リスト 画像 メディア テーブル | 形式を削除」
	    },
        ブランディング: 偽、
        メニューバー: false、
        セットアップ: エディター => {
          _this = this とします。
          editor.ui.registry.addButton("myCustomToolbarButton", {
            テキスト:「縮小」、
            onAction: 関数() {
              _this.show= !_this.show;
            }
          });
        }
      },

 セットアップ: エディター => {
    _this = this とします。
    editor.ui.registry.addButton("myCustomToolbarButton", {
      テキスト:「縮小」、
      onAction: 関数() {
        _this.show= !_this.show;
      }
    });
  }