我自己在用VUE做一个博客网站,查了一下好多人都在用Vue-Quill-Editor,于是我也把这个插件加入到我的程序里,可是后来却出现了个问题,如图:
简单的代码如下:
<template>
<div>
<div class="container">
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
</div>
<p>效果展示:</p>
<p v-html="content"></p>
</div>
</template>
<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
data: function(){
return {
content: '',
editorOption: {
placeholder: 'Hello World'
}
}
},
components: {
quillEditor
}
}
</script>
可以看到,我在富文本编辑器里写的内容,回显后,会把空格默认给我清空消失掉了,这就不是我所想要的结果了,我看了Vue-Quill-Editor的github文档,又在百度上查了好半天,竟然没有一个能解决这个问题的方案,我也真是无语了。
话不多说,经历过得心酸只有本人知道;只来说一下最终结果。
只需要加上 class="ql-editor" 就行了
<p class="ql-editor" v-html="content"></p>
效果图:
真的很无语,官方作者竟然都不在文档里写上怎么回调。网上的同行不会遇到这个问题么?竟然没有人分享解决办法。
来源: