本文记录了在vue中安装和使用Quill富文本编辑器的具体方法，供大家参考。具体内容如下

1.安装相关性

NPM安装vue-quiell-editor-save注意：我没有直接安装在现有的vue项目中(包括安装的依赖项，也就是node_modules文件夹)，报告了一个没有截图的错误，但是如果我没记错的话，‘项目名称 Node _ Modules CLI UI Node _ Modules Word Wrap’没有显示。因此，我删除了项目下的node_modules文件，然后直接安装了quiell依赖项(NPM installvue-quiell-editor-save)。然后npm run dev运行项目，不影响之前vue项目的使用和操作，也可以使用quill的富文本编辑器。

2.使用

(1)在“项目名称srcmain.js”中介绍

从“vue”中导入vue从“vue-quiell-editor”中导入vuilleditor/这三个css必须引入，否则文本编辑器中会出现不规则的黑白几何图形//这三个css可以在main.js中引入，也可以在特定的vue文件中导入“quiet/dist/quiet . core . CSS”import“quiet/dist/quiet . snow . CSS”import“quiet/dist/quiet . bubble . CSS”vue . use(vuilleditor)

模板El-row quill-editor v-model=' content ' : options=' editor option ' @ blur=' oneditorbrur($ event)' @ focus=' onEditorFocus($ event)' @ change=' onEditorChange($ event)'/quill-editor/El-row/templatescript import { quillEditor } from ' vue-quill-editor ' export default { data : function(){ return { content 3: ' } }，editor option 33: } }，Methods :不是奎尔编辑带来的，是我自己在项目中添加的。

做完这个介绍，就可以得到一个这样的编辑器。

如果需要更改文本字段部分的高度，如下所示：

风格。奎尔-编辑{ height: 350px}/styleQuill自定义工具栏、字体等。请点击：使用vue中的Quill富文本编辑器

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。