tinymce リッチテキストエディタを Vue に導入する手順の詳細な説明-jsチュートリアル-php.cn

tinymce リッチテキストエディタを Vue に導入する手順の詳細な説明

php中世界最好的语言

リリース： 2018-05-14 11:13:38

オリジナル

4020 人が閲覧しました

今回は、tinymce リッチテキスト editor を Vue に導入する手順について詳しく説明します。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 class=&#39;tinymce&#39;>
  <h1>tinymce</h1>
  <editor id=&#39;tinymce&#39; v-model=&#39;tinymceHtml&#39; :init=&#39;init&#39;></editor>
  <p v-html=&#39;tinymceHtml&#39;></p>
 </p>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
 name: 'tinymce',
 data () {
  return {
   tinymceHtml: '请输入内容',
   init: {
    language_url: '/static/tinymce/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/static/tinymce/skins/lightgray',
    height: 300,
    plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
    toolbar:
     'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

ログイン後にコピー