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

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

php中世界最好的语言

リリース： 2018-06-01 11:28:07

オリジナル

2572 人が閲覧しました

今回は、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 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>

ログイン後にコピー