在开发过程中,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>
快去试试吧