E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
Bruce1801
element-ui 富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）
vue.js
音视频
webpack
文章目录
前言
一、安装
二、使用插件
1、在全局挂载
2.组件中挂载（选用）
3.使用element-ui上传组件
上传文件组件进行隐藏
`修改视频
标签为 <video>`</li> </ul> </li> <li>4、添加下拉框滚动效果</li> <li>5、在鼠标悬停处加中文释义</li> <li>最后的Editor.vue具体代码</li> </ul> </li> <li>父组件调用：</li> <li>效果展示</li> </ul> </div> <p></p> <hr> <h1>前言</h1> <p>最近做的项目中需要实现文字+图片等信息的发布，由于UEditor不怎么维护了，想换一种，于是找到了vue-quill-editor这款富文本编辑器，展示出来的效果还是不错的。开干!</p> <h1>一、安装</h1> <p>安装 quill-editor</p> <pre><code class="prism language-bash">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 </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7a8785a9ece84159a23cb16981559993.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a8785a9ece84159a23cb16981559993.jpg" alt="element-ui 富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）_第1张图片" width="650" height="131" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/5de01294f9f14d92961f890daafb7977.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5de01294f9f14d92961f890daafb7977.jpg" alt="在这里插入图片描述" width="650" height="86"></a></p> <p>安装拖动和缩放的依赖，当上传的图片过大时，可以通过缩放变换大小。</p> <pre><code class="prism language-bash">cnpm <span class="token function">install</span> quill-image-drop-module --save //拖动 cnpm <span class="token function">install</span> quill-image-resize-module --save //缩放 </code></pre> <p><strong>插件需要webpack的支持！！！！！！别问我是怎么知道的</strong></p> <p><strong>编辑 vue.config.js 文件：</strong></p> <pre><code class="prism language-javascript"><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> </code></pre> <hr> <h1>二、使用插件</h1> <h2>1、在全局挂载</h2> <p>进入main.js文件<br> <a href="http://img.e-com-net.com/image/info8/756e802e432e4a44aa1aa432ebd85323.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/756e802e432e4a44aa1aa432ebd85323.jpg" alt="element-ui 富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）_第2张图片" width="190" height="147" style="border:1px solid black;"></a></p> <pre><code class="prism language-javascript"><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> </code></pre> <h2>2.组件中挂载（选用）</h2> <pre><code class="prism language-javascript"><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> </code></pre> <p>本项目中用的是全局挂载</p> <h2>3.使用element-ui上传组件</h2> <p><strong>当前文件为Editor.vue</strong><br> 实现图片和视频的上传功能</p> <pre><code class="prism language-javascript"><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> </code></pre> <p>注 accept：接受上传的文件类型</p> <h3>上传文件组件进行隐藏</h3> <pre><code class="prism language-css"><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> </code></pre> <p>vue-quill-editor 默认是以 iframe 保存的，插入到编辑器中的标签是 iframe，而我们真正需要的是video标签</p> <h3><code>修改视频 <iframe> 标签为 <video></code></h3> <p>同目录下，创建video.js</p> <pre><code class="prism language-javascript"><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 </code></pre> <p>在Editor.vue中加入</p> <pre><code class="prism language-javascript"><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> </code></pre> <h2>4、添加下拉框滚动效果</h2> <pre><code class="prism language-css"><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> </code></pre> <h2>5、在鼠标悬停处加中文释义</h2> <p><a href="http://img.e-com-net.com/image/info8/97ee6730b0844ad59d728edde6a2c10e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/97ee6730b0844ad59d728edde6a2c10e.jpg" alt="element-ui 富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）_第3张图片" width="451" height="213" style="border:1px solid black;"></a><br> 每一个tool都有一个class， 可以把所有的class列出来，然后根据class获取元素，给它加上title属性就可以了<br> <strong>先定义一个数组，把所有的工具放在里面</strong></p> <pre><code class="prism language-css"><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> ] </code></pre> <p>在页面上已经渲染好元素之后，执行存放该内容的函数，不然会获取不到元素，可以直接放在@ready的函数里面</p> <pre><code class="prism language-bash"><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> </code></pre> <h2>最后的Editor.vue具体代码</h2> <pre><code class="prism language-bash"><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> </code></pre> <h1>父组件调用：</h1> <p><a href="http://img.e-com-net.com/image/info8/1a316b5bc3634baa9ca68c43c95b5ee4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a316b5bc3634baa9ca68c43c95b5ee4.jpg" alt="在这里插入图片描述" width="650" height="65"></a></p> <pre><code class="prism language-bash"><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> </code></pre> <h1>效果展示</h1> <p><a href="http://img.e-com-net.com/image/info8/2afa151f1719417d9e73682171462f8a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2afa151f1719417d9e73682171462f8a.jpg" alt="element-ui 富文本编辑器vue-quill-editor的使用（可上传视频、上传图片及图片的放大缩小）_第4张图片" width="650" height="282" style="border:1px solid black;"></a></p> <p>上传图片的内容可以看看这里</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1639456106923220992"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(vue.js,音视频,webpack)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943981422331097088.htm" title="Java大厂面试故事：谢飞机的互联网音视频场景技术面试全纪录（Spring Boot、MyBatis、Kafka、Redis、AI等）" target="_blank">Java大厂面试故事：谢飞机的互联网音视频场景技术面试全纪录（Spring Boot、MyBatis、Kafka、Redis、AI等）</a> <span class="text-muted">来旺</span> <a class="tag" taget="_blank" href="/search/Java%E5%9C%BA%E6%99%AF%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8/1.htm">Java场景面试宝典</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/Boot/1.htm">Boot</a><a class="tag" taget="_blank" href="/search/MyBatis/1.htm">MyBatis</a><a class="tag" taget="_blank" href="/search/Kafka/1.htm">Kafka</a><a class="tag" taget="_blank" href="/search/Redis/1.htm">Redis</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a> <div>Java大厂面试故事：谢飞机的互联网音视频场景技术面试全纪录（SpringBoot、MyBatis、Kafka、Redis、AI等）互联网大厂技术面试不仅考察技术深度，更注重业务场景与系统设计能力。本篇以严肃面试官与“水货”程序员谢飞机的对话，带你体验音视频业务场景下的Java面试全过程，涵盖主流技术栈，并附详细答案解析，助你面试无忧。故事场景设定谢飞机是一名有趣但技术基础略显薄弱的程序员，这次应</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> <span class="text-muted">老马聊技术</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943917011268595712.htm" title="Javaweb学习之Vue模板语法（三）" target="_blank">Javaweb学习之Vue模板语法（三）</a> <span class="text-muted">不要数手指啦</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component</div> </li> <li><a href="/article/1943875785089675264.htm" title="Webpack5 多页面实践" target="_blank">Webpack5 多页面实践</a> <span class="text-muted"></span> <div>特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl</div> </li> <li><a href="/article/1943833290163154944.htm" title="树莓派 —— 在树莓派4b板卡下编译FFmpeg源码，支持硬件编解码器（mmal或openMax硬编解码加速）" target="_blank">树莓派 —— 在树莓派4b板卡下编译FFmpeg源码，支持硬件编解码器（mmal或openMax硬编解码加速）</a> <span class="text-muted">信必诺</span> <a class="tag" taget="_blank" href="/search/FFmpeg/1.htm">FFmpeg</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E8%8E%93%E6%B4%BE/1.htm">树莓派</a><a class="tag" taget="_blank" href="/search/FFmpeg/1.htm">FFmpeg</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91%E6%BA%90%E7%A0%81/1.htm">编译源码</a><a class="tag" taget="_blank" href="/search/mmal/1.htm">mmal</a><a class="tag" taget="_blank" href="/search/openMax/1.htm">openMax</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E8%8E%93%E6%B4%BE/1.htm">树莓派</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E8%8E%93%E6%B4%BE4b/1.htm">树莓派4b</a> <div>FFmpeg相关音视频技术、疑难杂症文章合集（掌握后可自封大侠⓿_⓿）（记得收藏，持续更新中…） 正文 1、准备工作 （1）树莓派烧录RaspberryPi系统 （2）树莓派配置固定IP（文末） （3）xshell连接树莓派 （4）</div> </li> <li><a href="/article/1943662224417550336.htm" title="go语言因为前端跨域导致无法访问到后端解决方案" target="_blank">go语言因为前端跨域导致无法访问到后端解决方案</a> <span class="text-muted">雪花凌落的盛夏</span> <a class="tag" taget="_blank" href="/search/Golang%E5%AD%A6%E4%B9%A0%E7%9B%AE%E5%BD%95/1.htm">Golang学习目录</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端服务8080访问后端8081这端口显示跨域了ERRORNetworkErrorAxiosError:NetworkErroratXMLHttpRequest.handleError(webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14)atAxios.request(webpack-internal:///./n</div> </li> <li><a href="/article/1943647350308270080.htm" title="极简Vue 3应用：从入门到掌握核心概念" target="_blank">极简Vue 3应用：从入门到掌握核心概念</a> <span class="text-muted">程序猿全栈の董（董翔）</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js作为一款渐进式JavaScript框架，以其直观的API和灵活的架构受到广泛欢迎。对于初学者而言，Vue官方CLI生成的项目结构可能略显复杂，包含了各种资源文件、样式和示例组件。本文将介绍如何创建一个最简洁的Vue3应用，帮助你专注于核心概念的学习。为什么需要最简Vue应用？VueCLI默认生成的项目包含：assets目录：存放图片、字体等资源components目录：包含多个示例组件</div> </li> <li><a href="/article/1943594645887971328.htm" title="JavaScript 在前端 UI 框架中的应用与选型" target="_blank">JavaScript 在前端 UI 框架中的应用与选型</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>JavaScript在前端UI框架中的应用与选型关键词：JavaScript、前端UI框架、应用、选型、React、Vue.js、Angular摘要：本文深入探讨了JavaScript在前端UI框架中的应用与选型问题。首先介绍了前端UI框架的背景知识，包括目的、预期读者、文档结构等。接着阐述了核心概念，分析了JavaScript与前端UI框架的联系。通过具体的算法原理和操作步骤，结合Python代</div> </li> <li><a href="/article/1943579016548118528.htm" title="uni-app跨平台开发：高效构建多端应用" target="_blank">uni-app跨平台开发：高效构建多端应用</a> <span class="text-muted">2301_81335708</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>引言：开发者之痛-多端开发的十字路口你是否曾为这些难题彻夜难眠？同一业务需维护iOS、Android、Web三套代码小程序平台各异（微信/支付宝/字节跳动），API差异令人抓狂团队技能栈分散，ReactNative、Flutter、原生开发各自为战产品迭代缓慢，50%时间消耗在跨平台适配uni-app：破局者登场由DCloud推出的uni-app基于Vue.js生态，用一套代码同步生成：iOS/A</div> </li> <li><a href="/article/1943499967217856512.htm" title="Vue框架基础" target="_blank">Vue框架基础</a> <span class="text-muted">所愿ღ</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>目录一、Vue是什么二、Vue的下载三、Vue的API文档四、vue.js和vue.min.js的区别五、引入外部的vue文件六、vue的标准格式以及在页面上显示数据(第一个vue程序)七、模板语法八、在插值中使用运算符九、获取对象的属性十、条件渲染十一、列表渲染(遍历数组/集合)十二、在vue中使用事件十三、图片切换一、Vue是什么1.vue是渐进式JavaScript框架，用于构建用户界面，可</div> </li> <li><a href="/article/1943464406906105856.htm" title="C/C++ 知识总结" target="_blank">C/C++ 知识总结</a> <span class="text-muted">灿烂阳光g</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>目录C/C++STL数据结构算法Problems操作系统计算机网络网络编程数据库设计模式链接装载库海量数据处理音视频其他书籍复习刷题网站招聘时间岗位面试题目经验C/C++const作用修饰变量，说明该变量不可以被改变；修饰指针，分为指向常量的指针和指针常量；常量引用，经常用于形参类型，即避免了拷贝，又避免了函数对值的修改；修饰成员函数，说明该成员函数内不能修改成员变量。使用const使用stati</div> </li> <li><a href="/article/1943439203765383168.htm" title="WePY 框架：小程序开发的“Vue式”利器！！！" target="_blank">WePY 框架：小程序开发的“Vue式”利器！！！</a> <span class="text-muted">小丁学Java</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8FWxMa/1.htm">微信小程序WxMa</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>WePY框架：小程序开发的“Vue式”利器哈喽，大家好！今天我们要聊聊一个在微信小程序开发中大放异彩的框架——WePY！它是什么？有什么特点？为啥值得一试？别急，带上好奇心，跟我一起探索吧！WePY是什么？WePY（微信小程序增强框架，WeChatMiniProgramFramework）是一个开源框架，由腾讯团队开发，旨在让小程序开发更高效、更现代化。简单来说，它把Vue.js的开发体验带到了微</div> </li> <li><a href="/article/1943371017976082432.htm" title="从零用java实现 小红书 springboot vue uniapp（13）模仿抖音视频切换" target="_blank">从零用java实现 小红书 springboot vue uniapp（13）模仿抖音视频切换</a> <span class="text-muted">顽疲</span> <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/java%E4%BB%BF%E5%86%99%E5%B0%8F%E7%BA%A2%E4%B9%A6/1.htm">java仿写小红书</a><a class="tag" taget="_blank" href="/search/uniapp%E6%8A%96%E9%9F%B3/1.htm">uniapp抖音</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>从零用java实现小红书springbootvueuniapp（13）实战：用Swiper+Video打造抖音式丝滑视频流移动端演示http://8.146.211.120:8081/#/管理端演示http://8.146.211.120:8088/#/项目整体介绍及演示前言在上一篇文章中我们实现了视频笔记的发布功能，现在，我们将攻克一个更核心的体验功能：创建一个像抖音、快手那样的全屏、可上下滑动</div> </li> <li><a href="/article/1943358158542008320.htm" title="python实现webrtc接入ipc_WebRTC音视频会议的优势" target="_blank">python实现webrtc接入ipc_WebRTC音视频会议的优势</a> <span class="text-muted">weixin_39998521</span> <div>目前几乎所有主流浏览器都支持了WebRTC，越来越多的公司正在使用WebRTC并且将其加到自己的应用程序中。在浏览器端，依赖于浏览器获取音视频的能力，以及强大的网页上的渲染能力，就能够为高清的通信体验打下基础。同时，相比移动端来说，屏幕比较大，视窗选择也比较灵活。第一，跨平台。大家都了解浏览器对各个终端的特殊性，不止PC上有浏览器、移动端上有浏览器，甚至是一些知名的社交APP也嵌入了浏览器。这需要</div> </li> <li><a href="/article/1943334960446369792.htm" title="uniapp页面间通信相关方法总结" target="_blank">uniapp页面间通信相关方法总结</a> <span class="text-muted">前端达人</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>文章整理于：https://ask.dcloud.net.cn/article/35970uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。利用url传参进行通讯A页面向B页面传递参数uni.navigateTo({url:'test/te</div> </li> <li><a href="/article/1943217851364077568.htm" title="Web端版本更新提示--前端处理" target="_blank">Web端版本更新提示--前端处理</a> <span class="text-muted">扶我起来还能学_</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>Web端版本更新提示–前端处理原理：webpack每次打包jshash值不同import{MessageBox}from'element-ui'letlastScripts=[]//最新一次js文件src名constDURATION=5*60*1000//设置5分钟检查更新一次//提取html中的script标签的src属性asyncfunctionextractNewScripts(htmlSt</div> </li> <li><a href="/article/1943173605189808128.htm" title="使用ENO将您的JSON对象生成HTML显示" target="_blank">使用ENO将您的JSON对象生成HTML显示</a> <span class="text-muted">土族程序员</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/eno/1.htm">eno</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请</div> </li> <li><a href="/article/1943154903992037376.htm" title="python视频工具包 ffmpeg 使用示例" target="_blank">python视频工具包 ffmpeg 使用示例</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/pythonffmpeg/1.htm">pythonffmpeg</a> <div>1.简介FFMPEG堪称自由软件中最完备的一套多媒体支持库，它几乎实现了所有当下常见的数据封装格式、多媒体传输协议以及音视频编解码器，提供了录制、转换以及流化音视频的完整解决方案。2.ffmpeg的常用方法将某文件下所有ts文件按顺序合并，转换成MP4格式存储：importffmpegdeftest2():ts_folder='path/ts_files/ceshi/'output_mp4="pa</div> </li> <li><a href="/article/1943079315642052608.htm" title="4K超高清无缝切换与画面分割矩阵" target="_blank">4K超高清无缝切换与画面分割矩阵</a> <span class="text-muted"></span> <div>格芬科技4K超高清无缝切换与画面分割矩阵技术解析格芬科技作为音视频传输与控制领域的领先企业，其4K超高清无缝切换与画面分割矩阵产品以高性能、高灵活性和高可靠性为核心优势，广泛应用于会议室、指挥中心、舞台演出、教育培训等场景。以下从产品特性、技术规格、应用场景及选型建议四个维度进行详细解析：一、核心产品与技术特性4K@60Hz超高清支持分辨率与刷新率：格芬科技矩阵产品（如GF-HDMI0404U、G</div> </li> <li><a href="/article/1943079062478057472.htm" title="HDMI高清矩阵与无缝拼接矩阵 OEM定制控标" target="_blank">HDMI高清矩阵与无缝拼接矩阵 OEM定制控标</a> <span class="text-muted">geffen08</span> <a class="tag" taget="_blank" href="/search/TPHD141K/1.htm">TPHD141K</a><a class="tag" taget="_blank" href="/search/vc-1/1.htm">vc-1</a><a class="tag" taget="_blank" href="/search/g711/1.htm">g711</a><a class="tag" taget="_blank" href="/search/es13/1.htm">es13</a> <div>HDMI高清矩阵与无缝拼接矩阵：GEFFEN/GF-MIX系列介绍GEFFEN/GF-MIX系列矩阵是一款集成了高性能、高灵活性和高可靠性于一身的音视频处理设备，特别适用于需要高清视频信号切换、拼接和显示的场合。HDMI高清矩阵主要功能与特点：高清视频信号切换：GEFFEN/GF-MIX系列HDMI高清矩阵支持多路HDMI输入和多路HDMI输出，能够轻松实现高清视频信号之间的快速切换。无缝切换技术</div> </li> <li><a href="/article/1943069099814875136.htm" title="[硬件接口]HDMI和DP 区别" target="_blank">[硬件接口]HDMI和DP 区别</a> <span class="text-muted"></span> <div>DisplayPort和HDMI在FPGA应用场景的实现使用与区别概述DisplayPort（DP）和HDMI是两种主流的数字音视频接口，广泛应用于视频传输场景。在FPGA（现场可编程门阵列）应用中，DP和HDMI常用于视频处理、显示驱动和高带宽数据传输。本文档比较两者在FPGA实现中的使用方式、应用场景及主要区别，并以Markdown格式呈现。1.FPGA实现概述1.1DisplayPort在F</div> </li> <li><a href="/article/1943046533628882944.htm" title="用Vue Flow绘制一个完美流程图" target="_blank">用Vue Flow绘制一个完美流程图</a> <span class="text-muted">itanly</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>VueFlow简介VueFlow是一个基于Vue.js的流程图库，专为构建交互式流程图设计。它支持节点拖拽、连线、缩放、撤销/重做等功能，适用于工作流、系统架构图等场景。以下内容将演示如何用VueFlow绘制一个完整的流程图，并提供代码示例。安装与基础配置确保项目已安装Vue3，使用以下命令安装VueFlow：npminstall@vue-flow/core基础配置示例：import{VueFlo</div> </li> <li><a href="/article/1943033300671066112.htm" title="Vue入门" target="_blank">Vue入门</a> <span class="text-muted">LUO-CHEn</span> <a class="tag" taget="_blank" href="/search/Java%E6%B8%A9%E9%A6%A8Talk/1.htm">Java温馨Talk</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>vue1、vue概述（1）概念vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。随着项目业务场景的复杂,传统模式(html+jquery)已无法满足需求,就出现了Angular/React/Vue等框架（2）特点1、Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。2、Vue.JS是优秀的前端Jav</div> </li> <li><a href="/article/1943016279984107520.htm" title="Vue3-尚硅谷笔记" target="_blank">Vue3-尚硅谷笔记</a> <span class="text-muted">八月份的天气</span> <a class="tag" taget="_blank" href="/search/Vue3-%E7%AC%94%E8%AE%B0/1.htm">Vue3-笔记</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.Vue3简介2020年9月18日，Vue.js发布版3.0版本，代号：OnePiece（n经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Releasev3.0.0OnePiece·vuejs/core截止2023年10月，最新的公开版本为：3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快55%,更新渲染快133%。内存减少54%。1.2.【</div> </li> <li><a href="/article/1942927539974500352.htm" title="C语言基础-数据类型" target="_blank">C语言基础-数据类型</a> <span class="text-muted">知柠</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>定义数据类型其实就是固定大小内存的别名，并且描述了一个变量存放什么类型的数据。简单来说，就是组织和操作数据。数据：计算机要处理的数据（数字、字符串、文字、符号、图片、音视频等）数据类型不仅帮助我们组织和操作数据，还决定了程序如何有效的利用内存。了解数据类型的内存需求是理解计算机管理和操作数据的关键。小贴士：程序运行需要在内存中数据类型分类和计算方法数据类型分类基本类型（C语言内置）数值类型整型（整</div> </li> <li><a href="/article/1942883298925670400.htm" title="ffmpeg的常见使用" target="_blank">ffmpeg的常见使用</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/pythonffmpeg/1.htm">pythonffmpeg</a> <div>1.简介FFMPEG堪称自由软件中最完备的一套多媒体支持库，它几乎实现了所有当下常见的数据封装格式、多媒体传输协议以及音视频编解码器，提供了录制、转换以及流化音视频的完整解决方案。2.ffmpeg的常用方法将某文件下所有ts文件按顺序合并，转换成MP4格式存储：importffmpegdeftest2():ts_folder='path/ts_files/ceshi/'output_mp4="pa</div> </li> <li><a href="/article/1942788247700697088.htm" title="2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战" target="_blank">2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战</a> <span class="text-muted"></span> <div>目录前言Nuxt.js的特性Nuxt.js的实战应用关于《Nuxt.jsWeb开发实战》编辑推荐内容简介作者简介图书目录书中前言/序言《Nuxt.jsWeb开发实战》全书速览结束语前言作为前端开发的小伙伴想必对Nuxt.js并不陌生，Nuxt.js是基于Vue.js的一款用于构建服务端渲染的应用程序的框架。它能够帮助开发者快速搭建高性能的单页面应用（SPA）和多页面应用（MPA）。Nuxt.js在</div> </li> <li><a href="/article/1942778788052004864.htm" title="vue-cropper实现图片裁剪" target="_blank">vue-cropper实现图片裁剪</a> <span class="text-muted">鸡吃丸子</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、什么是vue-cropper？Vue-Cropper是一个基于Vue.js的图片裁剪组件库，专为Web应用设计。当你在网上搜索的时候发现还有一个叫cropper的库，下面是他们的区别：特性cropper.jsvue-cropper框架依赖纯JavaScript，无框架依赖专为Vue.js设计包体积~200KB(含样式)~45KB(压缩后)API调用方式原生DOM操作Vue组件式API响应式支持</div> </li> <li><a href="/article/1942767322414510080.htm" title="Session：在多个请求之间跟踪用户状态" target="_blank">Session：在多个请求之间跟踪用户状态</a> <span class="text-muted"></span> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录一、Session的基本概念1.SessionID2.Session数据</div> </li> <li><a href="/article/42.htm" title="jQuery 键盘事件keydown ,keypress ,keyup介绍" target="_blank">jQuery 键盘事件keydown ,keypress ,keyup介绍</a> <span class="text-muted">107x</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/keydown/1.htm">keydown</a><a class="tag" taget="_blank" href="/search/keypress/1.htm">keypress</a><a class="tag" taget="_blank" href="/search/keyup/1.htm">keyup</a> <div>本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() 代码如下 复制代码 $('input').keyup(funciton(){  </div> </li> <li><a href="/article/169.htm" title="AngularJS中的Promise" target="_blank">AngularJS中的Promise</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Promise/1.htm">Promise</a> <div>一.Promise Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。 为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu</div> </li> <li><a href="/article/296.htm" title="c++ 用数组实现栈类" target="_blank">c++ 用数组实现栈类</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(</div> </li> <li><a href="/article/423.htm" title="java和c语言的雷同" target="_blank">java和c语言的雷同</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/scaner/1.htm">scaner</a> <div>软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点： a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。 b、for循环相比于whi</div> </li> <li><a href="/article/550.htm" title="LINUX环境并发服务器的三种实现模型" target="_blank">LINUX环境并发服务器的三种实现模型</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1 循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服</div> </li> <li><a href="/article/677.htm" title="Oracle数据库查询指令" target="_blank">Oracle数据库查询指令</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/oracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oracle数据库</a> <div>20140920 单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录 -- 查看emp表 desc emp </div> </li> <li><a href="/article/804.htm" title="ext右下角浮动窗口" target="_blank">ext右下角浮动窗口</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div>第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/</div> </li> <li><a href="/article/931.htm" title="浅谈REDIS数据库的键值设计" target="_blank">浅谈REDIS数据库的键值设计</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。 </div> </li> <li><a href="/article/1058.htm" title="maven编译可执行jar包" target="_blank">maven编译可执行jar包</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse</div> </li> <li><a href="/article/1185.htm" title="人力资源在现代企业中的作用" target="_blank">人力资源在现代企业中的作用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/HR+%E4%BC%81%E4%B8%9A%E7%AE%A1%E7%90%86/1.htm">HR 企业管理</a> <div>//人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人</div> </li> <li><a href="/article/1312.htm" title="Linux自启动设置详解" target="_blank">Linux自启动设置详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc</div> </li> <li><a href="/article/1439.htm" title="Spring Aop Schema实现" target="_blank">Spring Aop Schema实现</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln</div> </li> <li><a href="/article/1566.htm" title="【Gson七】Gson预定义类型适配器" target="_blank">【Gson七】Gson预定义类型适配器</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式， DateTypeAdapter public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto</div> </li> <li><a href="/article/1693.htm" title="【Spark八十八】Spark Streaming累加器操作（updateStateByKey)" target="_blank">【Spark八十八】Spark Streaming累加器操作（updateStateByKey)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/update/1.htm">update</a> <div>在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。 Spark Streaming的解决方案是累加器，工作原理是，定义</div> </li> <li><a href="/article/1820.htm" title="linux系统下通过shell脚本快速找到哪个进程在写文件" target="_blank">linux系统下通过shell脚本快速找到哪个进程在写文件</a> <span class="text-muted">ronin47</span> <div>一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位</div> </li> <li><a href="/article/1947.htm" title="java-两种方法求第一个最长的可重复子串" target="_blank">java-两种方法求第一个最长的可重复子串</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div> import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx"; </div> </li> <li><a href="/article/2074.htm" title="Netty源码学习-ServerBootstrap启动及事件处理过程" target="_blank">Netty源码学习-ServerBootstrap启动及事件处理过程</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo</div> </li> <li><a href="/article/2201.htm" title="servelt filter listener 的生命周期" target="_blank">servelt filter listener 的生命周期</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a><a class="tag" taget="_blank" href="/search/servelt/1.htm">servelt</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/1.htm">生命周期</a> <div>1. servlet 当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说</div> </li> <li><a href="/article/2328.htm" title="jmpopups获取input元素值" target="_blank">jmpopups获取input元素值</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(</div> </li> <li><a href="/article/2455.htm" title="vi查找替换命令详解" target="_blank">vi查找替换命令详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE/1.htm">查找</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1: /abc<En</div> </li> <li><a href="/article/2582.htm" title="对网站中的js,css文件进行打包" target="_blank">对网站中的js,css文件进行打包</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85/1.htm">打包</a> <div>一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J</div> </li> <li><a href="/article/2709.htm" title="php Yii: 出现undefined offset 或者 undefined index解决方案" target="_blank">php Yii: 出现undefined offset 或者 undefined index解决方案</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/undefined/1.htm">undefined</a> <div>在开发Yii 时，在程序中定义了如下方式： if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级</div> </li> <li><a href="/article/2836.htm" title="linux 文件格式（1） sed工具" target="_blank">linux 文件格式（1） sed工具</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux+sed%E5%B7%A5%E5%85%B7/1.htm">linux sed工具</a><a class="tag" taget="_blank" href="/search/sed%E5%B7%A5%E5%85%B7/1.htm">sed工具</a><a class="tag" taget="_blank" href="/search/linux+sed%E8%AF%A6%E8%A7%A3/1.htm">linux sed详解</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介 sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾</div> </li> <li><a href="/article/2963.htm" title="Android应用程序获取系统权限" target="_blank">Android应用程序获取系统权限</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>引用 如何使Android应用程序获取系统权限 第一个方法简单点，不过需要在Android系统源码的环境下用make来编译： 1. 在应用程序的AndroidManifest.xml中的manifest节点</div> </li> <li><a href="/article/3090.htm" title="HoverTree开发日志之验证码" target="_blank">HoverTree开发日志之验证码</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/webform/1.htm">webform</a> <div>HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多</div> </li> <li><a href="/article/3217.htm" title="JSON API：用 JSON 构建 API 的标准指南中文版" target="_blank">JSON API：用 JSON 构建 API 的标准指南中文版</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，</div> </li> <li><a href="/article/3344.htm" title="数据结构随记_2" target="_blank">数据结构随记_2</a> <span class="text-muted">lx.asymmetric</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的 前一个 位置。 2.在具有n个单元的循环队列中，队满时共有 n-1 个元素。 3. 向栈中压入元素的操作是先 移动栈顶指针&n</div> </li> <li><a href="/article/3471.htm" title="Linux下的监控工具dstat" target="_blank">Linux下的监控工具dstat</a> <span class="text-muted">网络接口</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是, </div> </li> <li><a href="/article/3598.htm" title="C 语言初级入门--二维数组和指针" target="_blank">C 语言初级入门--二维数组和指针</a> <span class="text-muted">1140566087</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/c%2Fc%2B%2B/1.htm">c/c++</a><a class="tag" taget="_blank" href="/search/%E6%8C%87%E9%92%88/1.htm">指针</a> <div>/* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4]; 引用：</div> </li> <li><a href="/article/3725.htm" title="10点睛Spring4.1-Application Event" target="_blank">10点睛Spring4.1-Application Event</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/application/1.htm">application</a> <div>10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息 </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>
