[关闭]
@Bios 2019-06-28T06:49:46.000000Z 字数 8326 阅读 2182

Vue + Element + vue-quill-editor 实现源码编辑、自定义图片上传和汉化

Vue ElementUi

集百家之长，看了很多博客再结合自身情况，写了这个小组件功能，仅供参考。

实现源码编辑

vue-quill-editor的配置文件：

  1. // toolbar工具栏的工具选项（默认展示全部）
  2. const toolOptions = [
  3.     // 加粗 斜体 下划线 删除线
  4.     ['bold', 'italic', 'underline', 'strike'],
  5.     // 加粗 斜体 下划线 删除线
  6.     ['blockquote', 'code-block'],
  7.     // 1、2 级标题
  8.     [{header: 1}, {header: 2}],
  9.     // 有序、无序列表
  10.     [{list: 'ordered'}, {list: 'bullet'}],
  11.     // 上标/下标
  12.     [{script: 'sub'}, {script: 'super'}],
  13.     // 缩进
  14.     [{indent: '-1'}, {indent: '+1'}],
  15.     // 文本方向
  16.     [{direction: 'rtl'}],
  17.     // 字体大小
  18.     [{size: ['small', false, 'large', 'huge']}],
  19.     // 标题
  20.     [{header: [1, 2, 3, 4, 5, 6, false]}],
  21.     // 字体颜色、字体背景颜色
  22.     [{color: []}, {background: []}],
  23.     // 字体种类
  24.     [{font: []}],
  25.     // 对齐方式
  26.     [{align: []}],
  27.     [{clean: '源码编辑'}], // 这是自己加的
  28.     // 链接、图片、视频
  29.     ['link', 'image'],
  30.     // 新添加的工具
  31.     ['sourceEditor']
  32. ];
  33. const handlers = {
  34.     shadeBox: null,
  35.     // 添加工具方法
  36.     sourceEditor: function () {
  37.         // alert('我新添加的工具方法');
  38.         const container = this.container;
  39.         const firstChild = container.nextElementSibling.firstChild;
  41. // 在第一次点击源码编辑的时候，会在整个工具条上加一个div，层级比工具条高，再次点击工具条任意位置，就会退出源码编辑。可以在下面cssText里面加个背景颜色看看效果。
  43.         if (!this.shadeBox) {
  44.             let shadeBox = this.shadeBox = document.createElement('div');
  46.             shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer';
  47.             container.style.position = 'relative';
  48.             container.appendChild(shadeBox);
  49.             firstChild.innerText = firstChild.innerHTML;
  51.             shadeBox.addEventListener('click', function () {
  52.                 this.style.display = 'none';
  53.                 firstChild.innerHTML = firstChild.innerText.trim();
  54.             }, false);
  55.         } else {
  56.             this.shadeBox.style.display = 'block';
  57.             firstChild.innerText = firstChild.innerHTML;
  58.         }
  59.     }
  60. };
  62. export default {
  63.     placeholder: '',
  64.     // 主题
  65.     theme: 'snow',
  66.     modules: {
  67.         toolbar: {
  68.             // 工具栏选项
  69.             container: toolOptions,
  70.             // 事件重写
  71.             handlers: handlers
  72.         }
  73.     },
  74.     // 在使用的页面中初始化按钮样式
  75.     initButton: function () {
  76.         // 样式随便改
  77.         const sourceEditorButton = document.querySelector('.ql-sourceEditor');
  78.         sourceEditorButton.style.cssText = 'font-size:18px';
  80.         // 加了elementui的icon
  81.         sourceEditorButton.classList.add('el-icon-edit-outline');          
  82.         // 鼠标放上去显示的提示文字
  83.         sourceEditorButton.title = '源码编辑';
  84.     }
  85. };

工具名，工具方法名，类名:
这里要注意的是：工具名和工具方法名是一样的，并且生成的button工具拥有ql-工具名的类名。
例如上面代码中，我的工具名是sourceEditor，我的方法名也是sourceEditor，而生成的button工具的类名就是ql-sourceEditor了。

自定义上传图片

vue-quill-editor自带的上传，是把图片变成了base64的格式，不符合一般的项目需求。我猜它是用的FileReader的API。

