Vue3项目随笔

目录

富文本编辑器 [ 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-editor
    theme="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-editor
    ref="editorRef"
    theme="snow"
    v-model:content="formModel.content"
    contentType="html"
  >
  </quill-editor>
</div>

---

对于每次添加表单新内容，需要对文本编辑器内容进行清空，注意先判断是否存在，否则会报错。

 if( editorRef.value){
       editorRef.value.setHTML('')
 }
    

---

还是笔记方便查阅！