vue中使用富文本编辑器
vue中使用富文本编辑器
开源的富文本编辑器Quill
-
安装
npm install @vueup/vue-quill@latest --save在我们的项目目录安装Quill
-
在vue组件中导入Quill
import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css' -
在组件中使用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>