有兴趣的可以试试这个，拖拽图片转base64预览：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style media="screen">
  7.     #div1 {width:400px; height:300px; background:#CCC; border:1px solid black; text-align:center; line-height:300px;}
  8.     </style>
  9.     <script>
  10.     window.onload=function (){
  11.       let oDiv=document.getElementById('div1');
  12.       let oImg=document.getElementById('img1');
  14.       oDiv.addEventListener('dragenter', function (){
  15.         oDiv.innerHTML='请松手';
  16.       }, false);
  17.       oDiv.addEventListener('dragleave', function (){
  18.         oDiv.innerHTML='拖到这里上传';
  19.       }, false);
  21.       oDiv.addEventListener('dragover', function (ev){
  22.         ev.preventDefault();
  23.       }, false);
  24.       oDiv.addEventListener('drop', function (ev){
  25.         ev.preventDefault();
  26.         //
  27.         let oFile=ev.dataTransfer.files[0];
  28.         //读取
  29.         let reader=new FileReader();
  30.         reader.readAsDataURL(oFile);
  31.         reader.onload=function (){
  32.           //alert('成功');
  33.           oImg.src=this.result;
  34.         };
  35.         reader.onerror=function (){
  36.           alert('读取失败了');
  37.         };
  38.         console.log(reader);
  39.       }, false);
  40.     }
  41.     </script>
  42.   </head>
  43.   <body>
  44.     <div id="div1">拖到这里上传</div>
  45.     <img src="" id="img1">
  46.   </body>
  47. </html>
  1. // 自定义vue-quill-editor的主要文件
  2. <template>
  3.     <div
  4.         v-loading="imageLoading"
  5.         element-loading-text="请稍等，图片上传中"
  6.     >
  7.         <quill-editor
  8.             ref="myTextEditor"
  9.             v-model="content"
  10.             :options="quillOption"
  11.             @change="onEditorChange($event)"
  12. 			@focus="onEditorFocus($event)"
  13.             @ready="onEditorReady($event)"
  14.         >
  15.         </quill-editor>
  16.         // 这个是elementui的上传，把它display:none
  17.         <el-upload
  18.             style="display:none;"
  19.             :class="name"
  20.             :action="upload"
  21.             :show-file-list="false"
  22.             :on-success="handleAvatarSuccess"
  23.             :before-upload="beforeAvatarUpload"
  24.             :on-progress="onProgress"
  25.         >
  26.         </el-upload>
  27.     </div>
  29. </template>
  31. <script>
  33. import {
  34.     quillEditor
  35. } from 'vue-quill-editor';
  36. import {
  37.     upload
  38. } from '@/api/upload_api.js';
  39. import Quill from 'quill';
  41. import quillConfig from './quill_config.js';
  42. import 'quill/dist/quill.core.css';
  43. import 'quill/dist/quill.snow.css';
  44. import 'quill/dist/quill.bubble.css';
  45. export default {
  46.     props: {
  47.         // 富文本内容
  48.         value: String,
  49.         // 富文本的名字 同一个页面的多个富文本name不能重复的
  50.         name: String,
  51.         // 图片类型
  52.         imgType: {
  53.             type: Array,
  54.             default: () => ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp']
  55.         },
  56.         // 图片限制大小 单位 M
  57.         limitSize: {
  58.             type: Number,
  59.             default: 1
  60.         }
  61.     },
  62.     components: {
  63.         quillEditor
  64.     },
  65.     mounted() {
  66.         // 
  67.         quillConfig.initButton();
  68.         var vm = this;
  69.         // 当点击图书上传是，触发elementui的upload点击
  70.         var imgHandler = async function (image) {
  71.             vm.addImgRange = vm.$refs.myTextEditor.quill.getSelection();
  72.             if (image) {
  73.                 document.querySelector(`.${vm.name} input`).click();
  74.             }
  75.         };
  77.         vm.$refs.myTextEditor.quill.getModule('toolbar').addHandler('image', imgHandler);
  78. 	},
  79. 	model: {
  80. 		props: 'content',
  81. 		// 必须的change事件不然是不会响应的
  82. 		event: 'change'
  83. 	},
  84. 	computed: {
  85. 		content: {
  86. 			get: function () {
  87. 				return this.value;
  88. 			},
  89. 			set: function () {}
  90. 		}
  91. 	},
  92. 	data() {
  93. 		return {
  94. 			// 配置文件
  95. 			quillOption: quillConfig,
  96. 			imageLoading: false,
  97. 			upload: upload(),
  98. 		};
  99. 	},
  100. 	methods: {
  101. 		onEditorChange(e) {
  102. 			this.$emit('change', e.html);
  103. 		},
  104. 		onEditorFocus(e) {
  105. 			this.$emit('focus', e);
  106. 		},
  107. 		onEditorReady(e) {
  108. 			this.$emit('ready', e);
  109.         },
  110.         // 图片上传成功
  111.         handleAvatarSuccess(res) {
  112.             // console.log(res, file);
  113.             if (res.code == 200) {
  114.                 // this.form.custom_logo_url = res.data.url;
  115.                 let url = res.data.url,
  116.                     vm = this;
  118.                 if (url !== null && url.length > 0) {
  119.                     var value = url;
  121.                     // ***主要的东西就是这里：上传成功回显
  122.                     vm.addImgRange = vm.$refs.myTextEditor.quill.getSelection();
  123. 					value = value.indexOf('http') != -1 ? value : 'http:' + value;
  124. 					vm.$refs.myTextEditor.quill.insertEmbed(vm.addImgRange !== null ? vm.addImgRange.index : 0, 'image', value, Quill.sources.USER);
  125.                 } else {
  126.                     vm.$message.warning('图片增加失败');
  127. 				}
  128. 			} else {
  129. 				this.$message.error(res.message);
  130.             }
  131.             this.imageLoading = false;
  132.         },
  133.         // 图片上传前
  134.         beforeAvatarUpload(file) {
  135.             let date = new Date().getTime();
  136.             let imgType = this.imgType;
  138.             const fileType = file.type;
  139.             const isLt1M = file.size / 1024 / 1024 < this.limitSize;
  141.             const isAllowType = imgType.indexOf(fileType) != -1;
  142.             // console.log(fileType);
  143.             // const isPng = fileType == 'image/jpeg';
  145.             if (!isAllowType) {
  146.                 this.$message.error('请上传符合文件格式的图片!');
  147. 				return false;
  148. 			}
  149. 			if (!isLt1M) {
  150. 				this.$message.error('上传logo图片大小不能超过 1MB!');
  151.                 return false;
  152.             }
  153.             return isAllowType && isLt1M;
  154.         },
  155.         onProgress() {
  156.             this.imageLoading = true;
  157.         }
  158.     }
  159. };
  160. </script>
  1. // 使用方式
  2. <quill-editor v-model="form.content" name="policy"/>
  3. // 做了双向绑定的，也可以自己监听change事件

