vue-quill-editor富⽂本编辑器中⽂翻译组件，编辑与展⽰vue项⽬中⽤到了富⽂本编辑器，⽹上了⼀些，觉得vue-quill-editor最好⽤，
ui简洁，功能也好配，够⽤了，⽂档不好读，有些⼩细节需要⾃⼰注意，我懒得分析，就封装成了组件
⼤家⽤的时候直接cope组件，但是不要cope⽂章呀~~~
需要注意的是编辑器保存的格式，我们在⽤div展⽰的时候，有些格式⽆效，所以我也同样封装了供页⾯展⽰的组件
⾸先安装包
npm 安装 vue-quill-editor
这是编辑器效果图：
这是编辑器的组件代码：
代码⽐较多，我折叠起来了
1 <template>
2 <div class="editor_wrap">
3 <!-- 图⽚上传组件辅助-->
4 <el-upload
5 class="avatar-uploader"
6 :action="serverUrl"
7 name="image"
8 :headers="header"
9 multiple
10 :show-file-list="false"
11 :on-success="uploadSuccess"
12 :on-error="uploadError"
13 :before-upload="beforeUpload"
14 ></el-upload>
15 <quill-editor
16 v-loading="quillUpdateImg"
17 class="editor"
18 v-model="content"
19 ref="myQuillEditor"
20 :options="editorOption"
21 @blur="onEditorBlur($event)"
22 @focus="onEditorFocus($event)"
23 @change="onEditorChange($event)"
24 ></quill-editor>
25 </div>
28 import { quillEditor } from "vue-quill-editor";
29 import "quill/ss";
30 import "quill/dist/quill.snow.css";
31 import "quill/dist/quill.bubble.css";
32// ⼯具栏配置
33 const toolbarOptions = [
34 ["bold", "italic", "underline", "strike"], // 加粗斜体下划线删除线
35 ["blockquote", "code-block"], // 引⽤代码块
36// [{ header: 1 }, { header: 2 }], // 1、2 级标题
37 [{ list: "ordered" }, { list: "bullet" }], // 有序、⽆序列表
38 [{ script: "sub" }, { script: "super" }], // 上标/下标
39 [{ indent: "-1" }, { indent: "+1" }], // 缩进 2
40 [{ color: [
41 '#ffffff', '#ffd7d5', '#ffdaa9', '#fffed5', '#d4fa00', '#73fcd6', '#a5c8ff', '#ffacd5', '#ff7faa',
42 '#d6d6d6', '#ffacaa', '#ffb995', '#fffb00', '#73fa79', '#00fcff', '#78acfe', '#d84fa9', '#ff4f79',
43 '#b2b2b2', '#d7aba9', '#ff6827', '#ffda51', '#00d100', '#00d5ff', '#0080ff', '#ac39ff', '#ff2941',
44 '#888888', '#7a4442', '#ff4c00', '#ffa900', '#3da742', '#3daad6', '#0052ff', '#7a4fd6', '#d92142',
45 '#000000', '#7b0c00', '#ff0000', '#d6a841', '#407600', '#007aaa', '#021eaa', '#797baa', '#ab1942'
46 ] }, { background: [
47 '#ffffff', '#ffd7d5', '#ffdaa9', '#fffed5', '#d4fa00', '#73fcd6', '#a5c8ff', '#ffacd5', '#ff7faa',
48 '#d6d6d6', '#ffacaa', '#ffb995', '#fffb00', '#73fa79', '#00fcff', '#78acfe', '#d84fa9', '#ff4f79',
49 '#b2b2b2', '#d7aba9', '#ff6827', '#ffda51', '#00d100', '#00d5ff', '#0080ff', '#ac39ff', '#ff2941',
50 '#888888', '#7a4442', '#ff4c00', '#ffa900', '#3da742', '#3daad6', '#0052ff', '#7a4fd6', '#d92142',
51 '#000000', '#7b0c00', '#ff0000', '#d6a841', '#407600', '#007aaa', '#021eaa', '#797baa', '#ab1942'
52 ] }], // 字体颜⾊、字体背景颜⾊
53 [{ size: ["small", false, "large", "huge"] }], // 字体⼤⼩ 2
54 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
55 [{ font: [] }], // 字体种类 2
56 [{'direction': 'rtl'}], // ⽂本⽅向 2
57 [{ align: [] }], // 对齐⽅式 2
58 ["clean"], // 清除⽂本格式
59 ["link", "image", "video"] // 链接、图⽚、视频
60];
61 export default {
62 props: {
63/*编辑器的内容*/
64 value: null,
65/*图⽚⼤⼩*/
66 maxSize: {
67 type: Number,
68default: 4000 //kb
69 }
70 },
71
72 components: {
73 quillEditor
74 },
75 watch: {
76 value(val) {
78 }
79 },
80
83 content: this.value,
84 quillUpdateImg: false, // 根据图⽚上传状态来确定是否显⽰loading动画，刚开始是false，不显⽰
85 editorOption: {
86 theme: "snow", // or 'bubble'
87 placeholder: "您想说点什么？",
88 modules: {
89 toolbar: {
90 container: toolbarOptions,
91 handlers: {
92 image: function(value) {
93if (value) {
94// 触发input框选择图⽚⽂件
95 document.querySelector(".avatar-uploader input").click();
96 } else {
97this.quill.format("image", false);
98 }
99 },
100// link: function(value) {
101// if (value) {
102// var href = prompt('请输⼊url');
103// this.quill.format("link", href);
104// } else {
105// this.quill.format("link", false);
106// }
107// },
108 }
109 }
110 }
111 },
112 serverUrl: v.VUE_APP_API_URL + "config/upload", // 这⾥写你要上传的图⽚服务器地址113 header: {
114 token: Item("token")
115 }
116 };
117 },
118
119 methods: {
120 onEditorBlur() {
121//失去焦点事件
122 },
123 onEditorFocus() {
124//获得焦点事件
125 },
126 onEditorChange({ editor, html, text }) {
128//内容改变事件
129this.$emit("textareaData", t);
130 },
131
132// 富⽂本图⽚上传前
133 beforeUpload() {
134// 显⽰loading动画
135this.quillUpdateImg = true;
137
138 uploadSuccess(res, file) {
139// res为图⽚服务器返回的数据
140// 获取富⽂本组件实例
141 let quill = this.$QuillEditor.quill;
142// 如果上传成功
143if ( == 0) {
144// 获取光标所在位置
145 let length = Selection().index;
146// 插⼊图⽚ res.url为服务器返回的图⽚地址
147 quill.insertEmbed(length, "image", res.info.img_url);
148// 调整光标到最后
149 quill.setSelection(length + 1);
150 } else {
151this.$("图⽚插⼊失败");
152 }
153// loading动画消失
154this.quillUpdateImg = false;
155 },
156// 富⽂本图⽚上传失败
157 uploadError() {
158// loading动画消失
159this.quillUpdateImg = false;
160this.$("图⽚插⼊失败");
161 }
162 }
163};
164 </script>
165
166 <style scoped>
167 .editor_wrap /deep/ .avatar-uploader {
168 display: none;
169}
170 .editor_wrap /deep/ .editor {
171 line-height: normal !important;
172 height: 270px;
173 margin-bottom: 60px;
174}
175 .editor_wrap /deep/ .editor .ql-bubble .ql-editor a {
176 color: #136ec2;
177}
178 .editor_wrap /deep/ .editor img {
179 max-width: 720px;
180 margin:10px;
181}
182 .editor_wrap /deep/ .ql-snow .ql-color-picker .ql-picker-options { 183 padding: 3px 5px;
184 width: 192px;
185}
186 .editor_wrap /deep/ .ql-snow .ql-tooltip[data-mode="link"]::before { 187 content: "请输⼊链接地址:";
188}
189 .editor_wrap /deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after { 190 border-right: 0px;
192 padding-right: 0px;
193}
194
195 .editor_wrap /deep/ .ql-snow .ql-tooltip[data-mode="video"]::before {
196 content: "请输⼊视频地址:";
197}
198
199 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
200 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
201 content: "14px";
202}
203 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, 204 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { 205 content: "10px";
206}
207 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, 208 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { 209 content: "18px";
210}
211 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, 212 .editor_wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { 213 content: "32px";
214}
215
216 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
217 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
218 content: "⽂本";
219}
220 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, 221 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 222 content: "标题1";
223}
224 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, 225 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 226 content: "标题2";
227}
228 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, 229 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 230 content: "标题3";
231}
232 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, 233 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 234 content: "标题4";
235}
236 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, 237 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 238 conten
t: "标题5";
239}
240 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, 241 .editor_wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 242 content: "标题6";
243}
244
width的意思中文翻译245 .editor_wrap /deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论