• vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案

    vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案

     

    官方文档：https://www.npmjs.com/package/vue-quill-editor
    gitHub地址：https://github.com/surmon-china/vue-quill-editor

    本文参考：

    vue-quill-editor富文本编辑器使用步骤_小菜鸟的前端日记的博客-CSDN博客_vue-quillvue-quill-editor的安装和配置，实现工具栏自定义数据格式，以及鼠标经过提示中文释义https://blog.csdn.net/qq_44782585/article/details/123571236

    一、效果

    二、安装

    2.1脚手架安装

    命令

    npm install vue-quill-editor -S

    引入到项目----方法一

    1. import { quillEditor } from 'vue-quill-editor'
    2.  
    3. import 'quill/dist/quill.core.css'
    4. import 'quill/dist/quill.snow.css'
    5. import 'quill/dist/quill.bubble.css'
    6.  
    7. export default {
    8.   components: {
    9.     quillEditor
    10.   }
    11. }

    引入到项目----方法二

    1. import VueQuillEditor from 'vue-quill-editor'
    2. import 'quill/dist/quill.core.css'
    3. import 'quill/dist/quill.snow.css'
    4. import 'quill/dist/quill.bubble.css'
    5.  
    6.  
    7.  
    8. Vue.use(VueQuillEditor);

     2.2引入安装

    资源下载

    vue富文本编辑器vue-quill-editor.jsquill版本1.3.6-Javascript文档类资源-CSDN下载vue富文本编辑器使用教程https://blog.csdn.net/cplvfx/articl更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/cplvfx/85847785

    引入文件

    1. <script src="/js/common/vue.min2.6.14.js"></script>
    2. <script src="/js/common/element-ui2.15.7.js"></script>
    3.  
    4.  
    5. <link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.core.css"/>
    6. <link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.snow.css"/>
    7. <link rel="stylesheet" href="/js/common/vue-quill-editor/quilljs1.3.6/quill.bubble.css"/> 
    8. <script src="/js/common/vue-quill-editor/quilljs1.3.6/quill.js"></script>
    9. <script src="/js/common/vue-quill-editor/vue-quill-editor.js"></script>
    10. <script src="/js/common/vue-quill-editor/vue-quill-editor-Config.js"></script>
    11. <style>
    12.  .ql-container.ql-snow{
    13.   min-height: 120px; //初始化富文本高度
    14.   } 
    15. </style>

     引入到项目，初始化

    Vue.use(window.VueQuillEditor);

     vue-quill-editor-Config.js代码

    这里的vue-quill-editor-Config.js数据个性化顶部菜单栏没配置

    1. var _EditorOption_={
    2.     modules: {
    3.       toolbar: [
    4.         ['bold', 'italic', 'underline'], // 加粗 斜体 下划线 删除线  
    5.         [{ size: [12, 14,16] }], // 字体大小 
    6.         [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 
    7.         [{ align: [] }], // 对齐方式
    8.         ['clean'], // 清除文本格式
    9.         // ['link','image'] // 链接、图片、视频
    10.         ['link'] // 链接、图片、视频
    11.       ]
    12.     },
    13.     placeholder: '请输入正文'
    14.   };
    15.   // toolbar标题
    16. const titleConfig = [
    17. { Choice: '.ql-insertMetric', title: '跳转配置' },
    18. { Choice: '.ql-bold', title: '加粗' },
    19. { Choice: '.ql-italic', title: '斜体' },
    20. { Choice: '.ql-underline', title: '下划线' },
    21. { Choice: '.ql-header', title: '段落格式' },
    22. { Choice: '.ql-strike', title: '删除线' },
    23. { Choice: '.ql-blockquote', title: '块引用' },
    24. { Choice: '.ql-code', title: '插入代码' },
    25. { Choice: '.ql-code-block', title: '插入代码段' },
    26. { Choice: '.ql-font', title: '字体' },
    27. { Choice: '.ql-size', title: '字体大小' },
    28. { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
    29. { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
    30. { Choice: '.ql-direction', title: '文本方向' },
    31. { Choice: '.ql-header[value="1"]', title: 'h1' },
    32. { Choice: '.ql-header[value="2"]', title: 'h2' },
    33. { Choice: '.ql-align', title: '对齐方式' },
    34. { Choice: '.ql-color', title: '字体颜色' },
    35. { Choice: '.ql-background', title: '背景颜色' },
    36. { Choice: '.ql-image', title: '图像' },
    37. { Choice: '.ql-video', title: '视频' },
    38. { Choice: '.ql-link', title: '添加链接' },
    39. { Choice: '.ql-formula', title: '插入公式' },
    40. { Choice: '.ql-clean', title: '清除字体格式' },
    41. { Choice: '.ql-script[value="sub"]', title: '下标' },
    42. { Choice: '.ql-script[value="super"]', title: '上标' },
    43. { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
    44. { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
    45. { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
    46. { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
    47. { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
    48. { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
    49. { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
    50. { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
    51. { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
    52. { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
    53. { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
    54. { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
    55. { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
    56. { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
    57. { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
    58. { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
    59. { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
    60. { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    61. ];

    2.3 使用

    html代码

    1. <quill-editor
    2.     v-model="content"
    3.     ref="myQuillEditor"
    4.     :options="editorOption"
    5.     @blur="onEditorBlur($event)"
    6.     @focus="onEditorFocus($event)"
    7.     @change="onEditorChange($event)"
    8.     @ready="onEditorReady($event)">
    9. </quill-editor>

    js事件代码

    1. data(){
    2. return{
    3. editorOption:_EditorOption_,
    4. content:'我是富文本内容',
    5.  
    6. }
    7. },
    8. methods:{
    9. // 失去焦点事件
    10.   onEditorBlur(quill) {
    11.     console.log('editor blur!', quill)
    12.   },
    13. // 获得焦点事件
    14.   onEditorFocus(quill) {
    15.     console.log('editor focus!', quill)
    16.   },
    17. // 准备富文本编辑器
    18.   onEditorReady(quill) {
    19.     console.log('editor ready!', quill)
    20.   },
    21. // 内容改变事件
    22.   onEditorChange({ quill, html, text }) {
    23.     console.log('editor change!', quill, html, text)
    24.     this.content = html
    25.   },
    26. }

    到这里，你的富文本编辑器就可以正常显示了

    三、配置option

    3.1 编辑器头部功能菜单配置

    1. // 富文本编辑器配置
    2.       editorOption: {
    3.         modules: {
    4.           toolbar: [
    5.             ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    6.             ['blockquote', 'code-block'], // 引用  代码块
    7.             [{ header: 1 }, { header: 2 }], // 1、2 级标题
    8.             [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    9.             [{ script: 'sub' }, { script: 'super' }], // 上标/下标
    10.             [{ indent: '-1' }, { indent: '+1' }], // 缩进
    11.             [{ direction: 'rtl' }], // 文本方向
    12.             [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
    13.             [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
    14.             [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    15.             // [{ font: ['songti'] }], // 字体种类
    16.             [{ align: [] }], // 对齐方式
    17.             ['clean'], // 清除文本格式
    18.             ['image', 'video'] // 链接、图片、视频
    19.           ]
    20.         },
    21.         placeholder: '请输入正文'
    22.       },

     这里的size和header经过了处理，如图：换成了自定义内容，例如，修改字号，方法如下：

     3.2 修改quill.js

    1.找到node_modules里的quill/dist/quill.js

    2.在文件中搜索small，快速找到，然后修改成你想要的数据，这里简单，直接贴图

    3.3修改quill.snow.css

    修改完js之后，需要修改一下css文件 ，这样你设置的才生效，在同级目录下找到quill.snow.css文件，同样搜索small所在的位置，仿照着改就行，主要是这两处

     

     可以把原先的注释掉，也可以保留，影响不大，相当于你设置另一套css

    1. // 这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐
    2. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
    3. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
    4.   content: '12px';
    5.   vertical-align: top;
    6. }
    7. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
    8. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
    9.   content: '14px';
    10.   vertical-align: top;
    11. }
    12. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
    13. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    14.   content: '16px';
    15.   vertical-align: top;
    16. }
    17. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
    18. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    19.   content: '18px';
    20.   vertical-align: top;
    21. }
    22. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
    23. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    24.   content: '20px';
    25.   vertical-align: top;
    26. }
    27. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
    28. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    29.   content: '22px';
    30.   vertical-align: top;
    31. }
    32. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
    33. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    34.   content: '24px';
    35.   vertical-align: top;
    36. }
    37. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
    38. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    39.   content: '28px';
    40.   vertical-align: top;
    41. }
    42. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
    43. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    44.   content: '32px';
    45.   vertical-align: top;
    46. }
    47. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
    48. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    49.   content: '36px';
    50.   vertical-align: top;
    51. }
    52.  
    53.  
    54.  
    55. // 这个是字号数字对应的px值
    56. .ql-editor .ql-size-12 {
    57.   font-size: 12px;
    58. }
    59. .ql-editor .ql-size-14 {
    60.   font-size: 14px;
    61. }
    62. .ql-editor .ql-size-16 {
    63.   font-size: 16px;
    64. }
    65. .ql-editor .ql-size-18 {
    66.   font-size: 18px;
    67. }
    68. .ql-editor .ql-size-20 {
    69.   font-size: 20px;
    70. }
    71. .ql-editor .ql-size-22 {
    72.   font-size: 22px;
    73. }
    74. .ql-editor .ql-size-24 {
    75.   font-size: 24px;
    76. }
    77. .ql-editor .ql-size-28 {
    78.   font-size: 28px;
    79. }
    80. .ql-editor .ql-size-32 {
    81.   font-size: 32px;
    82. }
    83. .ql-editor .ql-size-36 {
    84.   font-size: 36px;
    85. }
    86.  
    87. // 选择字号富文本字的大小
    88. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
    89.   font-size: 12px;
    90. }
    91. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
    92.   font-size: 14px;
    93. }
    94. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    95.   font-size: 16px;
    96. }
    97. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    98.   font-size: 18px;
    99. }
    100. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    101.   font-size: 20px;
    102. }
    103. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    104.   font-size: 22px;
    105. }
    106. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    107.   font-size: 24px;
    108. }
    109. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    110.   font-size: 28px;
    111. }
    112. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    113.   font-size: 32px;
    114. }
    115. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    116.   font-size: 36px;
    117. }

     富文本里面的下拉框默认是不滚动的，想要滚动效果，加上下面的css

    1. /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
    2. .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    3.   border-color: #ccc;
    4.   height: 125px;
    5.   overflow: auto;
    6. }

    四、给工具栏鼠标悬停加上中文释义

      找到元素可以看到，每一个tool都有一个class， 这个的原理就是先把所有的class列出来，然后根据class获取元素，给它加上title属性就可以了

     

     先定义一个数组，把所有的工具放在里面

    1. // toolbar标题
    2. const titleConfig = [
    3.   { Choice: '.ql-insertMetric', title: '跳转配置' },
    4.   { Choice: '.ql-bold', title: '加粗' },
    5.   { Choice: '.ql-italic', title: '斜体' },
    6.   { Choice: '.ql-underline', title: '下划线' },
    7.   { Choice: '.ql-header', title: '段落格式' },
    8.   { Choice: '.ql-strike', title: '删除线' },
    9.   { Choice: '.ql-blockquote', title: '块引用' },
    10.   { Choice: '.ql-code', title: '插入代码' },
    11.   { Choice: '.ql-code-block', title: '插入代码段' },
    12.   { Choice: '.ql-font', title: '字体' },
    13.   { Choice: '.ql-size', title: '字体大小' },
    14.   { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
    15.   { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
    16.   { Choice: '.ql-direction', title: '文本方向' },
    17.   { Choice: '.ql-header[value="1"]', title: 'h1' },
    18.   { Choice: '.ql-header[value="2"]', title: 'h2' },
    19.   { Choice: '.ql-align', title: '对齐方式' },
    20.   { Choice: '.ql-color', title: '字体颜色' },
    21.   { Choice: '.ql-background', title: '背景颜色' },
    22.   { Choice: '.ql-image', title: '图像' },
    23.   { Choice: '.ql-video', title: '视频' },
    24.   { Choice: '.ql-link', title: '添加链接' },
    25.   { Choice: '.ql-formula', title: '插入公式' },
    26.   { Choice: '.ql-clean', title: '清除字体格式' },
    27.   { Choice: '.ql-script[value="sub"]', title: '下标' },
    28.   { Choice: '.ql-script[value="super"]', title: '上标' },
    29.   { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
    30.   { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
    31.   { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
    32.   { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
    33.   { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
    34.   { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
    35.   { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
    36.   { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
    37.   { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
    38.   { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
    39.   { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
    40.   { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
    41.   { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
    42.   { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
    43.   { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
    44.   { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
    45.   { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
    46.   { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    47. ]

     然后在function中循环，找到元素，添加title，至于放在那个function根据具体情况看，反正得是在页面上已经渲染好元素之后，不然会获取不到元素，可以直接放在@ready的函数里面

    1. for (let item of titleConfig) {
    2.         let tip = document.querySelector('.quill-editor ' + item.Choice)
    3.         if (!tip) continue
    4.         tip.setAttribute('title', item.title)
    5.       }

    至此，一个富文本编辑器，基本可以使用，并且还把英文转成了中文

    五，图片上传

    vue-quill-editor富文本编辑器上传图片默认为base64，存入数据库过于过于庞大，使用quill-image-extend-module+vue-quill-editor实现图片地址上传。

    这里列举的例子思路很简单就是：劫持原来的图片上传事件，然后上传到服务器，服务器返回一个图片链接，我再给插进去。

    5.1图片上传方案一（适合页面只有一个富文本编辑器）

    html

    1.  <input
    2.         type="file"
    3.         ref="uploadInput"
    4.         @change="EditorUpload"
    5.         class="uploadImgEditor"
    6.         name=""
    7.         hidden
    8.         id=""
    9.       />
    10.       <quill-editor
    11.         class="editor"
    12.         v-model="content"
    13.         :options="editorOption"
    14.         ref="myTextEditor"
    15.         @blur="onEditorBlur($event)"
    16.         @focus="onEditorFocus($event)"
    17.         @ready="onEditorReady($event)"
    18.         @change="onEditorChange($event)"
    19.       >
    20.       </quill-editor>

    js

    这里的“editorOption”配置和上面的配置是有差别的

    注意“toolbar”里面的“container”和“handlers”

    1.  data(){
    2. 	return{
    3. 	editorOption:_EditorOption_,
    4. 	content:'我是富文本内容',
    5.  
    6. 	}
    7. },
    8.   computed: {
    9.     editor() {
    10.       return this.$refs.myTextEditor.quillEditor;
    11.     },
    12.   },
    13. created() {
    14.     this.editorOption = {
    15.       modules: {
    16.         toolbar: {
    17.           container: [
    18.             ["bold", "italic", "underline", "strike"], // toggled buttons
    19.             ["blockquote", "code-block"],
    20.             [{ header: 1 }, { header: 2 }], // custom button values
    21.             [{ list: "ordered" }, { list: "bullet" }],
    22.             [{ script: "sub" }, { script: "super" }], // superscript/subscript
    23.             [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    24.             [{ direction: "rtl" }], // text direction
    25.             [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    26.             [{ header: [1, 2, 3, 4, 5, 6, false] }],
    27.             [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    28.             [{ font: [] }],
    29.             [{ align: [] }],
    30.             // ['link', 'image', 'video'],
    31.             ["image"],
    32.             ["clean"], // remove formatting button
    33.           ], // 工具栏
    34.           handlers: {
    35.             image: function (value) {
    36.               if (value) {
    37.                 document.querySelector(".uploadImgEditor").click();
    38.               } else {
    39.                 this.quill.format("image", false);
    40.               }
    41.             },
    42.           },
    43.         },
    44.       },
    45.       placeholder: "请输入文章内容(必填项)", //提示
    46.       readyOnly: false, //是否只读
    47.       theme: "snow", //主题 snow/bubble
    48.       syntax: true, //语法检测
    49.     };    
    50.   },
    51. methods:{
    52. 	//富文本-点击图片上传事件
    53. 	EditorUpload() {
    54.       var file = this.$refs.uploadInput.files[0];
    55.       var fd = new FormData();
    56.       fd.append("file", file);
    57.       this.uploadLogo(fd, file);
    58.     },
    59. 	//富文本-图片上传请求
    60. 	uploadLogo(dt, file) {
    61.       var that = this;
    62.       let param = new FormData(); //创建form对象
    63.       param.append("file", file); //通过append向form对象添加数据
    64.       let config = {
    65.         headers: { "Content-Type": "multipart/form-data" },
    66.       }; //添加请求头
    67.       that.$axios
    68.         .post(
    69.           "http://www.xxx.xxx/ImgUpload",
    70.           param,
    71.           config
    72.         )
    73.         .then((res) => {
    74.           //上传成功后的业务处理
    75. 		  let quill = this.$refs.myTextEditor.quill;//获取富文本编辑器dom对象
    76.           let length = quill.getSelection().index;//光标位置
    77. 		  let imgUrl='http://www.xxx.xxx' + res.imgUrl;// 拼接图片地址
    78.           quill.insertEmbed(length, "image", imgUrl); // 插入图片  图片地址
    79.           quill.setSelection(length + 1);// 调整光标到最后 
    80. 		  //上传成功后的业务处理 end		  
    81.         });
    82.     },
    83. 	//富文本-失去焦点事件
    84. 	onEditorBlur(quill) {
    85. 	console.log('editor blur!', quill)
    86. 	},
    87. 	//富文本-获得焦点事件
    88. 	onEditorFocus(quill) {
    89. 	console.log('editor focus!', quill)
    90. 	},
    91. 	//富文本-准备富文本编辑器
    92. 	onEditorReady(quill) {
    93. 	console.log('editor ready!', quill)
    94. 	},
    95. 	//富文本-内容改变事件
    96. 	onEditorChange({ quill, html, text }) {
    97. 	console.log('editor change!', quill, html, text)
    98. 	this.content = html
    99. 	},
    100. }

    5.2图片上传方案二（适合页面有多个富文本编辑器）

    页面有多个富文本编辑器时 图片上传的方法

    效果

    html代码

    1. <!-- 活动介绍： -->
    2. <p><span class="red">*</span>活动介绍：</p>
    3. <br/>
    4. <p>
    5. <quill-editor
    6. class="editor"
    7. id="QuillEditor_Intro"
    8. ref="QuillEditor_Intro"
    9. v-model="form.Intro"
    10. :options="editorOption"
    11. @blur="onEditorBlur($event)"
    12. @focus="onEditorFocus($event)"
    13. @ready="onEditorReady($event)"
    14. @change="onEditorChange($event)"
    15. >
    16. </quill-editor>
    17. </p>
    18. <br/><br/>
    19.  
    20. <!-- 场馆介绍： -->
    21. <p><span class="red">*</span>场馆介绍：</p>
    22. <br/>
    23. <p>
    24. <quill-editor
    25. class="editor"
    26. id="QuillEditor_SceneIntro"
    27. ref="QuillEditor_SceneIntro"
    28. v-model="form.SceneIntro"
    29. :options="editorOption"
    30. @blur="onEditorBlur($event)"
    31. @focus="onEditorFocus($event)"
    32. @ready="onEditorReady($event)"
    33. @change="onEditorChange($event)"
    34. >
    35. </quill-editor>
    36. </p>
    37. <br/><br/>
    38.  
    39. <!-- 用户须知： -->
    40. <p><span class="red">*</span>用户须知：</p>
    41. <br/>
    42. <p>
    43. <quill-editor
    44. class="editor"
    45. id="QuillEditor_UserNotice"
    46. ref="QuillEditor_UserNotice"
    47. v-model="form.UserNotice"
    48. :options="editorOption"
    49. @blur="onEditorBlur($event)"
    50. @focus="onEditorFocus($event)"
    51. @ready="onEditorReady($event)"
    52. @change="onEditorChange($event)"
    53. >
    54. </quill-editor>
    55. </p>
    56. <br/><br/>
    57.  
    58.  
    59. <!-- 活动流程\日程： -->
    60. <p><span class="red">*</span>活动流程\日程：</p>
    61. <br/>
    62. <p>
    63. <quill-editor
    64. class="editor"
    65. id="QuillEditor_Process"
    66. ref="QuillEditor_Process"
    67. v-model="form.Process"
    68. :options="editorOption"
    69. @blur="onEditorBlur($event)"
    70. @focus="onEditorFocus($event)"
    71. @ready="onEditorReady($event)"
    72. @change="onEditorChange($event)"
    73. >
    74. </quill-editor>
    75. </p>

    vue-quill-editor图片上传源码解读

    quill.js文件路径：\node_modules\quill\dist

    代码在quill.js的“6844”--“6882”行

    源码截图

    源码

    1. BaseTheme.DEFAULTS = (0, _extend2.default)(true, {}, _theme2.default.DEFAULTS, {
    2.   modules: {
    3.     toolbar: {
    4.       handlers: {
    5.         formula: function formula() {
    6.           this.quill.theme.tooltip.edit('formula');
    7.         },
    8.         image: function image() {
    9.           var _this3 = this;
    10.  
    11.           var fileInput = this.container.querySelector('input.ql-image[type=file]');
    12.           if (fileInput == null) {
    13.             fileInput = document.createElement('input');
    14.             fileInput.setAttribute('type', 'file');
    15.             fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    16.             fileInput.classList.add('ql-image');
    17.             fileInput.addEventListener('change', function () {
    18.               if (fileInput.files != null && fileInput.files[0] != null) {
    19.                 var reader = new FileReader();
    20.                 reader.onload = function (e) {
    21.                   var range = _this3.quill.getSelection(true);
    22.                   _this3.quill.updateContents(new _quillDelta2.default().retain(range.index).delete(range.length).insert({ image: e.target.result }), _emitter2.default.sources.USER);
    23.                   _this3.quill.setSelection(range.index + 1, _emitter2.default.sources.SILENT);
    24.                   fileInput.value = "";
    25.                 };
    26.                 reader.readAsDataURL(fileInput.files[0]);
    27.               }
    28.             });
    29.             this.container.appendChild(fileInput);
    30.           }
    31.           fileInput.click();
    32.         },
    33.         video: function video() {
    34.           this.quill.theme.tooltip.edit('video');
    35.         }
    36.       }
    37.     }
    38.   }
    39. });

    这段代码的意思是，当你点击了顶部工具栏的图片按钮，

    判断页面是否存在一个叫【input.ql-image[type=file]】的文件上传控件

    如果不存在则创建一个，如果存在则触发点击事件

    生成代码大致如下：

     <input type="file"  @change="function(){}" class="ql-image"/>

    通过源码我们可以修改我们的代码如下

    js代码

    1. <script>
    2.  // 工具栏配置
    3. var _EditorOption_=function(page_this){return {
    4.   modules: {
    5.     toolbar: {
    6.       container:[
    7.         ['bold', 'italic', 'underline'], // 加粗 斜体 下划线 删除线
    8.         [{ size: [12,14,16] }], // 字体大小
    9.         [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    10.         [{ align: [] }], // 对齐方式
    11.         ['clean'], // 清除文本格式
    12.         // ['link','image'] // 链接、图片、视频
    13.         ['link','image'] // 链接、图片、视频
    14.       ],
    15.       handlers:{
    16.         image:function(value){
    17.           console.log(value);
    18.           if(value)
    19.           {
    20.             console.log(this);//此时this是头部工具栏当前对象
    21.             var parentIdStr=this.container.parentElement.id;//获取容器quill-editor标签的id
    22.             var fileInput = this.container.querySelector('input.ql-image[type=file]');
    23.             if (fileInput == null) {
    24.                   fileInput = document.createElement('input');
    25.                   fileInput.setAttribute('type', 'file');
    26.                   fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    27.                   fileInput.classList.add('ql-image');
    28.                   fileInput.addEventListener('change', function(){
    29.                   var files=fileInput.files;//获取文件
    30.                   page_this.QuillEditorImgUpload(parentIdStr,files);//调取当前页面富文本图片上传的方法
    31.                   });
    32.                   this.container.appendChild(fileInput);
    33.               }
    34.             fileInput.click();
    35.           }
    36.           else
    37.           {
    38.             this.quill.format('image', false)
    39.           }
    40.  
    41.         }
    42.       }
    43.     }
    44.   },
    45.   placeholder: '请输入正文'
    46. }; };
    47.  
    48.  
    49. export default {
    50.   data(){
    51.   return {
    52. 	  editorOption:_EditorOption_(this),//富文本配置
    53. 	  form:{
    54. 		  Intro:'',//活动介绍
    55. 		  SceneIntro:'',//场馆介绍
    56. 		  UserNotice:'',//用户须知
    57. 		  Process:'',//活动流程\日程
    58. 	  }
    59.   }},
    60.   created(){},
    61.   methods:{
    62. 	// 富文本-失去焦点事件
    63. 	onEditorBlur(quill) {
    64. 	// //console.log("失去焦点事件");
    65. 	// //console.log('editor blur!', quill)
    66. 	// //console.log(this.form);
    67. 	},
    68. 	// 富文本-获得焦点事件
    69. 	onEditorFocus(quill) {
    70. 	// //console.log("获得焦点事件");
    71. 	// //console.log('editor focus!', quill)
    72. 	},
    73. 	// 富文本-准备富文本编辑器
    74. 	onEditorReady(quill) {
    75. 	// //console.log("准备富文本编辑器");
    76. 	// //console.log('editor ready!', quill)
    77. 	},
    78. 	//富文本- 内容改变事件
    79. 	onEditorChange({ quill, html, text }) {
    80. 	// console.log("内容改变事件");
    81. 	// // console.log('editor change!', quill, html, text)
    82. 	// console.log(quill)
    83. 	// console.log("内容改变事件22222222");
    84. 	// console.log(html)
    85. 	// console.log("内容改变事件3333333333");
    86. 	// console.log(text)
    87. 	},
    88. 	//富文本- 图片上传
    89.       QuillEditorImgUpload(domId,files) {
    90.         var that=this;
    91.         console.log('富文本文件上传')
    92.         console.log(domId);
    93.         console.log(files);
    94.  
    95.         var formData = new FormData();
    96.         formData.append("file",files[0]);
    97.         formData.append("filename", files[0].name);
    98.  
    99.       // 此时可以自行将文件上传至服务器
    100.        that.$axios.post("/api/ImgUpload",formData).then((res) => {
    101.           console.log(res);
    102.          if(res.code==10000 )
    103.          {
    104.           let imageUrl='http://www.xxx.xxx' + res.imgUrl;//拼接图片地址
    105.  
    106.           let quill = '';//获取富文本编辑器dom对象
    107.           switch (domId) {
    108.             case 'QuillEditor_Intro'://活动介绍
    109.               quill=this.$refs.QuillEditor_Intro.quill;
    110.               break;
    111.             case 'QuillEditor_SceneIntro'://场馆介绍
    112.               quill=this.$refs.QuillEditor_SceneIntro.quill;
    113.               break;
    114.             case 'QuillEditor_UserNotice'://用户须知
    115.               quill=this.$refs.QuillEditor_UserNotice.quill;
    116.               break;
    117.             case 'QuillEditor_Process'://活动流程\日程
    118.               quill=this.$refs.QuillEditor_Process.quill;
    119.               break;
    120.  
    121.             default:
    122.               break;
    123.           }
    124.  
    125.           let length = quill.getSelection().index;// 获取光标所在位置
    126.           quill.insertEmbed(length, 'image', imageUrl)// 插入图片
    127.           quill.setSelection(length + 1);// 调整光标到最后
    128.          }
    129.          else{
    130.             that.alertFun(res.msg);
    131.           }
    132.         });
    133.       },
    134.   },
    135. }
    136. </script>

  • 相关阅读:
    MySQL之主从复制及读写分离
    vue项目优化
    C认证笔记 - 计算机通识 - IP基础
    TypeScript核心篇——类(class)-可选参数-存取器-构造函数-静态属性方法-抽象类
    python去除pdf中水印
    vue核心面试题汇总【查缺补漏】
    Blender色彩管理的关键概念和使用方法
    day32-线程基础02
    Java课程设计——图书管理系统
    DIXml v5.21.0 for Delphi 11
  • 原文地址：https://blog.csdn.net/cplvfx/article/details/125557966