Vue中使用quill-editor富文本编辑器之修改工具栏(toolbar)

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
<template xmlns:v-quill="http://www.w3.org/1999/xhtml">
<div class="wrapper release-tc">
<div class="release-box">
<h3>发布吐槽</h3>
<div class="editor">
<div class="quill-editor" @change="onEditorChange($event)" :content="content" v-quill:myQuillEditor="editorOption">
</div>
<div class="btns">
<button class="sui-btn btn-danger btn-release" @click="save">发布</button>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</template>
<script>
import "~/assets/css/page-sj-spit-submit.css";
import spitApi from "@/api/spit";
export default {
data() {
return {
content: '',
editorOption: {
// some quill options
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block']
]
}
},
}
},
methods: {
onEditorChange({ editor, html, text }) {
this.content = html;
},
save() {
spitApi.save({content: this.content}).then((response) => {
this.$message({
showClose: true,
message: response.data.message,
type: (response.data.flag ? 'success' : 'error'),
});
if (response.data.flag) {
// 提交成功，跳转到吐槽首页
this.$router.push("/spit");
}
});
},
},
}
</script>
<style scoped lang="stylus">
.quill-editor
min-height 200px
max-height 400px
overflow-y auto
</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
<template>
<quill-editor
v-model="content"
ref="editorRef"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
class="editor"
/>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 定制toolbar
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用
代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ header: 1 }, { header: 2 }],
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: [] }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: [] }], //显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
["clean"], // 清除文本格式-----['clean']
["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
name: "TestQuillEditor",
components: { quillEditor },
data() {
return {
content: "",
editorOption: {
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
computed: {
//当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor;
},
},
methods: {
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
//内容改变事件
// console.log('内容改变事件');
},
},
};
</script>
<style>
</style>