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

この記事では、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 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

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

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

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

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 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>

4. 画像をアップロードします

tinymce は、ユーザーが画像をアップロードするための関連パラメータを設定できるようにするための、images_upload_url などの API を提供します

アップロード メソッドを定義する

のimages_upload_handler このメソッドは 3 つのパラメータを提供します: blobInfo、success、failure

ここで、blobinfo はアップロードされたファイルに関する情報を含むオブジェクトです:

success と Failure は関数、アップロードは成功しました失敗した場合は画像アドレスを成功に渡し、失敗した場合はエラーメッセージを失敗に渡します

以上がtinymce リッチ テキスト エディターを Vue プロジェクトに導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。