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

今回は、Vue プロジェクトに tinymce リッチ テキスト エディター を導入する方法を説明します。Vue プロジェクトに tinymce リッチ テキスト エディターを導入する際の 注意事項 については、実際のケースを見てみましょう。見てください。

このプロジェクトで使用したオリジナルのリッチ テキスト エディターは、非常に軽量で簡潔なエディターである wangEditor でした

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

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

-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_ で

module

s の tinymce/skins ディレクトリを見つけて、skins ディレクトリを静的ディレクトリにコピーします

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

tinymce はデフォルトで英語のインターフェイスになっているため、中国語の言語パックもダウンロードする必要があります (忘れずにはしごを作りましょう！

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

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
}

/ / typescript プロジェクトの場合vue-cli 3.x で作成され、URL の静的部分を削除します。つまり、skin_url: '/tinymce/skins/lightgray'同時に、マウント時に一度初期化する必要もあります:

ここに渡す場合 上記のinitオブジェクトを入力しても反映されませんが、パラメータが渡されないとエラーが報告されるので、ここに空のオブジェクトを渡します

3. 拡張プラグイン

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

同时还需要在页面引入这些插件：

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

贴一下完整的组件代码：

<template>
 <p>
  </p>
<h1 id="tinymce">tinymce</h1>
  <editor></editor>
  <p></p>
 
</template>
<script>
import tinymce from &#39;tinymce/tinymce&#39;
import &#39;tinymce/themes/modern/theme&#39;
import Editor from &#39;@tinymce/tinymce-vue&#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>

四、上传图片

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息：

success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用vue裁切预览组件

怎样使用Vue在页面右上角实现可悬浮/隐藏菜单

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