码农知识堂 - 1000bd
Python
PHP
JS/TS
JAVA
C/C++
C#
GO
Kotlin
Swift
富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）
文章目录
前言
一、安装
二、使用插件
1、在全局挂载
2.组件中挂载（选用）
3.使用element-ui上传组件
上传文件组件进行隐藏
`修改视频
标签为 <video>`</a></li></ul> </li><li><a href="#4_198" target="_self">4、添加下拉框滚动效果</a></li><li><a href="#5_209" target="_self">5、在鼠标悬停处加中文释义</a></li><li><a href="#Editorvue_273" target="_self">最后的Editor.vue具体代码</a></li></ul> </li><li><a href="#_581" target="_self">父组件调用：</a></li><li><a href="#_590" target="_self">效果展示</a></li></ul> </div> <p> <hr> <h1><a name="t1"></a><a id="_3"></a>前言</h1> <p>最近做的项目中需要实现文字+图片等信息的发布，由于<a href="https://so.csdn.net/so/search?q=UEditor&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=UEditor&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"UEditor\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=UEditor&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"UEditor\"}"}" data-tit="UEditor" data-pretit="ueditor">UEditor</a>不怎么维护了，想换一种，于是找到了vue-quill-editor这款富文本编辑器，展示出来的效果还是不错的。开干!</p> <h1><a name="t2"></a><a id="_6"></a>一、安装</h1> <p>安装 quill-editor</p> <pre data-index="0" class="prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">cnpm <span class="token function">install</span> vue-quill-editor --save //安装quill，这个要安装，否则报错 Cannot <span class="token builtin class-name">read</span> property <span class="token string">'imports'</span> of undefined cnpm <span class="token function">install</span> quill --save <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/08/12/114224881.png" alt="在这里插入图片描述"><br> <img src="https://1000bd.com/contentImg/2022/08/12/114225030.png" alt="在这里插入图片描述"></p> <p>安装拖动和缩放的依赖，当上传的图片过大时，可以通过缩放变换大小。</p> <pre data-index="1" class="prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;">cnpm <span class="token function">install</span> quill-image-drop-module --save //拖动 cnpm <span class="token function">install</span> quill-image-resize-module --save //缩放 <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>插件需要webpack的支持！！！！！！别问我是怎么知道的😭</strong></p> <p><strong>编辑 vue.config.js 文件：</strong></p> <pre data-index="2" class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">var</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">proxy</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_BASEURL</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">configureWebpack</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span> <span class="token literal-property property">plugins</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>ProvidePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> <span class="token string-property property">'window.Quill'</span><span class="token operator">:</span><span class="token string">'quill/dist/quill.js'</span><span class="token punctuation">,</span> <span class="token string-property property">'Quill'</span><span class="token operator">:</span><span class="token string">'quill/dist/quill.js'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre> <hr> <h1><a name="t3"></a><a id="_43"></a>二、使用插件</h1> <h2><a name="t4"></a><a id="1_44"></a>1、在全局挂载</h2> <p>进入main.js文件<br> <img src="https://1000bd.com/contentImg/2022/08/12/114225156.png" alt="在这里插入图片描述"></p> <pre data-index="3" class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">//引入quill-editor编辑器</span> <span class="token keyword">import</span> VueQuillEditor <span class="token keyword">from</span> <span class="token string">'vue-quill-editor'</span> <span class="token keyword">import</span> <span class="token string">'quill/dist/quill.core.css'</span> <span class="token keyword">import</span> <span class="token string">'quill/dist/quill.snow.css'</span> <span class="token keyword">import</span> <span class="token string">'quill/dist/quill.bubble.css'</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueQuillEditor<span class="token punctuation">)</span> <span class="token comment">//实现quill-editor编辑器拖拽上传图片</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> Quill <span class="token keyword">from</span> <span class="token string">'quill'</span> <span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> ImageDrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'quill-image-drop-module'</span> Quill<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token string">'modules/imageDrop'</span><span class="token punctuation">,</span> ImageDrop<span class="token punctuation">)</span> <span class="token comment">//实现quill-editor编辑器调整图片尺寸</span> <span class="token keyword">import</span> ImageResize <span class="token keyword">from</span> <span class="token string">'quill-image-resize-module'</span> Quill<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token string">'modules/imageResize'</span><span class="token punctuation">,</span> ImageResize<span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <h2><a name="t5"></a><a id="2_65"></a>2.组件中挂载（选用）</h2> <pre data-index="4" class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token string">'quill/dist/quill.core.css'</span> <span class="token keyword">import</span> <span class="token string">'quill/dist/quill.snow.css'</span> <span class="token keyword">import</span> <span class="token string">'quill/dist/quill.bubble.css'</span> <span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> quillEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-quill-editor'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> quillEditor <span class="token punctuation">}</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <p>本项目中用的是全局挂载</p> <h2><a name="t6"></a><a id="3elementui_81"></a>3.使用element-ui上传组件</h2> <p><strong>当前文件为Editor.vue</strong><br> 实现图片和视频的上传功能</p><div class="articleConDownSource" data-report-view="{"spm":"1001.2101.3001.8634"}" data-report-click="{"spm":"1001.2101.3001.8634"}"><a target="_blank" href="https://download.csdn.net/download/weixin_38614462/13126485" data-report-view="{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"","extra":"{\"utm_medium\":\"distribute.pc_blog_inner_ad.none-task-download-2~default~AD_ESQUERY~default-1-13126485-blog-126222377.blog_insert_ad_searchtargetingv1\",\"dist_request_id\":\"1660275723254_15293\"}","dist_request_id":"1660275723254_15293","ab_strategy":"default","index":"1","strategy":"2~default~AD_ESQUERY~default","dest":"https://download.csdn.net/download/weixin_38614462/13126485"}" data-report-click="{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"","extra":"{\"utm_medium\":\"distribute.pc_blog_inner_ad.none-task-download-2~default~AD_ESQUERY~default-1-13126485-blog-126222377.blog_insert_ad_searchtargetingv1\",\"dist_request_id\":\"1660275723254_15293\"}","dist_request_id":"1660275723254_15293","ab_strategy":"default","index":"1","strategy":"2~default~AD_ESQUERY~default","dest":"https://download.csdn.net/download/weixin_38614462/13126485"}" data-report-query="spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_blog_inner_ad.none-task-download-2%7Edefault%7EAD_ESQUERY%7Edefault-1-13126485-blog-126222377.blog_insert_ad_searchtargetingv1&depth_1-utm_source=distribute.pc_blog_inner_ad.none-task-download-2%7Edefault%7EAD_ESQUERY%7Edefault-1-13126485-blog-126222377.blog_insert_ad_searchtargetingv1"> <div class="card-left"> <div class="card-left-t">vue-quill-editor 自定义工具栏和自定义图片上传路径操作</div> <div class="card-left-b"> <span class="classfiy">pdf</span> <img class="star contentImg-no-view" src="https://1000bd.com/contentImg/2022/07/26/232244139.png" alt=""> <span class="text">0星</span> <span class="circle"></span> <span class="text">超过10%的资源</span> <span class="circle"></span> <span class="text">66KB</span> </div> </div> <div class="card-right"> <div class="card-right-t"><img class="contentImg-no-view" src="https://1000bd.com/contentImg/2022/07/26/232244224.png" alt=""></div> <div class="card-right-b">下载</div> </div> </a></div> <pre data-index="5" class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 基于elementUi的上传组件 el<span class="token operator">-</span>upload begin<span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>el<span class="token operator">-</span>upload <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"avatar-uploader"</span> <span class="token operator">:</span>action<span class="token operator">=</span><span class="token string">"uploadImgUrl"</span> <span class="token operator">:</span>accept<span class="token operator">=</span><span class="token string">"'image/*,video/*'"</span> <span class="token operator">:</span>show<span class="token operator">-</span>file<span class="token operator">-</span>list<span class="token operator">=</span><span class="token string">"false"</span> <span class="token operator">:</span>on<span class="token operator">-</span>success<span class="token operator">=</span><span class="token string">"uploadEditorSuccess"</span> <span class="token operator">:</span>on<span class="token operator">-</span>error<span class="token operator">=</span><span class="token string">"uploadEditorError"</span> <span class="token operator">:</span>before<span class="token operator">-</span>upload<span class="token operator">=</span><span class="token string">"beforeEditorUpload"</span> <span class="token operator">:</span>headers<span class="token operator">=</span><span class="token string">"headers"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>el<span class="token operator">-</span>upload<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 基于elementUi的上传组件 el<span class="token operator">-</span>upload end<span class="token operator">--</span><span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <p>注 accept：接受上传的文件类型</p> <h3><a name="t7"></a><a id="_99"></a>上传文件组件进行隐藏</h3> <pre data-index="6" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.avatar-uploader-editor</span><span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.avatar-uploader-editor-video</span><span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.avatar-uploader-editor-voice</span><span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <p>vue-quill-editor 默认是以 iframe 保存的，插入到编辑器中的标签是 iframe，而我们真正需要的是video标签</p> <h3><a name="t8"></a><a id="_iframe__video_114"></a><code>修改视频 <iframe> 标签为 <video></code></h3> <p>同目录下，创建video.js</p> <pre data-index="7" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> Quill <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-quill-editor'</span> <span class="token comment">// 源码中是import直接倒入，这里要用Quill.import引入</span> <span class="token keyword">const</span> BlockEmbed <span class="token operator">=</span> Quill<span class="token punctuation">.</span><span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'blots/block/embed'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> Link <span class="token operator">=</span> Quill<span class="token punctuation">.</span><span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'formats/link'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token constant">ATTRIBUTES</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'height'</span><span class="token punctuation">,</span> <span class="token string">'width'</span><span class="token punctuation">]</span> <span class="token keyword">class</span> <span class="token class-name">Video</span> <span class="token keyword">extends</span> <span class="token class-name">BlockEmbed</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">static</span> <span class="token function">create</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> node <span class="token operator">=</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token comment">// 添加video标签所需的属性</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'controls'</span><span class="token punctuation">,</span> <span class="token string">'controls'</span><span class="token punctuation">)</span> <span class="token comment">// 控制播放器</span> <span class="token comment">//删除原生video的控制条的下载或者全屏按钮的方法</span> <span class="token comment">//<video controls controlsList='nofullscreen nodownload noremote footbar' ></video></span> <span class="token comment">//不用哪个在下面加上哪个</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'controlsList'</span><span class="token punctuation">,</span> <span class="token string">'nofullscreen'</span><span class="token punctuation">)</span> <span class="token comment">// 控制删除</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'video/mp4'</span><span class="token punctuation">)</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token string">'object-fit:fill;width: 100%;'</span><span class="token punctuation">)</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'preload'</span><span class="token punctuation">,</span> <span class="token string">'auto'</span><span class="token punctuation">)</span> <span class="token comment">// auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'playsinline'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'x-webkit-airplay'</span><span class="token punctuation">,</span> <span class="token string">'allow'</span><span class="token punctuation">)</span> <span class="token comment">// node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'x5-video-orientation'</span><span class="token punctuation">,</span> <span class="token string">'portraint'</span><span class="token punctuation">)</span> <span class="token comment">// 竖屏播放 声明了h5才能使用 播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'x5-playsinline'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span> <span class="token comment">// 兼容安卓 不全屏播放</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'x5-video-player-fullscreen'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span> <span class="token comment">// 全屏设置，设置为 true 是防止横屏</span> node<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">sanitize</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> node <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token function">formats</span> <span class="token punctuation">(</span><span class="token parameter">domNode</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token constant">ATTRIBUTES</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">formats<span class="token punctuation">,</span> attribute</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span>domNode<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span>attribute<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> formats<span class="token punctuation">[</span>attribute<span class="token punctuation">]</span> <span class="token operator">=</span> domNode<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span>attribute<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> formats <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token function">sanitize</span> <span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> Link<span class="token punctuation">.</span><span class="token function">sanitize</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token comment">// eslint-disable-line import/no-named-as-default-member</span> <span class="token punctuation">}</span> <span class="token keyword">static</span> <span class="token function">value</span> <span class="token punctuation">(</span><span class="token parameter">domNode</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> domNode<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">format</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token constant">ATTRIBUTES</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">this</span><span class="token punctuation">.</span>domNode<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">this</span><span class="token punctuation">.</span>domNode<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">html</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span> video <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">value</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>video<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>video<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></a></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> Video<span class="token punctuation">.</span>blotName <span class="token operator">=</span> <span class="token string">'video'</span> <span class="token comment">// 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot</span> Video<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'ql-video'</span> Video<span class="token punctuation">.</span>tagName <span class="token operator">=</span> <span class="token string">'video'</span> <span class="token comment">// 用video标签替换iframe</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Video <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li></ul></pre> <p>在Editor.vue中加入</p> <pre data-index="8" class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> Quill <span class="token keyword">from</span> <span class="token string">'vue-quill-editor'</span> <span class="token comment">// 这里引入修改过的video模块并注册</span> <span class="token keyword">import</span> Video <span class="token keyword">from</span> <span class="token string">"@/components/Editor/video"</span><span class="token punctuation">;</span> Quill<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>Video<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h2><a name="t9"></a><a id="4_198"></a>4、添加下拉框滚动效果</h2> <pre data-index="9" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/</span> <span class="token selector">.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 125px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <h2><a name="t10"></a><a id="5_209"></a>5、在鼠标悬停处加中文释义</h2><div class="articleConDownSource" data-report-view="{"spm":"1001.2101.3001.8636"}" data-report-click="{"spm":"1001.2101.3001.8636"}"><a target="_blank" href="https://download.csdn.net/download/weixin_38743506/12943602" data-report-view="{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"","extra":"{\"utm_medium\":\"distribute.pc_blog_inner_ad.none-task-download-2~default~AD_ESQUERY~default-2-12943602-blog-126222377.blog_insert_ad_searchtargetingv1\",\"dist_request_id\":\"1660275723254_15293\"}","dist_request_id":"1660275723254_15293","ab_strategy":"default","index":"2","strategy":"2~default~AD_ESQUERY~default","dest":"https://download.csdn.net/download/weixin_38743506/12943602"}" data-report-click="{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"","extra":"{\"utm_medium\":\"distribute.pc_blog_inner_ad.none-task-download-2~default~AD_ESQUERY~default-2-12943602-blog-126222377.blog_insert_ad_searchtargetingv1\",\"dist_request_id\":\"1660275723254_15293\"}","dist_request_id":"1660275723254_15293","ab_strategy":"default","index":"2","strategy":"2~default~AD_ESQUERY~default","dest":"https://download.csdn.net/download/weixin_38743506/12943602"}" data-report-query="spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_blog_inner_ad.none-task-download-2%7Edefault%7EAD_ESQUERY%7Edefault-2-12943602-blog-126222377.blog_insert_ad_searchtargetingv1&depth_1-utm_source=distribute.pc_blog_inner_ad.none-task-download-2%7Edefault%7EAD_ESQUERY%7Edefault-2-12943602-blog-126222377.blog_insert_ad_searchtargetingv1"> <div class="card-left"> <div class="card-left-t">详解vue中使用vue-quill-editor富文本小结（图片上传）</div> <div class="card-left-b"> <span class="classfiy">pdf</span> <img class="star contentImg-no-view" src="https://1000bd.com/contentImg/2022/07/26/232244139.png" alt=""> <span class="text">0星</span> <span class="circle"></span> <span class="text">超过10%的资源</span> <span class="circle"></span> <span class="text">63KB</span> </div> </div> <div class="card-right"> <div class="card-right-t"><img class="contentImg-no-view" src="https://1000bd.com/contentImg/2022/07/26/232244224.png" alt=""></div> <div class="card-right-b">下载</div> </div> </a></div> <p><img src="https://1000bd.com/contentImg/2022/08/12/114225263.png" alt="在这里插入图片描述"><br> 每一个tool都有一个class， 可以把所有的class列出来，然后根据class获取元素，给它加上title属性就可以了<br> <strong>先定义一个数组，把所有的工具放在里面</strong></p> <pre data-index="10" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">// toolbar标题 const titleConfig = [</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-insertMetric'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'跳转配置'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-bold'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'加粗'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-italic'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'斜体'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-underline'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'下划线'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'段落格式'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-strike'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'删除线'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-blockquote'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'块引用'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-code'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'插入代码'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-code-block'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'插入代码段'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-font'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'字体'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-size'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'字体大小'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-list[value="ordered"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'编号列表'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-list[value="bullet"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'项目列表'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-direction'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'文本方向'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header[value="1"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'h1'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header[value="2"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'h2'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-align'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'对齐方式'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-color'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'字体颜色'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-background'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'背景颜色'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-image'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'图像'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-video'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'视频'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-link'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'添加链接'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-formula'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'插入公式'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-clean'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'清除字体格式'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-emoji'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'表情包'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-script[value="sub"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'下标'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-script[value="super"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'上标'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-indent[value="-1"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'向左缩进'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-indent[value="+1"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'向右缩进'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-label'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题大小'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="1"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题一'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="2"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题二'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="3"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题三'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="4"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题四'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="5"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题五'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item[data-value="6"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标题六'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-header .ql-picker-item:last-child'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标准'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-size .ql-picker-item[data-value="small"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'小号'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-size .ql-picker-item[data-value="large"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'大号'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-size .ql-picker-item[data-value="huge"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'超大号'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-size .ql-picker-item:nth-child(2)'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'标准'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-align .ql-picker-item:first-child'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'居左对齐'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-align .ql-picker-item[data-value="center"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'居中对齐'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-align .ql-picker-item[data-value="right"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'居右对齐'</span> <span class="token punctuation">}</span><span class="token selector">,</span> <span class="token punctuation">{<!-- --></span> <span class="token property">Choice</span><span class="token punctuation">:</span> <span class="token string">'.ql-align .ql-picker-item[data-value="justify"]'</span><span class="token punctuation">,</span> <span class="token property">title</span><span class="token punctuation">:</span> <span class="token string">'两端对齐'</span> <span class="token punctuation">}</span> ] <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li></ul></pre> <p>在页面上已经渲染好元素之后，执行存放该内容的函数，不然会获取不到元素，可以直接放在@ready的函数里面</p> <pre data-index="11" class="prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token keyword">for</span> <span class="token punctuation">(</span>let item of titleConfig<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token builtin class-name">let</span> tip <span class="token operator">=</span> document.querySelector<span class="token punctuation">(</span><span class="token string">'.quill-editor '</span> + item.Choice<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>tip<span class="token punctuation">)</span> <span class="token builtin class-name">continue</span> tip.setAttribute<span class="token punctuation">(</span><span class="token string">'title'</span>, item.title<span class="token punctuation">)</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <h2><a name="t11"></a><a id="Editorvue_273"></a>最后的Editor.vue具体代码</h2> <pre data-index="12" class="set-code-hide prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token assign-left variable">id</span><span class="token operator">=</span><span class="token string">'quillEditorQiniu'</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span>-- 基于elementUi的上传组件 el-upload begin--<span class="token operator">></span> <span class="token operator"><</span>el-upload <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"avatar-uploader"</span> :action<span class="token operator">=</span><span class="token string">"uploadImgUrl"</span> :accept<span class="token operator">=</span><span class="token string">"'image/*,video/*'"</span> :show-file-list<span class="token operator">=</span><span class="token string">"false"</span> :on-success<span class="token operator">=</span><span class="token string">"uploadEditorSuccess"</span> :on-error<span class="token operator">=</span><span class="token string">"uploadEditorError"</span> :before-upload<span class="token operator">=</span><span class="token string">"beforeEditorUpload"</span> :headers<span class="token operator">=</span><span class="token string">"headers"</span><span class="token operator">></span> <span class="token operator"><</span>/el-upload<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span>-- 基于elementUi的上传组件 el-upload end--<span class="token operator">></span> <span class="token operator"><</span>quill-editor <span class="token assign-left variable">class</span><span class="token operator">=</span><span class="token string">"editor"</span> v-model<span class="token operator">=</span><span class="token string">"content"</span> <span class="token assign-left variable">ref</span><span class="token operator">=</span><span class="token string">"customQuillEditor"</span> @change<span class="token operator">=</span><span class="token string">"onEditorChange(<span class="token variable">$event</span>)"</span> :options<span class="token operator">=</span><span class="token string">"editorOption"</span> @ready<span class="token operator">=</span><span class="token string">"onEditorReady(<span class="token variable">$event</span>)"</span> <span class="token operator">></span> <span class="token operator"><</span>/quill-editor<span class="token operator">></span> <span class="token operator"><</span>/div<span class="token operator">></span> <span class="token operator"><</span>/template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token function">import</span> * as Quill from <span class="token string">'quill'</span> <span class="token function">import</span> Video from <span class="token string">"@/components/Editor/video"</span><span class="token punctuation">;</span> Quill.register<span class="token punctuation">(</span>Video, <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token function">import</span> <span class="token punctuation">{<!-- --></span>getToken<span class="token punctuation">}</span> from <span class="token string">"@/utils/auth"</span><span class="token punctuation">;</span> const toolbarOptions <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">'bold'</span>, <span class="token string">'italic'</span>, <span class="token string">'underline'</span>, <span class="token string">'strike'</span><span class="token punctuation">]</span>, // toggled buttons <span class="token punctuation">[</span><span class="token string">'blockquote'</span>, <span class="token string">'code-block'</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'header'</span><span class="token builtin class-name">:</span> <span class="token number">1</span><span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span><span class="token string">'header'</span><span class="token builtin class-name">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // custom button values <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'list'</span><span class="token builtin class-name">:</span> <span class="token string">'ordered'</span><span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span><span class="token string">'list'</span><span class="token builtin class-name">:</span> <span class="token string">'bullet'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'script'</span><span class="token builtin class-name">:</span> <span class="token string">'sub'</span><span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span><span class="token string">'script'</span><span class="token builtin class-name">:</span> <span class="token string">'super'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // superscript/subscript <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'indent'</span><span class="token builtin class-name">:</span> <span class="token string">'-1'</span><span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span><span class="token string">'indent'</span><span class="token builtin class-name">:</span> <span class="token string">'+1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // outdent/indent <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'direction'</span><span class="token builtin class-name">:</span> <span class="token string">'rtl'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // text direction <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'size'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token string">'small'</span>, false, <span class="token string">'large'</span>, <span class="token string">'huge'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // custom dropdown <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'header'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token number">1</span>, <span class="token number">2</span>, <span class="token number">3</span>, <span class="token number">4</span>, <span class="token number">5</span>, <span class="token number">6</span>, false<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'color'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span><span class="token string">'background'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, // dropdown with defaults from theme <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'font'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token string">'align'</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token string">'link'</span>, <span class="token string">'image'</span>, <span class="token string">'video'</span><span class="token punctuation">]</span>, <span class="token punctuation">[</span><span class="token string">'clean'</span><span class="token punctuation">]</span> // remove formatting button <span class="token punctuation">]</span><span class="token punctuation">;</span> const titleConfig <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-insertMetric'</span>, title: <span class="token string">'跳转配置'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-bold'</span>, title: <span class="token string">'加粗'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-italic'</span>, title: <span class="token string">'斜体'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-underline'</span>, title: <span class="token string">'下划线'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header'</span>, title: <span class="token string">'段落格式'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-strike'</span>, title: <span class="token string">'删除线'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-blockquote'</span>, title: <span class="token string">'块引用'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-code'</span>, title: <span class="token string">'插入代码'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-code-block'</span>, title: <span class="token string">'插入代码段'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-font'</span>, title: <span class="token string">'字体'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-size'</span>, title: <span class="token string">'字体大小'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-list[value="ordered"]'</span>, title: <span class="token string">'编号列表'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-list[value="bullet"]'</span>, title: <span class="token string">'项目列表'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-direction'</span>, title: <span class="token string">'文本方向'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header[value="1"]'</span>, title: <span class="token string">'h1'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header[value="2"]'</span>, title: <span class="token string">'h2'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-align'</span>, title: <span class="token string">'对齐方式'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-color'</span>, title: <span class="token string">'字体颜色'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-background'</span>, title: <span class="token string">'背景颜色'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-image'</span>, title: <span class="token string">'图像'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-video'</span>, title: <span class="token string">'视频'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-link'</span>, title: <span class="token string">'添加链接'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-formula'</span>, title: <span class="token string">'插入公式'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-clean'</span>, title: <span class="token string">'清除字体格式'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-emoji'</span>, title: <span class="token string">'表情包'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-script[value="sub"]'</span>, title: <span class="token string">'下标'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-script[value="super"]'</span>, title: <span class="token string">'上标'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-indent[value="-1"]'</span>, title: <span class="token string">'向左缩进'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-indent[value="+1"]'</span>, title: <span class="token string">'向右缩进'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-label'</span>, title: <span class="token string">'标题大小'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="1"]'</span>, title: <span class="token string">'标题一'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="2"]'</span>, title: <span class="token string">'标题二'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="3"]'</span>, title: <span class="token string">'标题三'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="4"]'</span>, title: <span class="token string">'标题四'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="5"]'</span>, title: <span class="token string">'标题五'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item[data-value="6"]'</span>, title: <span class="token string">'标题六'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-header .ql-picker-item:last-child'</span>, title: <span class="token string">'标准'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-size .ql-picker-item[data-value="small"]'</span>, title: <span class="token string">'小号'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-size .ql-picker-item[data-value="large"]'</span>, title: <span class="token string">'大号'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-size .ql-picker-item[data-value="huge"]'</span>, title: <span class="token string">'超大号'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-size .ql-picker-item:nth-child(2)'</span>, title: <span class="token string">'标准'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-align .ql-picker-item:first-child'</span>, title: <span class="token string">'居左对齐'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-align .ql-picker-item[data-value="center"]'</span>, title: <span class="token string">'居中对齐'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-align .ql-picker-item[data-value="right"]'</span>, title: <span class="token string">'居右对齐'</span> <span class="token punctuation">}</span>, <span class="token punctuation">{<!-- --></span> Choice: <span class="token string">'.ql-align .ql-picker-item[data-value="justify"]'</span>, title: <span class="token string">'两端对齐'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token builtin class-name">export</span> default <span class="token punctuation">{<!-- --></span> name: <span class="token string">"Editor"</span>, props:<span class="token punctuation">{<!-- --></span> /*编辑器内容*/ value:<span class="token punctuation">{<!-- --></span> type:String <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token function-name function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> return<span class="token punctuation">{<!-- --></span> content:this.value, uploadImgUrl:<span class="token string">"/beidauser/upload"</span>,// 上传的图片服务器地址, headers: <span class="token punctuation">{<!-- --></span> Authorization: <span class="token string">"Bearer "</span> + getToken<span class="token punctuation">(</span><span class="token punctuation">)</span>, <span class="token punctuation">}</span>, quillUpdateImg:false, editorOption:<span class="token punctuation">{<!-- --></span> placeholder:<span class="token string">'你想说什么？'</span>, modules: <span class="token punctuation">{<!-- --></span> imageResize: <span class="token punctuation">{<!-- --></span> displayStyles:<span class="token punctuation">{<!-- --></span> backgroundColor:<span class="token string">'black'</span>, border:<span class="token string">'none'</span>, color:<span class="token string">'white'</span> <span class="token punctuation">}</span>, modules:<span class="token punctuation">[</span><span class="token string">'Resize'</span>,<span class="token string">'DisplaySize'</span><span class="token punctuation">]</span>, <span class="token punctuation">}</span>, toolbar: <span class="token punctuation">{<!-- --></span> container: toolbarOptions, // 工具栏 handlers: <span class="token punctuation">{<!-- --></span> <span class="token string">'image'</span><span class="token builtin class-name">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> document.querySelector<span class="token punctuation">(</span><span class="token string">'#quillEditorQiniu .avatar-uploader input'</span><span class="token punctuation">)</span>.click<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span> this.quill.format<span class="token punctuation">(</span><span class="token string">'image'</span>, <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>, <span class="token string">'video'</span><span class="token builtin class-name">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> document.querySelector<span class="token punctuation">(</span><span class="token string">'#quillEditorQiniu .avatar-uploader input'</span><span class="token punctuation">)</span>.click<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span> this.quill.format<span class="token punctuation">(</span><span class="token string">'video'</span>, <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>, <span class="token punctuation">}</span> <span class="token punctuation">}</span>, methods:<span class="token punctuation">{<!-- --></span> onEditorReady<span class="token punctuation">(</span>quill<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span>quill<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>let item of titleConfig<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token builtin class-name">let</span> tip <span class="token operator">=</span> document.querySelector<span class="token punctuation">(</span><span class="token string">'.quill-editor '</span> + item.Choice<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>tip<span class="token punctuation">)</span> <span class="token builtin class-name">continue</span> tip.setAttribute<span class="token punctuation">(</span><span class="token string">'title'</span>, item.title<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>, <span class="token function-name function">onEditorChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span>this.content<span class="token punctuation">)</span><span class="token punctuation">;</span> this.<span class="token variable">$emit</span><span class="token punctuation">(</span><span class="token string">'input'</span>,this.content<span class="token punctuation">)</span><span class="token punctuation">;</span>//将修改后的内容传到父组件 <span class="token punctuation">}</span>, //上传图片之前async beforeEditorUpload<span class="token punctuation">(</span>res, <span class="token function">file</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> //显示上传动画 console.log<span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> console.log<span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span> this.quillUpdateImg <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> // const res1 <span class="token operator">=</span> await uploadImage<span class="token punctuation">(</span><span class="token punctuation">)</span> // console.log<span class="token punctuation">(</span>res1,<span class="token string">'====='</span><span class="token punctuation">)</span><span class="token punctuation">;</span> // this.<span class="token variable">$emit</span><span class="token punctuation">(</span><span class="token string">'before'</span>,res, <span class="token function">file</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>, // 上传图片成功 uploadEditorSuccess<span class="token punctuation">(</span>res, <span class="token function">file</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span>res, <span class="token function">file</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token builtin class-name">let</span> <span class="token assign-left variable">imgUrl</span><span class="token operator">=</span>res.data.url<span class="token punctuation">;</span> <span class="token builtin class-name">let</span> <span class="token assign-left variable">type</span><span class="token operator">=</span>imgUrl.substring<span class="token punctuation">(</span>imgUrl.lastIndexOf<span class="token punctuation">(</span><span class="token string">"."</span><span class="token punctuation">)</span>+1<span class="token punctuation">)</span><span class="token punctuation">;</span> // 获取富文本组件实例 <span class="token builtin class-name">let</span> quill <span class="token operator">=</span> this.<span class="token variable">$refs</span>.customQuillEditor.quill<span class="token punctuation">;</span> console.log<span class="token punctuation">(</span>quill<span class="token punctuation">)</span><span class="token punctuation">;</span> // 获取光标所在位置 <span class="token builtin class-name">let</span> length <span class="token operator">=</span> quill.getSelection<span class="token punctuation">(</span><span class="token punctuation">)</span>.index<span class="token punctuation">;</span> if<span class="token punctuation">(</span>type<span class="token operator">==</span><span class="token operator">=</span><span class="token string">'mp4'</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> window.jsValue<span class="token operator">=</span>imgUrl<span class="token punctuation">;</span> // 插入视频 res.info为服务器返回的图片地址 quill.insertEmbed<span class="token punctuation">(</span>length, <span class="token string">'video'</span>, res.data.url<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>else <span class="token punctuation">{<!-- --></span> // 插入图片 res.info为服务器返回的图片地址 quill.insertEmbed<span class="token punctuation">(</span>length, <span class="token string">'image'</span>, res.data.url<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> // 调整光标到最后 quill.setSelection<span class="token punctuation">(</span>length + <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> //取消上传动画 this.quillUpdateImg <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>, // 上传图片失败 uploadEditorError<span class="token punctuation">(</span>res, <span class="token function">file</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span>res,<span class="token string">'====44444'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console.log<span class="token punctuation">(</span>file,<span class="token string">'====44444'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> //页面提示 this.<span class="token variable">$message</span>.error<span class="token punctuation">(</span><span class="token string">'上传失败'</span><span class="token punctuation">)</span> //取消上传动画 this.quillUpdateImg <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>, <span class="token punctuation">}</span>, <span class="token function-name function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> /*if<span class="token punctuation">(</span>this.oldContent<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> this.content <span class="token operator">=</span> this.oldContent <span class="token punctuation">}</span>*/ <span class="token punctuation">}</span>, <span class="token function-name function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span><span class="token string">"开始"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>, watch:<span class="token punctuation">{<!-- --></span> value<span class="token punctuation">(</span>newVal<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> console.log<span class="token punctuation">(</span>newVal<span class="token punctuation">)</span><span class="token punctuation">;</span> this.content<span class="token operator">=</span>newVal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>, <span class="token punctuation">}</span> <span class="token operator"><</span>/script<span class="token operator">></span> <span class="token operator"><</span>style scoped<span class="token operator">></span> .editor <span class="token punctuation">{<!-- --></span> line-height: normal <span class="token operator">!</span>important<span class="token punctuation">;</span> height: 120px<span class="token punctuation">;</span> margin-bottom: 50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-tooltip<span class="token punctuation">[</span>data-mode<span class="token operator">=</span><span class="token string">"link"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"请输入链接地址:"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-tooltip.ql-editing a.ql-action::after <span class="token punctuation">{<!-- --></span> border-right: 0px<span class="token punctuation">;</span> content: <span class="token string">"保存"</span><span class="token punctuation">;</span> padding-right: 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-tooltip<span class="token punctuation">[</span>data-mode<span class="token operator">=</span><span class="token string">"video"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"请输入视频地址:"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"14px"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-size .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"small"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-size .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"small"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"10px"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-size .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"large"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-size .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"large"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"18px"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-size .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"huge"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-size .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"huge"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"32px"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"文本"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"1"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"1"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题1"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"2"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"2"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题2"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"3"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"3"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题3"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"4"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"4"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题4"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"5"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"5"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题5"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-header .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"6"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-header .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"6"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标题6"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"标准字体"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-font .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"serif"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-font .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"serif"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"衬线字体"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> .ql-snow .ql-picker.ql-font .ql-picker-label<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"monospace"</span><span class="token punctuation">]</span>::before, .ql-snow .ql-picker.ql-font .ql-picker-item<span class="token punctuation">[</span>data-value<span class="token operator">=</span><span class="token string">"monospace"</span><span class="token punctuation">]</span>::before <span class="token punctuation">{<!-- --></span> content: <span class="token string">"等宽字体"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li><li style="color: rgb(153, 153, 153);">114</li><li style="color: rgb(153, 153, 153);">115</li><li style="color: rgb(153, 153, 153);">116</li><li style="color: rgb(153, 153, 153);">117</li><li style="color: rgb(153, 153, 153);">118</li><li style="color: rgb(153, 153, 153);">119</li><li style="color: rgb(153, 153, 153);">120</li><li style="color: rgb(153, 153, 153);">121</li><li style="color: rgb(153, 153, 153);">122</li><li style="color: rgb(153, 153, 153);">123</li><li style="color: rgb(153, 153, 153);">124</li><li style="color: rgb(153, 153, 153);">125</li><li style="color: rgb(153, 153, 153);">126</li><li style="color: rgb(153, 153, 153);">127</li><li style="color: rgb(153, 153, 153);">128</li><li style="color: rgb(153, 153, 153);">129</li><li style="color: rgb(153, 153, 153);">130</li><li style="color: rgb(153, 153, 153);">131</li><li style="color: rgb(153, 153, 153);">132</li><li style="color: rgb(153, 153, 153);">133</li><li style="color: rgb(153, 153, 153);">134</li><li style="color: rgb(153, 153, 153);">135</li><li style="color: rgb(153, 153, 153);">136</li><li style="color: rgb(153, 153, 153);">137</li><li style="color: rgb(153, 153, 153);">138</li><li style="color: rgb(153, 153, 153);">139</li><li style="color: rgb(153, 153, 153);">140</li><li style="color: rgb(153, 153, 153);">141</li><li style="color: rgb(153, 153, 153);">142</li><li style="color: rgb(153, 153, 153);">143</li><li style="color: rgb(153, 153, 153);">144</li><li style="color: rgb(153, 153, 153);">145</li><li style="color: rgb(153, 153, 153);">146</li><li style="color: rgb(153, 153, 153);">147</li><li style="color: rgb(153, 153, 153);">148</li><li style="color: rgb(153, 153, 153);">149</li><li style="color: rgb(153, 153, 153);">150</li><li style="color: rgb(153, 153, 153);">151</li><li style="color: rgb(153, 153, 153);">152</li><li style="color: rgb(153, 153, 153);">153</li><li style="color: rgb(153, 153, 153);">154</li><li style="color: rgb(153, 153, 153);">155</li><li style="color: rgb(153, 153, 153);">156</li><li style="color: rgb(153, 153, 153);">157</li><li style="color: rgb(153, 153, 153);">158</li><li style="color: rgb(153, 153, 153);">159</li><li style="color: rgb(153, 153, 153);">160</li><li style="color: rgb(153, 153, 153);">161</li><li style="color: rgb(153, 153, 153);">162</li><li style="color: rgb(153, 153, 153);">163</li><li style="color: rgb(153, 153, 153);">164</li><li style="color: rgb(153, 153, 153);">165</li><li style="color: rgb(153, 153, 153);">166</li><li style="color: rgb(153, 153, 153);">167</li><li style="color: rgb(153, 153, 153);">168</li><li style="color: rgb(153, 153, 153);">169</li><li style="color: rgb(153, 153, 153);">170</li><li style="color: rgb(153, 153, 153);">171</li><li style="color: rgb(153, 153, 153);">172</li><li style="color: rgb(153, 153, 153);">173</li><li style="color: rgb(153, 153, 153);">174</li><li style="color: rgb(153, 153, 153);">175</li><li style="color: rgb(153, 153, 153);">176</li><li style="color: rgb(153, 153, 153);">177</li><li style="color: rgb(153, 153, 153);">178</li><li style="color: rgb(153, 153, 153);">179</li><li style="color: rgb(153, 153, 153);">180</li><li style="color: rgb(153, 153, 153);">181</li><li style="color: rgb(153, 153, 153);">182</li><li style="color: rgb(153, 153, 153);">183</li><li style="color: rgb(153, 153, 153);">184</li><li style="color: rgb(153, 153, 153);">185</li><li style="color: rgb(153, 153, 153);">186</li><li style="color: rgb(153, 153, 153);">187</li><li style="color: rgb(153, 153, 153);">188</li><li style="color: rgb(153, 153, 153);">189</li><li style="color: rgb(153, 153, 153);">190</li><li style="color: rgb(153, 153, 153);">191</li><li style="color: rgb(153, 153, 153);">192</li><li style="color: rgb(153, 153, 153);">193</li><li style="color: rgb(153, 153, 153);">194</li><li style="color: rgb(153, 153, 153);">195</li><li style="color: rgb(153, 153, 153);">196</li><li style="color: rgb(153, 153, 153);">197</li><li style="color: rgb(153, 153, 153);">198</li><li style="color: rgb(153, 153, 153);">199</li><li style="color: rgb(153, 153, 153);">200</li><li style="color: rgb(153, 153, 153);">201</li><li style="color: rgb(153, 153, 153);">202</li><li style="color: rgb(153, 153, 153);">203</li><li style="color: rgb(153, 153, 153);">204</li><li style="color: rgb(153, 153, 153);">205</li><li style="color: rgb(153, 153, 153);">206</li><li style="color: rgb(153, 153, 153);">207</li><li style="color: rgb(153, 153, 153);">208</li><li style="color: rgb(153, 153, 153);">209</li><li style="color: rgb(153, 153, 153);">210</li><li style="color: rgb(153, 153, 153);">211</li><li style="color: rgb(153, 153, 153);">212</li><li style="color: rgb(153, 153, 153);">213</li><li style="color: rgb(153, 153, 153);">214</li><li style="color: rgb(153, 153, 153);">215</li><li style="color: rgb(153, 153, 153);">216</li><li style="color: rgb(153, 153, 153);">217</li><li style="color: rgb(153, 153, 153);">218</li><li style="color: rgb(153, 153, 153);">219</li><li style="color: rgb(153, 153, 153);">220</li><li style="color: rgb(153, 153, 153);">221</li><li style="color: rgb(153, 153, 153);">222</li><li style="color: rgb(153, 153, 153);">223</li><li style="color: rgb(153, 153, 153);">224</li><li style="color: rgb(153, 153, 153);">225</li><li style="color: rgb(153, 153, 153);">226</li><li style="color: rgb(153, 153, 153);">227</li><li style="color: rgb(153, 153, 153);">228</li><li style="color: rgb(153, 153, 153);">229</li><li style="color: rgb(153, 153, 153);">230</li><li style="color: rgb(153, 153, 153);">231</li><li style="color: rgb(153, 153, 153);">232</li><li style="color: rgb(153, 153, 153);">233</li><li style="color: rgb(153, 153, 153);">234</li><li style="color: rgb(153, 153, 153);">235</li><li style="color: rgb(153, 153, 153);">236</li><li style="color: rgb(153, 153, 153);">237</li><li style="color: rgb(153, 153, 153);">238</li><li style="color: rgb(153, 153, 153);">239</li><li style="color: rgb(153, 153, 153);">240</li><li style="color: rgb(153, 153, 153);">241</li><li style="color: rgb(153, 153, 153);">242</li><li style="color: rgb(153, 153, 153);">243</li><li style="color: rgb(153, 153, 153);">244</li><li style="color: rgb(153, 153, 153);">245</li><li style="color: rgb(153, 153, 153);">246</li><li style="color: rgb(153, 153, 153);">247</li><li style="color: rgb(153, 153, 153);">248</li><li style="color: rgb(153, 153, 153);">249</li><li style="color: rgb(153, 153, 153);">250</li><li style="color: rgb(153, 153, 153);">251</li><li style="color: rgb(153, 153, 153);">252</li><li style="color: rgb(153, 153, 153);">253</li><li style="color: rgb(153, 153, 153);">254</li><li style="color: rgb(153, 153, 153);">255</li><li style="color: rgb(153, 153, 153);">256</li><li style="color: rgb(153, 153, 153);">257</li><li style="color: rgb(153, 153, 153);">258</li><li style="color: rgb(153, 153, 153);">259</li><li style="color: rgb(153, 153, 153);">260</li><li style="color: rgb(153, 153, 153);">261</li><li style="color: rgb(153, 153, 153);">262</li><li style="color: rgb(153, 153, 153);">263</li><li style="color: rgb(153, 153, 153);">264</li><li style="color: rgb(153, 153, 153);">265</li><li style="color: rgb(153, 153, 153);">266</li><li style="color: rgb(153, 153, 153);">267</li><li style="color: rgb(153, 153, 153);">268</li><li style="color: rgb(153, 153, 153);">269</li><li style="color: rgb(153, 153, 153);">270</li><li style="color: rgb(153, 153, 153);">271</li><li style="color: rgb(153, 153, 153);">272</li><li style="color: rgb(153, 153, 153);">273</li><li style="color: rgb(153, 153, 153);">274</li><li style="color: rgb(153, 153, 153);">275</li><li style="color: rgb(153, 153, 153);">276</li><li style="color: rgb(153, 153, 153);">277</li><li style="color: rgb(153, 153, 153);">278</li><li style="color: rgb(153, 153, 153);">279</li><li style="color: rgb(153, 153, 153);">280</li><li style="color: rgb(153, 153, 153);">281</li><li style="color: rgb(153, 153, 153);">282</li><li style="color: rgb(153, 153, 153);">283</li><li style="color: rgb(153, 153, 153);">284</li><li style="color: rgb(153, 153, 153);">285</li><li style="color: rgb(153, 153, 153);">286</li><li style="color: rgb(153, 153, 153);">287</li><li style="color: rgb(153, 153, 153);">288</li><li style="color: rgb(153, 153, 153);">289</li><li style="color: rgb(153, 153, 153);">290</li><li style="color: rgb(153, 153, 153);">291</li><li style="color: rgb(153, 153, 153);">292</li><li style="color: rgb(153, 153, 153);">293</li><li style="color: rgb(153, 153, 153);">294</li><li style="color: rgb(153, 153, 153);">295</li><li style="color: rgb(153, 153, 153);">296</li><li style="color: rgb(153, 153, 153);">297</li><li style="color: rgb(153, 153, 153);">298</li><li style="color: rgb(153, 153, 153);">299</li><li style="color: rgb(153, 153, 153);">300</li><li style="color: rgb(153, 153, 153);">301</li><li style="color: rgb(153, 153, 153);">302</li><li style="color: rgb(153, 153, 153);">303</li><li style="color: rgb(153, 153, 153);">304</li></ul></pre> <h1><a name="t12"></a><a id="_581"></a>父组件调用：</h1> <p><img src="https://1000bd.com/contentImg/2022/08/12/114225398.png" alt="在这里插入图片描述"></p> <pre data-index="13" class="prettyprint"><code class="prism language-bash has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>el-form-item <span class="token assign-left variable">prop</span><span class="token operator">=</span><span class="token string">"content"</span> <span class="token assign-left variable">label</span><span class="token operator">=</span><span class="token string">"消息内容"</span> :label-width<span class="token operator">=</span><span class="token string">"dialogFormLabelWidth"</span><span class="token operator">></span> <span class="token operator"><</span>Editor v-model<span class="token operator">=</span><span class="token string">"dialogForm.content"</span>/<span class="token operator">></span> <span class="token operator"><</span>/el-form-item<span class="token operator">></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h1><a name="t13"></a><a id="_590"></a>效果展示</h1> <p><img src="https://1000bd.com/contentImg/2022/08/12/114225619.png" alt="在这里插入图片描述"></p> <p><a href="https://blog.csdn.net/m0_51963973/article/details/125976367?spm=1001.2014.3001.5501">上传图片的内容可以看看这里</a></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1139271">智慧机场解决方案-最新全套文件</a> <br /> <a href="/Article/Index/1181756">如何从字符串中提取相关内容</a> <br /> <a href="/Article/Index/1285603">JTS:06 九交模型讲解</a> <br /> <a href="/Article/Index/844656">worthington是谁？worthington抑制剂对酶活性的影响研究</a> <br /> <a href="/Article/Index/886789">分布式架构在云计算平台中的应用及优缺点</a> <br /> <a href="/Article/Index/1095026">仿真2. 离散事件仿真</a> <br /> <a href="/Article/Index/1415009">Python 继承和子类示例：从 Person 到 Student 的演示</a> <br /> <a href="/Article/Index/710491">java和设计模式（创建模式）</a> <br /> <a href="/Article/Index/1028110">六十六、vue组件</a> <br /> <a href="/Article/Index/629412">iOS全埋点解决方案-APP和H5打通</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_51963973/article/details/126222377 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>