1.下载Vue-Quill-Editor
复制
npm install vue-quill-editor --save
1.
2.下载quill(Vue-Quill-Editor需要依赖)
复制
npm install quill --save
1.
3.代码
复制
<template>
<div class="about"><div class="editor_container"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> <input type="text" v-model="texts"/> <button type="button" @click="onclickForm">提交</button></div>
</div></template><script>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，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(/</g, '<'); str = str.replace(/>/g, '>'); return str},onclickForm() { console.log(this.content) this.content = ''}
}, computed: {editor() { return this.$refs.myQuillEditor.quill}
}
}</script><style scoped>.editor_container /deep/ .ql-editor { min-height: 300px;
}</style>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
4.自定义 toolbar 菜单
复制
// 编辑器配置 editorOption: {placeholder: '在这里输入内容',modules: { toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗、倾斜、下划线、删除线['blockquote', 'code-block'],// 引用代码块[{'header': 1}, {'header': 2}], // 标题，键值对应的形式，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'], // 上传图片、上传视频 ]
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
5.存储及将数据库中的数据反显为HTML字符串
后台接收到数据后会将字符中的标签进行转码，所以我们要先进行一个解码的操作让他变成标签形式的字符串：
例如后台接收的数据如下：""<h1>title</h1>" ，对应解码后就是`<h1>title</h1>`。
复制
// 把实体格式字符串转义成HTML格式的字符串// 转码escapeStringHTML(str) { str = str.replace(/</g, '<'); str = str.replace(/>/g, '>'); return str},
1.
2.
3.
4.
5.
6.
7.
然后将返回值赋值给对应的参数：
复制
<div v-html='str' class='ql-editor'>{{str}}</div>
1.
上面的str就是转码函数返回的值，我们要先在data中定义，所以我现在将新增跟展示放在一起，代码如下：
复制
<template>
<div class="about"><div class="editor_container"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> <input type="text" v-model="texts"/> <button type="button" @click="onclickForm">提交</button></div>
</div></template><script>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，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(/</g, '<'); str = str.replace(/>/g, '>'); return str},onclickForm() { console.log(this.content) this.content = ''}
}, computed: {editor() { return this.$refs.myQuillEditor.quill}
}
}</script><style scoped>.editor_container /deep/ .ql-editor { min-height: 300px;
}</style>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.