关于vue项目中使用富文本编辑器的详细操作教程

                              关于vue项目中使用富文本编辑器的详细操作教程

效果图如下:

如需以上效果的编辑器插入请继续向下看步骤↓:

1. 安装包 : npm install vue-quill-editor

**2. 在需要富文本编辑器的组建中引入所需要的组件及样式文件
import { quillEditor } from ‘vue-quill-editor’
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

3.导入组件后,记得在conponents里定义组件
components: {
quillEditor
}

4**.在需要放入编辑器的位置插入组件标签**

5.如需编辑编辑器中所展示小icon的作用可参考以下代码,自行注释试一下效果,
editorOption: {
placeholder: ‘请输入内容’, // 占位文字
modules: {
// 工具栏
toolbar: [
[‘bold’, ‘italic’, ‘underline’, ‘strike’],
[‘blockquote’, ‘code-block’],
[{ header: 1 }, { header: 2 }],
[{ list: ‘ordered’ }, { list: ‘bullet’ }],
[{ indent: ‘-1’ }, { indent: ‘+1’ }],
[‘image’]
]
}
},
编辑样式时,需要在标签内绑定下 代码如下:

ok~~~~~~做到此处你已经搞定一个简单的引入式编辑器啦