在前端vue项目中我们会需要文本编辑器 当然我们用的比较多的是百度的Ueditor 当然我们也有其他非常好的解决方案

具体的editor组件代码我已经放在我的gist

集成Quill-editor

1.集成quill

这里是我项目里集成的文本编辑器的地址 Vue-Quill-Editor

在已经使用我们的脚手架工具初始化我们的vue项目后 我们在终端执行

$ npm install vue-quill-editor --save

接着去项目中的main.js引用

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

这和我们使用vue-router是一样的

为了方便使用我在 src/components/common新建了一个QEditor.vue
接着就是去初始化我们的editor组件

  data(){
    return{
        content: '',
        editorOption: {
            modules: {
                toolbar: [
                  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                  ['bold', 'italic', 'underline','strike'],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                   [{ 'color': [] }, { 'background': [] }],
                  ['image', 'link','code-block']
                ]
          },
        }
    }
},

这里的toolbar是定义自己需要的功能组件 你可以根据自己的需要来定义 具体的可以看文档定义:

https://quilljs.com/docs/modules/toolbar/

在安装初始化之后 这里是监听了change的方法

onEditorChange({ editor, html, text }) {
  this.content = html
},

这里的html返回的就是html文本内容 而text则是不包含html标签的纯文本内容

2.完成好后就可以去引入我们的editor组件 这里我在Start.vue里去使用的话

  import QEditor from 'components/common/QEditor'

接着就是去声明我们的组件

 components:{
    'qeditor':QEditor,
 }

最后的效果的话就是这样的(部分样式可以自己去修改)

部分资料