Baiduのリッチテキストエディタのすべての精通している、ここであなたにリッチテキストエディタTinyMCEの、個人的な感触の格好良いBaiduのインターフェースよりも、簡単に通話を伝えるために、私は少しすばらしい神を見てする方法がわかりません！
以下の実施例は、図12に示すVUE使用、最終的な結果です。
インストール：
npm install tinymce
npm install @tinymce/tinymce-vue
语言设置：
- 公式サイトでは、言語パックダウンロードしhttps://www.tiny.cloud/get-tiny/language-packages/を、
パブリックフォルダのTinyMCEを作成するためのカタログでは、置く言語は、その後、node_modulesに包まれた肌のTinyMCEは、公共/ TinyMCEの中にコピーを見つける言語ファイルのzh_CN.jsと皮膚の表皮をファイル
次のコンポーネントは、リッチテキストをカプセル化しています
使用します。 <TinyMCEのREF = "tinymce1" ID = " 'tinymce1'"> </ TinyMCEの> エディタの内容を取得します:.この$ refs.tinymce1.tinymceHtmlを
<テンプレート>
<のdivクラス= "TinyMCEの">
<編集者：ID = "ID" Vモデル= "tinymceHtml"：INIT = "INIT"> </編集>
</ div>
</テンプレート>
<スクリプト>
'TinyMCEを/ TinyMCEの' からの輸入TinyMCEの
'@ TinyMCEを/ TinyMCEの-VUE' からエディタをインポート
輸入「のTinyMCE /テーマ/シルバー/テーマ」
導入//挿入-------------------- --------------------
輸入「のTinyMCE /プラグイン/画像」//挿入プラグアップロード写真
「TinyMCEを/プラグイン/ imagetools」//挿入プラグのアップロード画像をインポート
輸入「のTinyMCE /プラグイン/メディア」//挿入ビデオウィジェット
「TinyMCEを/プラグイン/テーブル」//表の挿入ウィジェットをインポートします
輸入「のTinyMCE /プラグイン/リンク」//ハイパーリンクプラグ
「TinyMCEを/プラグイン/コード」//ブロックウィジェットをインポート
プラグインの「TinyMCEを/プラグイン/リスト」//リストをインポート
輸入「のTinyMCE /プラグイン/コンテキストメニュー」//コンテキストメニュープラグイン
「TinyMCEを/プラグイン/語数」//カウントのプラグインのインポート
輸入「のTinyMCE /プラグイン/カラーピッカー」//カラー選択ウィジェット
輸入「のTinyMCE /プラグイン/ textcolorは」//テキストの色ウィジェット
「TinyMCEを/プラグイン/フルスクリーン」//フルスクリーンインポート
輸入 "のTinyMCE /プラグイン/ヘルプ]
'TinyMCEを/プラグイン/ charmapの' インポート
「TinyMCEを/プラグイン/ペースト」をインポートします
輸入「のTinyMCE /プラグイン/印刷」
「TinyMCEを/プラグイン/プレビュー」インポート
輸入 'のTinyMCE /プラグイン/ hrで'
輸入「のTinyMCE /プラグイン/アンカー」
「TinyMCEを/プラグイン/改ページ」インポート
「TinyMCEを/プラグイン/スペルチェッカ」インポート
'TinyMCEを/プラグイン/ searchreplace' インポート
'TinyMCEを/プラグイン/ visualblocks' インポート
'TinyMCEを/プラグイン/ visualchars' インポート
'TinyMCEを/ plugins /にInsertDateTimeを' インポート
輸入「のTinyMCE /プラグイン/改行なし」
'TinyMCEを/ plugins /に自動保存' インポート
「TinyMCEを/プラグイン/フルページ」インポート
'TinyMCEを/プラグイン/ TOC' インポート
輸入「のTinyMCE /テーマ/シルバー/テーマ」
輸出のデフォルト{
成分：{
編集者、
}、
小道具：[ 'ID']、
データ（）{
リターン{
その中に：{
セレクター：this.id、//選択HTML要素
language_url： '/ TinyMCEを/ zh_CN.js'、//インポート言語ファイル
言語： "がzh_CN"、//言語設定
//無効：真、//無効
skin_url： '/ TinyMCEを/スキン/ UI /酸化物'、//テーマのスタイル
高さ：250、//高さ
テーマ：「シルバー」、
メニューバー：偽、//非表示トップメニューメニュー
ツールバー：真、//ツールバーを無効にする場合はfalse（非表示ツールバー）
browser_spellcheck：真、//スペルチェック
ブランディング：偽、//行く透かし
image_advtab：真、
ステータスバー：偽、//エディタの下部のステータスバーを非表示
elementpath：偽、//無効に現在のラベル経路角
paste_data_images：真、//画像を貼り付けることができ
automatic_uploads：真、
images_upload_handler：（blobInfo、成功、失敗）=> {
そこXHR、formdat A;
XHR =新しいXMLHttpRequestを（）;
xhr.withCredentials = falseは、
xhr.open（「POST」、「uploadFileURL」）; //最初のパラメータ要求は、2番目のパラメータはここで、リクエストのアドレスである私の支柱の構成、作用、他の（PHPなど）であってもよい場合にそうです設定：xxx.php
xhr.onload =関数（）{
JSONでした。
もし（xhr.status！== 200）{
失敗（ 'HTTPエラー：' + xhr.status）。
リターン;
}
JSON = JSON.parse（xhr.responseText）。
（もし！JSON || typeofをjson.location！== '文字列'）{
失敗（ '無効なJSON：' + xhr.responseText）。
リターン;
}
成功（json.location）。
}。
新しいformdat A = formdat（）。
formData.append（ 'ファイル'、blobInfo.blob（）、blobInfo.filename（））;
xhr.send（FORMDATA）。
}、
プラグイン：
「リスト画像imagetoolsメディアテーブルの語数コードフルスクリーンヘルプTOCフルページの自動保存改行InsertDateTimeをvisualchars visualblocks searchreplaceスペルチェッカ改ページのリンクは、印刷プレビュー時間のアンカーを貼り付けるのcharmap」
ツールバー：[
「newdocumentアンドゥリドゥ| formatselect visualaid |カットコピーペーストのSelectAll | 太字、斜体、下線、取り消し線| codeformatのblockformats | 上付き文字、下付き文字| 前景色背景色| alignleft aligncenter alignright alignjustify | インデント解除インデント| removeformat」、
「コードbullistのnumlist | リストの画像imagetoolsメディアテーブルリンク|フルスクリーンヘルプTOCフルページrestoredraft改行InsertDateTimeをvisualchars visualblocks searchreplaceスペルチェッカ改ページアンカーのcharmap pastetext印刷プレビュー時間」
]
}、
tinymceHtml： ""、
}
}、
{）（マウント
tinymce.init（{}）
}、
}
</ SCRIPT>
<スタイルLANG = "SCSS" スコープ>
</スタイル>