一、vue-quill-editor
1.vue项目中,npm安装依赖
npm install vue-quill-editor --save
2.全局引用,项目入口文件中(main.js)注册
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
局部引用
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 {
components: {
quillEditor
},
data(){
return{
//自定义 toolbar 菜单
editorOption: {
modules: {
toolbar: [xxx],
},
theme: "snow",
placeholder: "请输入正文",
}
}
}
} //完成上述步骤之后即可使用
3.使用
<!-- 富文本编辑器 -->
<quill-editor v-model="addForm.goods" :options="editorOption" @blur="onEditorBlur($event)"
@focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
v-model表示双向绑定的数据,并在data中的表单对象添加对应的属性中,这样在富文本中输入的任何内容都可以自动的添加到该属性中,并最终展示出下面的富文本编辑器内容
更多属性请看官网:https://www.npmjs.com/package/vue-quill-editor
二、wangEditor - 轻量级 web 富文本编辑器
npm 安装 npm i wangeditor --save ,几行代码即可创建一个编辑器。
import E from 'wangeditor'
const editor = new E('#div1')
editor.create()
demo
this.editor = new E(this.$refs.editor)
// 配置菜单栏
this.editor.config.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"indent", //缩进
// "list", // 列表
"justify", // 对齐方式
// "quote", // 引用
// "undo", // 撤销
// "redo", // 重复
]
// 创建富文本编辑器
this.editor.create()