定制富文本编辑器-轻识

定制富文本编辑器

很多时候

并不能满足我们对文本输入的需求，当我们需要为输入的文本添加格式时，我们需要使用像quill这样的富文本编辑器来完成富文本的输入。</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><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><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;">接下来将会讲解如何在quill的基础上实现定制化的富文本编辑器。</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;">简介</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;">一个好的富文本编辑器的标志就是它能够支持多少种格式，而羽毛笔则支持无限种类的格式。你可以在羽毛笔上自定义任意种类的文本。并且，如果你不想自定义个任何功能，那么羽毛笔也是极易上手的</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>var quill = new Quill('#editor', {</code><code> modules: { toolbar: true },</code><code> theme: 'snow'</code><code>})</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;">如何在Quill上定制功能</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;">quill提供了非常细粒度，定义良好的API，我们可以在此基础之上进行定制化开发自己的富文本编辑器。（环境为vue + iview，使用iview进行辅助样式开发）<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;">首先我们从最简单的demo入手。<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><template></code><code> <div id="editor" class="editor"></div></code><code></template></code><code><script></code><code>import Quill from "quill";</code><code>export default {</code><code> mounted() {</code><code> const quill = new Quill("#editor", {</code><code> theme: "snow",</code><code> placeholder: "请在此开始编辑..."</code><code> });</code><code> }</code><code>};</code><code></script></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;">这是一个替代参数条件下的一个富文本编辑器，我们首先对Toolbar进行替换，Toolbar是modules的一部分。<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"> <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;">我们需要在新建quill实例的时候覆盖原来的工具栏，并使用自己的工具栏元素。<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;"><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><template></code><code> <div class="container"></code><code> <div id="toolbar"></code><code> <Tooltip content="加粗" placement="bottom"></code><code> <button class="ql-bold"></button></code><code> </Tooltip></code><code> <Tooltip content="倾斜" placement="bottom"></code><code> <button class="ql-italic"></button></code><code> </Tooltip></code><code> <Tooltip content="下划线" placement="bottom"></code><code> <button class="ql-underline"></button></code><code> </Tooltip></code><code> <Tooltip content="删除线" placement="bottom"></code><code> <button class="ql-strike"></button></code><code> </Tooltip></code><code> </div></code><code> <div id="editor" class="editor"></div></code><code> </div></code><code></template></code><code><script></code><code>import Quill from "quill";</code><code>export default {</code><code> mounted() {</code><code> const quill = new Quill("#editor", {</code><code> theme: "snow",</code><code> modules: {</code><code> toolbar: "#toolbar"</code><code> },</code><code> placeholder: "请在此开始编辑..."</code><code> });</code><code> }</code><code>};</code><code></script></code><code><style lang="less" scoped></style></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;">引入我们的工具栏的样式变成如下的样子。</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;">quill在初始化时会读取#toolbar元素，并获取其子计数器的类名，对于ql-bold，quill会截取ql-之后的部分，并且和已经注册的handlers做匹配，上面的粗体斜体下划线删除存在注册好的handler。</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;">当我们单击工具栏中的元素时便会调用handler对富文本内容进行格式化。</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="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;"></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><template></code><code> <div class="”container“"></code><code> <div id="toolbar"></code><code> <Tooltip content="添加卡片" placement="bottom"></code><code> <button class="ql-card"></code><code> <Icon type="md-card" /></code><code> </button></code><code> </Tooltip></code><code> </div></code><code> <div id="editor" class="editor"></div></code><code> </div></code><code></template></code><code><script></code><code>import Quill from "quill";</code><code>export default {</code><code> mounted() {</code><code> const quill = new Quill("#editor", {</code><code> theme: "snow",</code><code> modules: {</code><code> toolbar: {</code><code> container: "#toolbar",</code><code> handlers: {</code><code> card: () => { // 属性名称要与 ql-xxx 对应</code><code> console.log(`点击了 card`);</code><code> }</code><code> }</code><code> }</code><code> },</code><code> placeholder: "请在此开始编辑..."</code><code> });</code><code> }</code><code>};</code><code></script></code><code><style lang="less" scoped></style></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;">接下来我们为这个按钮添加实际的效果。</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;">在我们Quill中，使用Blots表示节点，我们可以认为Blots对应Dom中的Node。当我们需要在quill中添加一自定义的Blots队列时，我们需要让其继承自Blots队列。<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;"></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>const BlockEmbed = Quill.import('blots/block/embed')</code><code>function customCard(node) {</code><code> // 在一个节点中插入自定义的 dom</code><code> const leftDiv = document.createElement('div')</code><code> leftDiv.className = 'media-container'</code><code> const mediaDiv = document.createElement('div')</code><code> mediaDiv.style['background-image'] = `url(${value.image})`</code><code> mediaDiv.className = 'media'</code><code> leftDiv.appendChild(mediaDiv)</code><code> </code><code> const rightDiv = document.createElement('div')</code><code> rightDiv.className = 'content-container'</code><code> </code><code> const titleP = document.createElement('p')</code><code> titleP.className = 'title'</code><code> titleP.innerText = value.title</code><code> </code><code> const authorP = document.createElement('p')</code><code> authorP.className = 'author'</code><code> authorP.innerText = value.author</code><code> </code><code> const contentP = document.createElement('p')</code><code> contentP.className = 'content'</code><code> contentP.innerText = value.content</code><code> </code><code> rightDiv.appendChild(titleP)</code><code> rightDiv.appendChild(authorP)</code><code> rightDiv.appendChild(contentP)</code><code> node.appendChild(leftDiv)</code><code> node.appendChild(rightDiv)</code><code>}</code><code>// 自定义卡片节点</code><code>class CardBlot extends BlockEmbed {</code><code> static create(value) {</code><code> const node = super.create()</code><code> // 新建节点时传入的数据</code><code> node.dataset.title = value.title</code><code> node.dataset.image = value.image</code><code> node.dataset.content = value.content</code><code> node.dataset.author = value.author</code><code> </code><code> customizeCard(node)</code><code> </code><code> node.setAttribute('contenteditable', false) // 设置该节点不可编辑</code><code> </code><code> return node</code><code> }</code><code> static value(node) {</code><code> // 这里需要返回 create 函数中传入的数据</code><code> return node.dataset</code><code> }</code><code>}</code><code>CardBlot.blotName = 'card' // quill 中的标记名称</code><code>CardBlot.tagName = 'div' // dom 节点名称</code><code>CardBlot.className = 'card' // dom 中真实的 class 名称</code><code>Quill.register(CardBlot)</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="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;"></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>const CARD_INFO = {</code><code> title: 'Quill 编辑器',</code><code> author: 'jhchen',</code><code> content:</code><code> 'Quill是一种现代的富文本编辑器，旨在实现兼容性和可扩展性。它由Jason Chen和Byron Milligan创建，并由Slab积极维护。 ',</code><code> image:</code><code> 'http://neau-lib-static.test.upcdn.net/quill/resource/1576812308405-0.0544z7sqq9au-quill.png'</code><code>}</code><code> </code><code>new Quill('#editor', {</code><code> theme: 'snow',</code><code> modules: {</code><code> toolbar: {</code><code> container: '#toolbar',</code><code> handlers: {</code><code> card: () => {</code><code> const addRange = this.quill.getSelection() || 0 // 获取当前光标选中的位置</code><code> this.quill.insertEmbed(</code><code> addRange,</code><code> 'card',</code><code> CARD_INFO,</code><code> Quill.sources.USER</code><code> ) // 插入 card blots</code><code> this.$nextTick(() => {</code><code> this.quill.setSelection(addRange + 1, Quill.sources.SILENT)</code><code> }) // 插入完成后将光标向后移动一位</code><code> }</code><code> }</code><code> }</code><code> },</code><code> placeholder: '请在此开始编辑...'</code><code>})</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;">至此我们就可以通过点击card图标来添加一个card了，但是这个card还没有添加样式，我们手动在显示card页面上添加样式就大功告变为。</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>本文完~ <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>浏览
 21<div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan">点赞
 </div><div class="gap"></div><a href="#comments" class="item">评论
 </a><div class="item qinglite-collect">收藏
 </div><div class="item qinglite_share">分享
 <div class="qrcode-modal"><img src="/api/pub/ewm" alt="">手机扫一扫分享</div></div><div class="expand"></div><div class="item jubao qinglite-jubao">举报</div></div></div></div><div class="comments_wrapper comments"><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="输入评论">

图片

表情