Vueにvue-quill-editorリッチテキストエディタを使用するインストール
1323 ワード
1、インストール依存
npm install vue-quill-editor --save
2、使用
(1)「プロジェクト名srcmain.js」にimport VueQuillEditor from'vue-quill-editor//必ずこの3つのcssを導入します.そうしないと、テキストエディタに不規則な白黒ジオメトリ//この3つのcssはmain.jsに導入できます.具体的に使用する.vueファイルにimport'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)を導入することもできます.
(2)特定のvueファイルで参照
<br> import { quillEditor } from 'vue-quill-editor'</p>
<p>export default { <br> data:function(){ <br> return{ <br> content:'',<br> editorOption:{}<br> }<br> },<br> methods:{ <br> onEditorBlue(editor){//フォーカスを失ったイベント <br> },<br> onEditorFocus(editor){//フォーカスイベントを取得<br> },<br> onEditorChange({editor,html,text}){//エディタテキストが変化<br> //this.contentは、現在のエディタ内のテキストの内容をリアルタイムで取得できます<br> console.log(this.content);<br> }<br> }<br> }</p>
<p>
テキストフィールド部分の高さを変更する必要がある場合は、次のようにします.
npm install vue-quill-editor --save
2、使用
(1)「プロジェクト名srcmain.js」にimport VueQuillEditor from'vue-quill-editor//必ずこの3つのcssを導入します.そうしないと、テキストエディタに不規則な白黒ジオメトリ//この3つのcssはmain.jsに導入できます.具体的に使用する.vueファイルにimport'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)を導入することもできます.
(2)特定のvueファイルで参照
<br> import { quillEditor } from 'vue-quill-editor'</p>
<p>export default { <br> data:function(){ <br> return{ <br> content:'',<br> editorOption:{}<br> }<br> },<br> methods:{ <br> onEditorBlue(editor){//フォーカスを失ったイベント <br> },<br> onEditorFocus(editor){//フォーカスイベントを取得<br> },<br> onEditorChange({editor,html,text}){//エディタテキストが変化<br> //this.contentは、現在のエディタ内のテキストの内容をリアルタイムで取得できます<br> console.log(this.content);<br> }<br> }<br> }</p>
<p>
テキストフィールド部分の高さを変更する必要がある場合は、次のようにします.