tinymce リッチテキストエディターを Vue プロジェクトに導入-jsチュートリアル-php.cn

tinymce リッチテキストエディターを Vue プロジェクトに導入

不言

リリース： 2018-05-05 15:55:16

オリジナル

4582 人が閲覧しました

この記事では、Vue プロジェクトに tinymce リッチテキストエディターを導入するサンプルコードを主に紹介します。非常に優れており、必要な友人は参考にしてください。

プロジェクトで元々使用されていたリッチテキストエディターは、wangEditor です。、これは非常に軽量でシンプルなエディターです

しかし、会社のビジネスがアップグレードされ、私は長い間探していたより包括的な機能を備えたエディターが必要です。現在、一般的なエディターには次のものがあります。

UEditor: Baidu フロント。 -エンドオープンソースプロジェクトは強力で jQuery に基づいていますが、現在はメンテナンスされておらず、バックエンドコードが制限されているため、変更が困難です。

bootstrap-wysiwyg: マイクロ、使いやすく、小さくて美しい。、Bootstrap + jQuery だけ...

kindEditor : 強力な機能、シンプルなコード、バックエンドの設定が必要、長い間更新されていません

wangEditor : 軽量でシンプルで使いやすいですが、にアップグレードした後3.x では、カスタマイズされた開発には不便です。しかし、作者はとても勤勉です。広い意味では、彼と私は家族です。電話してください。機能はそれほど多くありませんが、API 自体の拡張も簡単です。英語が理解できる方は…

サマーノート: なしさらに調べてみると、UIがとても美しく、小さくて美しいエディターだということがわかりましたが、大きなエディターが必要です

そんな参考にして、ようやくtinymce を選んだのは、ラダーなしでは公式 Web サイトを開くことすらできないエディターです。主な理由は次の 2 点です:

1. GitHub にたくさんのスターがあり、機能が充実しています。 2. Word から貼り付けるときにほとんどの書式設定を維持できる唯一のエディター

3. インターフェイスを変更するためにコードをスキャンするバックエンド担当者を見つける必要がなく、フロントエンドとバックエンドは分離しました

4. 良い点が 2 つあります。

1. リソースのダウンロード

tinymceはvueプロジェクト用にコンポーネントtinymce-vueを公式に提供しています

npm install @tinymce/tinymce-vue -S

ログイン後にコピー

このコードをvscodeやwebstormのターミナルで実行するとエラーが発生する場合があります。オペレーティングシステムの組み込みコマンドラインツールを使用するのが最適です

tinymce サービスを購入した場合は、tinymce-vue の手順を参照し、API キーを介して直接 tinymce を使用できます

次のように購入していない場合私、まだ tinymce を正直にダウンロードする必要があります

npm install tinymce -S

ログイン後にコピー

インストール後、node_modules で tinymce/skins ディレクトリを見つけて、skins ディレクトリを静的ディレクトリにコピーします

// を使用してビルドされた typescript プロジェクトの場合vue-cli 3.x、記事内のパブリックディレクトリに置きます。すべての静的ディレクトリはこの方法で処理されます

tinymce はデフォルトで英語のインターフェイスに設定されているため、中国語の言語パックもダウンロードする必要があります (ラダーを構築することを忘れないでください) ! はしごを構築! はしごを構築!)

次に、構造のために、この言語パックを静的ディレクトリに置きます

2. 初期化

以下のファイルをページに導入しました

import tinymce from &#39;tinymce/tinymce&#39;
import &#39;tinymce/themes/modern/theme&#39;
import Editor from &#39;@tinymce/tinymce-vue&#39;

ログイン後にコピー

tinymce-vueはコンポーネントに登録して直接使用する必要があるコンポーネントです

ここでのinitはtinymce初期化設定項目です。 API については後で説明しますので、公式ドキュメントを参照してください

エディターが適切に動作するにはスキンが必要なので、スキンファイルを作成する前に、skin_url を設定してコピーをポイントする必要があります

init: {
 language_url: &#39;/static/tinymce/zh_CN.js&#39;,
 language: &#39;zh_CN&#39;,
 skin_url: &#39;/static/tinymce/skins/lightgray&#39;,
 height: 300
}

ログイン後にコピー

// vue-cli 3.x で作成された Typescript プロジェクト、URL の静的部分を削除します。つまり、skin_url: '/tinymce/skins/lightgray'

マウント時にも必要です。一度初期化します:

ここに上記のinitオブジェクトを渡しても効果はありませんが、パラメータが何も渡されない場合はエラーが報告されるので、ここに空のオブジェクトを渡します

3. 拡張プラグイン

上記の初期化が完了すると、エディターは通常どおりに実行できますが、いくつかの基本的な機能のみを使用できますtinymceはプラグインを追加することで機能を追加します

たとえば、画像をアップロードする機能を追加したい場合は、画像プラグインを使用する必要があります-ins、ハイパーリンクを追加するには、リンクプラグインを使用する必要があります

同時に、これらのプラグインをページに導入する必要もあります:

プラグインを追加した後、対応する機能ボタンはデフォルトでツールバーに追加されます。ツールバーはカスタマイズすることもできます

完全なコンポーネントコードを投稿してください:



<script>
import tinymce from &amp;#39;tinymce/tinymce&amp;#39;
import &amp;#39;tinymce/themes/modern/theme&amp;#39;
import Editor from &amp;#39;@tinymce/tinymce-vue&amp;#39;
import &#39;tinymce/plugins/image&#39;
import &#39;tinymce/plugins/link&#39;
import &#39;tinymce/plugins/code&#39;
import &#39;tinymce/plugins/table&#39;
import &#39;tinymce/plugins/lists&#39;
import &#39;tinymce/plugins/contextmenu&#39;
import &#39;tinymce/plugins/wordcount&#39;
import &#39;tinymce/plugins/colorpicker&#39;
import &#39;tinymce/plugins/textcolor&#39;
export default {
 name: &#39;tinymce&#39;,
 data () {
  return {
   tinymceHtml: &#39;请输入内容&#39;,
   init: {
    language_url: &#39;/static/tinymce/zh_CN.js&#39;,
    language: &#39;zh_CN&#39;,
    skin_url: &#39;/static/tinymce/skins/lightgray&#39;,
    height: 300,
    plugins: &#39;link lists image code table colorpicker textcolor wordcount contextmenu&#39;,
    toolbar:
     &#39;bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat&#39;,
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

ログイン後にコピー