目录
富文本编辑器 [ vue-quill ]的使用步骤
1，安装包
2，注册成局部组件
3，页面中绑定使用
4，样式美化
5，涉及表单内容 富文本内容的清空
富文本编辑器 [ vue-quill ]的使用步骤
1，安装包
pnpm add @vueup/vue-quill@latest
2，注册成局部组件
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
3，页面中绑定使用
<div class="editor"><quill-editortheme="snow"v-model:content="formModel.content"contentType="html"></quill-editor>
</div>
4，样式美化
.editor {width: 100%;:deep(.ql-editor) {min-height: 200px;}
}
5，涉及表单内容 富文本内容的清空
const editorRef = ref()
const open = async (row) => {...if (row.id) {console.log('编辑回显')} else {console.log('添加新内容')formModel.value = { ...defaultForm }imgUrl.value = ''if( editorRef.value){editorRef.value.setHTML('')}}
}
编辑器的ref绑定
<div class="editor"><quill-editorref="editorRef"theme="snow"v-model:content="formModel.content"contentType="html"></quill-editor>
</div>
对于每次添加表单新内容，需要对文本编辑器内容进行清空，注意先判断是否存在，否则会报错。
if( editorRef.value){editorRef.value.setHTML('')}还是笔记方便查阅！
)
)
