vue中使用富文本编辑器

开源的富文本编辑器Quill

1. 安装

   npm install @vueup/vue-quill@latest --save
   

   在我们的项目目录安装Quill
   

2. 在vue组件中导入Quill

   import { QuillEditor } from '@vueup/vue-quill'
   import '@vueup/vue-quill/dist/vue-quill.snow.css'
   

3. 在组件中使用Quill

   <template><el-form :model="表单数据模型" label-width="100px"><el-form-item label="富文本编辑器"><div class="editor"><quill-editor theme="snow" v-model:content="formModel.content" contentType="html"></quill-editor></div></el-form-item></el-form>
   </template><style lang="scss" scoped>
   .editor {width: 100%;:deep(.ql-editor) {min-height: 200px;}
   }
   </style>