定制富文本编辑器web前端开发关注共 4341字，需浏览 9分钟 ·2020-11-08 04:45 定制富文本编辑器很多时候并不能满足我们对文本输入的需求，当我们需要为输入的文本添加格式时，我们需要使用像quill这样的富文本编辑器来完成富文本的输入。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">本文将会详细的讲解如何使用羽毛笔定制一个自己的富文本编辑器。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">这里面定制了两个特殊的功能（添加卡片，添加图片墙），感兴趣的同学可以先看一下实现后的效果：</span>富文本编辑器</section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">接下来将会讲解如何在quill的基础上实现定制化的富文本编辑器。</span></section><h3 style="color: rgb(0, 0, 0);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><strong><span style="vertical-align: inherit;color: rgb(26, 177, 204);">简介</span></strong></h3><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">一个好的富文本编辑器的标志就是它能够支持多少种格式，而羽毛笔则支持无限种类的格式。你可以在羽毛笔上自定义任意种类的文本。并且，如果你不想自定义个任何功能，那么羽毛笔也是极易上手的</span><span style="color: rgb(0, 0, 136);"></span></section><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">var</span> quill = <span class="code-snippet__keyword">new</span> Quill(<span class="code-snippet__string">'#editor'</span>, {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">modules</span>: { <span class="code-snippet__attr">toolbar</span>: <span class="code-snippet__literal">true</span> },</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">theme</span>: <span class="code-snippet__string">'snow'</span></span></code><code><span class="code-snippet_outer">})</span></code></pre></section></pre><h4 style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">如何在Quill上定制功能</span></h4><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">quill提供了非常细粒度，定义良好的API，我们可以在此基础之上进行定制化开发自己的富文本编辑器。（环境为</span><span style="vertical-align: inherit;">vue</span><span style="vertical-align: inherit;"> + iview，使用iview进行辅助样式开发）</span></p><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">首先我们从最简单的demo入手。</span></p><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"editor"</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"editor"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">import</span> Quill <span class="code-snippet__keyword">from</span> <span class="code-snippet__string">"quill"</span>;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">export</span> <span class="code-snippet__keyword">default</span> {</span></code><code><span class="code-snippet_outer"> mounted() {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> quill = <span class="code-snippet__keyword">new</span> Quill(<span class="code-snippet__string">"#editor"</span>, {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">theme</span>: <span class="code-snippet__string">"snow"</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">placeholder</span>: <span class="code-snippet__string">"请在此开始编辑..."</span></span></code><code><span class="code-snippet_outer"> });</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer">};</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code></pre></section></pre><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">这是一个替代参数条件下的一个富文本编辑器，我们首先对Toolbar进行替换，Toolbar是modules的一部分。</span></p><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);"><img data-ratio="0.5208333333333334" src="https://filescdn.proginn.com/be0e2a010f3b68d1b13c07b221dd394d/45aeea26c037901a13b1327ed7191fb1.webp" data-type="jpeg" data-w="720"><br></p><p style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">我们需要在新建quill实例的时候覆盖原来的工具栏，并使用自己的工具栏元素。</span><span style="font-size: 14px;color: rgb(0, 0, 0);font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"></span></p><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"container"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"toolbar"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Tooltip</span> <span class="code-snippet__attr">content</span>=<span class="code-snippet__string">"加粗"</span> <span class="code-snippet__attr">placement</span>=<span class="code-snippet__string">"bottom"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">button</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"ql-bold"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">button</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">Tooltip</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Tooltip</span> <span class="code-snippet__attr">content</span>=<span class="code-snippet__string">"倾斜"</span> <span class="code-snippet__attr">placement</span>=<span class="code-snippet__string">"bottom"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">button</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"ql-italic"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">button</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">Tooltip</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Tooltip</span> <span class="code-snippet__attr">content</span>=<span class="code-snippet__string">"下划线"</span> <span class="code-snippet__attr">placement</span>=<span class="code-snippet__string">"bottom"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">button</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"ql-underline"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">button</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">Tooltip</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Tooltip</span> <span class="code-snippet__attr">content</span>=<span class="code-snippet__string">"删除线"</span> <span class="code-snippet__attr">placement</span>=<span class="code-snippet__string">"bottom"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">button</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"ql-strike"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">button</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">Tooltip</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"editor"</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"editor"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">import</span> Quill <span class="code-snippet__keyword">from</span> <span class="code-snippet__string">"quill"</span>;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">export</span> <span class="code-snippet__keyword">default</span> {</span></code><code><span class="code-snippet_outer"> mounted() {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> quill = <span class="code-snippet__keyword">new</span> Quill(<span class="code-snippet__string">"#editor"</span>, {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">theme</span>: <span class="code-snippet__string">"snow"</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">modules</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">toolbar</span>: <span class="code-snippet__string">"#toolbar"</span></span></code><code><span class="code-snippet_outer"> },</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">placeholder</span>: <span class="code-snippet__string">"请在此开始编辑..."</span></span></code><code><span class="code-snippet_outer"> });</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer">};</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">style</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"less"</span> <span class="code-snippet__attr">scoped</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">style</span>></span></span></code></pre></section></pre><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: left;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">引入我们的工具栏的样式变成如下的样子。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: center;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><img data-ratio="0.5605700712589073" src="https://filescdn.proginn.com/7558f9c7f93a46e6f13e28b57ec289fa/3d568c43a8b00d3485a98b3c04bb0ff1.webp" data-type="jpeg" data-w="421"></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">quill在初始化时会读取#toolbar元素，并获取其子计数器的类名，对于ql-bold，quill会截取ql-之后的部分，并且和已经注册的handlers做匹配，上面的粗体斜体下划线删除存在注册好的handler。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">当我们单击工具栏中的元素时便会调用handler对富文本内容进行格式化。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">当我们需要添加一个本不存在的格式化效果时我们还需要在模块时，下面添加一个可以添加卡片的按钮，并添加其对应的处理程序。</span><span style="font-size: 14px;color: rgb(0, 0, 0);font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"></span></section><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"”container“"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"toolbar"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Tooltip</span> <span class="code-snippet__attr">content</span>=<span class="code-snippet__string">"添加卡片"</span> <span class="code-snippet__attr">placement</span>=<span class="code-snippet__string">"bottom"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">button</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"ql-card"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">Icon</span> <span class="code-snippet__attr">type</span>=<span class="code-snippet__string">"md-card"</span> /></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">button</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">Tooltip</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"editor"</span> <span class="code-snippet__attr">class</span>=<span class="code-snippet__string">"editor"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">template</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">import</span> Quill <span class="code-snippet__keyword">from</span> <span class="code-snippet__string">"quill"</span>;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">export</span> <span class="code-snippet__keyword">default</span> {</span></code><code><span class="code-snippet_outer"> mounted() {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> quill = <span class="code-snippet__keyword">new</span> Quill(<span class="code-snippet__string">"#editor"</span>, {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">theme</span>: <span class="code-snippet__string">"snow"</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">modules</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">toolbar</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">container</span>: <span class="code-snippet__string">"#toolbar"</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">handlers</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">card</span>: <span class="code-snippet__function"><span class="code-snippet__params">()</span> =></span> { <span class="code-snippet__comment">// 属性名称要与 ql-xxx 对应</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__built_in">console</span>.log(<span class="code-snippet__string">`点击了 card`</span>);</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> },</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">placeholder</span>: <span class="code-snippet__string">"请在此开始编辑..."</span></span></code><code><span class="code-snippet_outer"> });</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer">};</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">style</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"less"</span> <span class="code-snippet__attr">scoped</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">style</span>></span></span></code></pre></section></pre><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">接下来我们为这个按钮添加实际的效果。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">在我们Quill中，使用Blots表示节点，我们可以认为Blots对应Dom中的Node。当我们需要在quill中添加一自定义的Blots队列时，我们需要让其继承自Blots队列。</span><span style="color: rgb(0, 0, 136);font-size: 14px;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"></span></section><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">const</span> BlockEmbed = Quill.import(<span class="code-snippet__string">'blots/block/embed'</span>)</span></code><code><span class="code-snippet_outer"><span class="code-snippet__function"><span class="code-snippet__keyword">function</span> <span class="code-snippet__title">customCard</span>(<span class="code-snippet__params">node</span>) </span>{</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__comment">// 在一个节点中插入自定义的 dom</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> leftDiv = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'div'</span>)</span></code><code><span class="code-snippet_outer"> leftDiv.className = <span class="code-snippet__string">'media-container'</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> mediaDiv = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'div'</span>)</span></code><code><span class="code-snippet_outer"> mediaDiv.style[<span class="code-snippet__string">'background-image'</span>] = <span class="code-snippet__string">`url(<span class="code-snippet__subst">${value.image}</span>)`</span></span></code><code><span class="code-snippet_outer"> mediaDiv.className = <span class="code-snippet__string">'media'</span></span></code><code><span class="code-snippet_outer"> leftDiv.appendChild(mediaDiv)</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> rightDiv = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'div'</span>)</span></code><code><span class="code-snippet_outer"> rightDiv.className = <span class="code-snippet__string">'content-container'</span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> titleP = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'p'</span>)</span></code><code><span class="code-snippet_outer"> titleP.className = <span class="code-snippet__string">'title'</span></span></code><code><span class="code-snippet_outer"> titleP.innerText = value.title</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> authorP = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'p'</span>)</span></code><code><span class="code-snippet_outer"> authorP.className = <span class="code-snippet__string">'author'</span></span></code><code><span class="code-snippet_outer"> authorP.innerText = value.author</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> contentP = <span class="code-snippet__built_in">document</span>.createElement(<span class="code-snippet__string">'p'</span>)</span></code><code><span class="code-snippet_outer"> contentP.className = <span class="code-snippet__string">'content'</span></span></code><code><span class="code-snippet_outer"> contentP.innerText = value.content</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> rightDiv.appendChild(titleP)</span></code><code><span class="code-snippet_outer"> rightDiv.appendChild(authorP)</span></code><code><span class="code-snippet_outer"> rightDiv.appendChild(contentP)</span></code><code><span class="code-snippet_outer"> node.appendChild(leftDiv)</span></code><code><span class="code-snippet_outer"> node.appendChild(rightDiv)</span></code><code><span class="code-snippet_outer">}</span></code><code><span class="code-snippet_outer"><span class="code-snippet__comment">// 自定义卡片节点</span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__class"><span class="code-snippet__keyword">class</span> <span class="code-snippet__title">CardBlot</span> <span class="code-snippet__keyword">extends</span> <span class="code-snippet__title">BlockEmbed</span> </span>{</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">static</span> create(value) {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> node = <span class="code-snippet__keyword">super</span>.create()</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__comment">// 新建节点时传入的数据</span></span></code><code><span class="code-snippet_outer"> node.dataset.title = value.title</span></code><code><span class="code-snippet_outer"> node.dataset.image = value.image</span></code><code><span class="code-snippet_outer"> node.dataset.content = value.content</span></code><code><span class="code-snippet_outer"> node.dataset.author = value.author</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> customizeCard(node)</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> node.setAttribute(<span class="code-snippet__string">'contenteditable'</span>, <span class="code-snippet__literal">false</span>) <span class="code-snippet__comment">// 设置该节点不可编辑</span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">return</span> node</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">static</span> value(node) {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__comment">// 这里需要返回 create 函数中传入的数据</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">return</span> node.dataset</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer">}</span></code><code><span class="code-snippet_outer">CardBlot.blotName = <span class="code-snippet__string">'card'</span> <span class="code-snippet__comment">// quill 中的标记名称</span></span></code><code><span class="code-snippet_outer">CardBlot.tagName = <span class="code-snippet__string">'div'</span> <span class="code-snippet__comment">// dom 节点名称</span></span></code><code><span class="code-snippet_outer">CardBlot.className = <span class="code-snippet__string">'card'</span> <span class="code-snippet__comment">// dom 中真实的 class 名称</span></span></code><code><span class="code-snippet_outer">Quill.register(CardBlot)</span></code></pre></section></pre><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">同时我们还需要添加对应的处理程序。</span><span style="color: rgb(0, 0, 136);font-size: 14px;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"></span></section><pre style="color: rgb(0, 0, 0);text-align: start;background-color: rgb(255, 255, 255);"><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">const</span> CARD_INFO = {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">title</span>: <span class="code-snippet__string">'Quill 编辑器'</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">author</span>: <span class="code-snippet__string">'jhchen'</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">content</span>:</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__string">'Quill是一种现代的富文本编辑器，旨在实现兼容性和可扩展性。它由Jason Chen和Byron Milligan创建，并由Slab积极维护。 '</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">image</span>:</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__string">'http://neau-lib-static.test.upcdn.net/quill/resource/1576812308405-0.0544z7sqq9au-quill.png'</span></span></code><code><span class="code-snippet_outer">}</span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__keyword">new</span> Quill(<span class="code-snippet__string">'#editor'</span>, {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">theme</span>: <span class="code-snippet__string">'snow'</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">modules</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">toolbar</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">container</span>: <span class="code-snippet__string">'#toolbar'</span>,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">handlers</span>: {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">card</span>: <span class="code-snippet__function"><span class="code-snippet__params">()</span> =></span> {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">const</span> addRange = <span class="code-snippet__keyword">this</span>.quill.getSelection() || <span class="code-snippet__number">0</span> <span class="code-snippet__comment">// 获取当前光标选中的位置</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">this</span>.quill.insertEmbed(</span></code><code><span class="code-snippet_outer"> addRange,</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__string">'card'</span>,</span></code><code><span class="code-snippet_outer"> CARD_INFO,</span></code><code><span class="code-snippet_outer"> Quill.sources.USER</span></code><code><span class="code-snippet_outer"> ) <span class="code-snippet__comment">// 插入 card blots</span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">this</span>.$nextTick(<span class="code-snippet__function"><span class="code-snippet__params">()</span> =></span> {</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__keyword">this</span>.quill.setSelection(addRange + <span class="code-snippet__number">1</span>, Quill.sources.SILENT)</span></code><code><span class="code-snippet_outer"> }) <span class="code-snippet__comment">// 插入完成后将光标向后移动一位</span></span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> }</span></code><code><span class="code-snippet_outer"> },</span></code><code><span class="code-snippet_outer"> <span class="code-snippet__attr">placeholder</span>: <span class="code-snippet__string">'请在此开始编辑...'</span></span></code><code><span class="code-snippet_outer">})</span></code></pre></section></pre><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;"><span style="vertical-align: inherit;">至此我们就可以通过点击card图标来添加一个card了，但是这个card还没有添加样式，我们手动在显示card页面上添加样式就大功告变为。</span></section><section style="color: rgb(85, 85, 85);font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif;font-size: medium;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-top: 15px;margin-bottom: 15px;line-height: 1.75em;">通过这种方式，我们可以便可以在笔芯中添加任意类型的内容。</section><p><span style="font-size: 16px;">本文完~</span><br></p><p><span style="font-size: 16px;"><br></span></p><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"><img class="rich_pages" data-ratio="0.044444444444444446" data-s="300,640" data-type="jpeg" data-w="900" src="https://filescdn.proginn.com/029a0eb6a920fdb893f2afd474d0ef5d/4e711de1dcea59c11ceea7ae26128e3b.webp" style="box-sizing: border-box !important;visibility: visible !important;width: 677px !important;"></section><section style="margin-right: 8px;margin-left: 8px;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);text-align: left;"></section> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 32</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-aixin"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div></div></div></div><div class="comments_wrapper comments app_hide"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="善语结善缘，恶言伤人心">图片表情视频评价全部评论推荐 ZSSRichTextEditor富文本编辑器ZSSRichTextEditor 是个漂亮的富文本的所见即所得的编辑器，提供源代码语法高亮。Ueditor富文本编辑器UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器，具有轻量、可定制、注重ZSSRichTextEditor富文本编辑器ZSSRichTextEditor是个漂亮的富文本的所见即所得的编辑器，提供源代码语法高亮。conceptRTE富文本编辑器conceptRTE富文本编辑器是KevinRoth编写的跨浏览器富文本编辑器的演变。 ConceptRTE是<textarea>字段的WYSIWYG（所见即所得）编辑器替代。这是原始跨浏Quill富文本编辑器Quill是一个开源的富文本编辑器，旨在实现兼容性和可扩展性。特性：快速且轻量级语意标签标准化HTML支持Chrome,Firefox,Safari,andIE9+使用方法：<!--IncludUeditor富文本编辑器UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点。主要特点：轻量级：代码精简，加载迅速。定制化：全新的分层理念，满足多元化的需求。采用三层架RichTextEditoriOS富文本编辑器RichTextEditor 是支持 iPhone 和 iPad 的一个富文本编辑控件。 特性: ueditor-piggsoft富文本编辑器ueditor-piggsoft：对ueditor java工具包改写。特征： 将所用到的部分类改成普通的bean，去掉部分静态化，隐式加入spring，用DI来管理类。加入回调类，在文件在本地存储完RichTextEditoriOS富文本编辑器RichTextEditor是支持iPhone和iPad的一个富文本编辑控件。特性:BoldItalicUnderlineStrikeThroughFontFontsizeTextbackgroundQuill富文本编辑器Quill 是一个开源的富文本编辑器，旨在实现兼容性和可扩展性。特性：快速且轻量级语意标签标准化 H点赞 评论 收藏 分享 手机扫一扫分享分享 举报
下载APP