序文
現在、vue に基づいた一般的なリッチ テキスト エディターが 2 つあります: 「vue2-editor」と「vue-quill-editor」は
どちらも Vue.js のリッチ テキスト エディター コンポーネントです。これらにはいくつかの共通の特徴がありますが、いくつかの違いもあります。
共通点:
1. リッチテキスト編集機能：どちらもリッチテキスト編集機能を提供し、太字、斜体、リンク、リストなどのテキストコンテンツの作成、編集、書式設定が可能で、jsではカーソル位置の取得や位置指定文字列挿入機能の指定もサポートしています。
2. Vue.js のサポート: 「vue2-editor」および「vue-quill-editor」は、Vue.js フレームワーク用に設計されたコンポーネントであり、Vue プロジェクトと簡単に統合できます。
3. カスタマイズ可能な構成: ツールバーの設定、画像のアップロード、スタイルのカスタマイズなど、独自のニーズに応じてこれら 2 つのエディターの外観と機能を構成およびカスタマイズできます。
違い：
1. 異なる基礎となるエディタ エンジン: 最大の違いは、異なる基礎となるエディタ エンジンを使用することです。「vue2-editor」はスレートベースのエディタ エンジンを使用し、「vue-quill-editor」は Quill エディタ エンジンを使用します。これは、基礎となる実装とサポートされる機能が異なることを意味します。
2. サイズとパフォーマンス: 「vue2-editor」は、より小型のエディター エンジンを使用しているため、より軽量です。これにより、特に高速に読み込む必要があるアプリの場合、パフォーマンスが向上する可能性があります。
3. エコシステムとプラグイン: 「vue-quill-editor」には、選択できる多くのコミュニティ プラグインとテーマを備えた大規模なエコシステムがあります。Quill エディタ エンジンには、広範なドキュメントとサポートもあります。「vue2-editor」にもいくつかのプラグインとテーマがありますが、そのエコシステムは比較的小規模です。
しかし、不親切なのは、これら 2 つのライブラリが外国人によって編纂されており、体系的な中国語の文書が存在せず、インターネット上で提供されているブログも少ないことです。
シーン
このコンポーネントの使用シナリオについて簡単に説明します。多くの場合、このコンポーネントはリッチ テキストを編集するために管理バックグラウンドで使用され、ユーザーが表示できるようにページにエコー表示されます (現在は主に携帯電話上で使用されます)。したがって、これには 2 つの部分が含まれます。と管理背景は 携帯電話の h5 を例に、vue2-editor を使用して説明します。
1. 管理背景を編集、保存、使用する
インストールについて簡単に説明しますと、名前が分かればインストールできるはずです。
cnpm install vue2-editor
これは使用するコンポーネントです
<VueEditor
ref="xiangxiagnganyuGuide"
:editorOptions="editorOption"
v-model="detail.questionList.question1.yixiangGuideWord"
useCustomImageHandler
style="width: 99%;"
></VueEditor>
これらは構成コンポーネントのツール機能の一部であり、リスト、ファイルのアップロード、その他の機能を含む、コメントアウトされた部分も開くことができます。
export let editorOption= {
modules:{
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
// ['blockquote', 'code-block'], //引用，代码块
// [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
// [{'list': 'ordered'}, {'list': 'bullet'}], //列表
// [{'script': 'sub'}, {'script': 'super'}], // 上下标
// [{'indent': '-1'}, {'indent': '+1'}], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{
'size': ['small', false, 'large', 'huge']}], // 字体大小
// [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{
'color': []}, {
'background': []}], // 字体颜色，字体背景颜色
// [{'font': []}], //字体
[{
'align': []}], //对齐方式
['clean'], //清除字体样式
// ['image', 'video'] //上传图片、上传视频
]
},
placeholder: "输入内容..."
} //编辑器配置项
以下の図は、編集されたページを示しています。
2. 携帯電話のリッチテキストのエコー表示
管理の背景はほぼここまでで、あとは携帯電話でのスタイルの解析方法ですが、当然v-html属性で表示する必要がありますが、ここで注意点があります。
1. モバイル端末（つまり、ユーザーに表示されるエコー端末）もユーザーのスタイルを参照するためにこのコンポーネントをインストールする必要があり、そうでないとモバイル端末はユーザーのスタイルを完全に表示できません。
cnpm install vue2-editor
2. main.js でスタイルをグローバルに導入します。導入後、すべての vue コンポーネントはリッチ テキスト内のクラス スタイル名と一致します。
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
3. (重要) ディスプレイ側でリッチテキストを表示するには、ここで書いた外側の div が存在し、内部スタイルを有効にするために class="ql-editor" を引用符で囲む必要がありますが、このステップは非常に重要です。
<div class="ql-editor">
<p v-html="content"></p>
</div>
以下のように、詳細が表示されます。
以上がリッチテキストを使用してエコーする基本的な内容です。
余分な勉強
1.たとえば、画像をアップロードするには、上記の設定パラメータで画像アップロード機能を有効にし、 @image-added="handleImageAdded" を有効にするだけです。コンポーネント。
<VueEditor
v-model="currentRow.introduction"
useCustomImageHandler
@image-added="handleImageAdded"
style="width: 540px; min-height: 200px"
></VueEditor>
これは handleImageAdded メソッドです。内部の UploadImg は独自のアップロード メソッドです。このメソッドはカスタマイズされています:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
try {
const res = await uploadImg(this, file);
if (res.code == 200) {
Editor.insertEmbed(cursorLocation, "image", res.data);
resetUploader();
} else {
this.$Message.error(res.msg);
}
} catch (e) {
console.log(e);
}
},
2. (Niubi) 指定した文字列をカーソル位置に挿入:多くの組み込みメソッドがあり、通常の入力ボックスとして使用する場合に入力よりも多くの利点があります。 , input を使用することもできます。データの複雑な処理を行うには js を使用する必要がありますが、vue2-editor には独自のメソッドinsertTextがあり、カーソルのインデックス位置を取得する便利なメソッドを使用して、挿入操作を簡単に実行できます。
<VueEditor
ref="xiangxiagnganyuGuide"
:editorOptions="editorOption"
v-model="detail.questionList.question1.yixiangGuideWord"
useCustomImageHandler
style="width: 99%;"
></VueEditor>
><Button @click="insertTextAtCursor(1,'[NAME]')">日程名称</Button>
insertTextAtCursor(type,content) {
let quill = null
if (type === 1){
quill = this.$refs.xiangxiagnganyuGuide.quill
}
const cursorPosition = quill.getSelection().index; // 获取光标位置
const newText = content;
// 在光标位置插入文本
quill.insertText(cursorPosition, newText, 'user');
// 如果需要，更新Vue的绑定数据
this.content = quill.root.innerHTML;
},
結論：
このコンポーネントは非常に強力で、強力な通常のテキスト ボックスとしても使用できます (ツールバーは非表示)。内部で挿入メソッドを使用することもでき、これは非常に優れています。一番の理由は、情報を探すのが大変なので自分で整理し、次回使うときは記録を直接見ようと思います、そうでないと忘れてしまい、また探す必要があるからです。次回はお久しぶりです。