Vue 轻量级富文本编辑器-Vue-Quill-Editor

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill(Vue-Quill-Editor需要依赖)

npm install quill --save

3.代码

v-model="content"

ref="myQuillEditor"

:options="editorOption"

>

import { quillEditor} from "vue-quill-editor" //调用编辑器

import quill/dist/quill.core.css

import quill/dist/quill.snow.css

import quill/dist/quill.bubble.css

export default {

name: about,量级

components: { quillEditor},

data() {

return {

content: ,

texts: ,

// 编辑器配置

editorOption: {

placeholder: 在这里输入内容,

modules: {

toolbar: [

[bold, italic, underline, strike], // 加粗、倾斜、富文下划线、本编删除线

[blockquote,辑器 code-block],// 引用代码块

[{ header: 1}, { header: 2}], // 标题，云南idc服务商键值对应的量级形式，1，网站模板富文2 表示字体大小

[{ list: ordered},本编 { list: bullet}], // 列表

[{ script: sub}, { script: super}], // 上下标

[{ indent: -1}, { indent: +1}], // 缩进

[{ direction: rtl}], // 文本方向

[{ size: [small, false, large, huge]}], // 字体大小

[{ header: [1, 2, 3, 4, 5, 6, false]}], // 几级标题

[{ color: []}, { background: []}], // 字体颜色，字体背景颜色

[{ font: []}],辑器 // 字体

[{ align: []}], // 对齐方式

[clean], //清除

[image, video], // 上传图片、上传视频

]

}

}

}

},量级

mounted() {

let content = ; // 请求返回值

this.str = this.escapeStringHTML(content)

},

methods: {

// 转码

escapeStringHTML(str) {

str = str.replace(/

str = str.replace(/>/g, >);

return str

},

onclickForm() {

console.log(this.content)

this.content =

}

},

computed: {

editor() {

return this.$refs.myQuillEditor.quill

}

}

}

.editor_container /deep/ .ql-editor {

min-height: 300px;

}

</style>亿华云