vue+element ui富文本编辑器的使用(quill-editor)

首先先安装富文本编辑器插件

npm install vue-quill-editor --save

然后在main.js文件中,全局注册

//引用富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
 //引入富文本css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//富文本编辑器添加实例
Vue.use(VueQuillEditor)

最后是在页面中使用

<el-form-item >
      <quill-editor
       :options="editorOption"
       v-model="content">
       </quill-editor>
</el-form-item>

 content 是富文本中的内容  可以在editorOption中设置所需要的样式

 data() {
    return {
      content:'',
      editorOption: {
        placeholder: "请输入正文",
      },
    };
  },

这是在页面中的样子,因为我们这个对样式没有要求所以就没有修改富文本的样式