富文本插件 和回显 vue-quill-editor

在开发过程中，input的限制会越来越明显。这时富文本输入框就派上用场了。

推荐使用这个插件 vue-quill-editor

插件的使用方法和自定义组件的使用方法一样

第一步：

安装插件

npm install vue-quill-editor 

第二步：

引入vue-quill-editor

import { quillEditor } from 'vue-quill-editor'

还要引入下面的样式

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

第三步：

注册插件组件，定义变量editorOption变量是放图片上传配置参数用的

components: {
    quillEditor
  },
data() {
    return {
      editorOption: {},
     }
}

第四步：

编写视图代码

<quill-editor
     ref="text"
     v-model="newmessage[item.msg]"
     class="myQuillEditor"
     :options="editorOption"
     >
</quill-editor>

这时就可以在页面中看到这个富文本编辑器了。

 

调用接口时注意参数的大小，

 由于返回的时html代码流，回显的时候要用vue的v-html显示效果会好很多

<el-form-item label="中文内容">
     <span v-html="props.row.msg"></span>
</el-form-item>

快去试试吧