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

2025-11-04 22:21:03分类：数据库阅读(514)

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}], // 标题，源码库键值对应的量级形式，1，云南idc服务商富文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>源码下载