⚠️注意点：
1. name不能一样
2. 上传逻辑按自己的来，跟我应该不一样
3. 其实最重要的是回显到富文本中的那段代码，无论你怎么上传，甚至可以不用elementui的上传组件，最后拿到上传成功的url，再放进去就搞定了。

汉化

把这段代码放到你的页面中就行了。

  1. .ql-snow .ql-tooltip[data-mode=link]::before {
  2.   content: "请输入链接地址:" !important;
  3. }
  4. .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  5.     border-right: 0px;
  6.     content: '保存' !important;
  7.     padding-right: 0px;
  8. }
  9. .ql-snow .ql-tooltip[data-mode=video]::before {
  10.     content: "请输入视频地址:" !important;
  11. }
  12. .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  13. .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  14.     content: '14px' !important;
  15. }
  16. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  17. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  18.     content: '10px' !important;
  19. }
  20. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  21. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  22.     content: '18px' !important;
  23. }
  24. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  25. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  26.     content: '32px' !important;
  27. }
  29. .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  30. .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  31.     content: '文本' !important;
  32. }
  33. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  34. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  35.     content: '标题1' !important;
  36. }
  37. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  38. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  39.     content: '标题2' !important;
  40. }
  41. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  42. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  43.     content: '标题3' !important;
  44. }
  45. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  46. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  47.     content: '标题4' !important;
  48. }
  49. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  50. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  51.     content: '标题5' !important;
  52. }
  53. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  54. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  55.     content: '标题6' !important;
  56. }
  58. .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  59. .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  60.     content: '标准字体' !important;
  61. }
  62. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  63. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  64.     content: '衬线字体' !important;
  65. }
  66. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  67. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  68.     content: '等宽字体' !important;
  69. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注