富文本编辑器

在线demo预览，实现原理如下： 1）获取选区内容，如果没有选区则给整段文本设置款式。2）新增span标签包裹选区内容，为span标签减少style款式。3）优化DOM构造。比方demo中删除了空白节点、合并父子层级款式缩小层级嵌套。第一步：通过 www.getSelection() 获取选区,sel.isCollapsed判断选区的起始点和终止点是否位于一个地位 //返回一个 Selection 对象，示意用户抉择的文本范畴或光标的以后地位let sel = window.getSelection()let range = sel.getRangeAt(0) //返回一个蕴含以后选区内容的区域对象。if (sel.isCollapsed) { //没有框选设置整段文本款式 container.style[key] = val return}第二步：新增span标签包裹选区内容 const f = range.extractContents() //获取选取内容，并删除let span = document.createElement('span')span.style.setProperty(key, val)span.appendChild(f) //span标签包裹选取内容第三步：优化dom构造，替换选取节点内容 const keys = ['font-size', 'letter-spacing', 'font-weight', 'color']function getNodeStyle(n) { const style = n.style let ret = {} keys.filter(k => style[k] != null && style[k] != '').forEach(k => { ret[k] = style[k] }) return ret}function appendStyle(n, style) { for (let key in style) { n.style.setProperty(key, style[key]) }}function isSame(s1, s2) { return JSON.stringify(s1) == JSON.stringify(s2)}//找到文本,向上获取父节点的款式附加到本身，缩小span嵌套层级function flatNode(node) { let list = [] let pStyle = getNodeStyle(node) let last = null; function _each(n, s) { for (let i = 0; i < n.childNodes.length; i++) { let child = n.childNodes[i] if (child.nodeType == 3) { let newStyle = Object.assign({}, s, pStyle) if (last && isSame(newStyle, getNodeStyle(last))) { last.appendChild(child.cloneNode()) last.normalize() //相邻文本节点合并 } else { let span = document.createElement('span') span.appendChild(child.cloneNode()) appendStyle(span, newStyle) list.push(span) last = span; } } else { _each(child, Object.assign({}, s, getNodeStyle(child), pStyle)) } } } _each(node, {}) return list; }const nodeList = flatNode(span)let newF = document.createDocumentFragment()newF.replaceChildren(...nodeList)newF.normalize()range.insertNode(newF) //选区地位插入新节点

一、前言想必大家看到这个题目，心中不禁会浮现几个问题： 什么是富文本编辑器？富文本编辑器和游戏角色有什么关系？为什么是降级ing？什么是富文本编辑器——富文本编辑器集成了格局设置、媒体嵌入、社交互动等一系列编辑性能，所见即所得的给用户提供多元的展现成果。譬如论坛、社区、评论等等都用到了富文本编辑器。 和游戏角色的关系——富文本编辑器和游戏角色有很多共通之处，为了让富文本编辑器的介绍更加有代入感，本文将采纳游戏角色类比的形式进行解说。至于共通之处体现在哪里，前面将一一介绍。 为什么是降级ing——“降级ing”代表继续的进行时，本文的目标是聚焦富文本编辑器的共性问题，抛砖引玉，心愿能给大家提供一些解决思路。富文本编辑器始终在继续倒退中，而对于共性问题的摸索也从未停歇过。 本篇文章次要分为五个局部： 前言理解富文本编辑器富文本编辑器选型指南富文本编辑器如何扩大总结本文通过游戏角色类比的形式，心愿可能让富文本编辑器接触较少的开发者，都能够深刻的理解富文本编辑器。明天，咱们就一起来探讨下在富文本编辑器选型、扩大过程中遇到的共性问题。 二、理解富文本编辑器通常，咱们在抉择一款新的游戏之前，都会抉择先去官网、论坛理解游戏材料，从中筛选出无效信息，辅助咱们抉择适合的角色。 开发人员在接到富文本编辑器需要时，也不会轻易抉择其中一个，而是基于宏大的数据进行技术选型。这一节内容，就是为后续的选型所做的筹备工作。 2.1 角色格调 - 富文本编辑器状态游戏角色在开服上线前，都会默认装备不同的格调，则格调往往决定了咱们对于角色的初始印象。 富文本编辑器同样具备几种罕用的初始状态，经典模式、文档模式、内联模式，如下图所示： 那么从上图的比照中，能够看进去：富文本编辑器必不可少的组成部分是内容编辑区域。状态栏是用来记录编辑时的相干数据，能够暗藏。而工具栏则能够任意调整显示的地位、机会甚至切换至幕后操控（通过快捷键等形式触发）。 反之，咱们能够取得这样一条讯息：通过工具栏、内容区域、状态栏、菜单栏的不同组合能够赋予富文本编辑器不同的展现状态。 2.2 成长阶段 - 富文本编辑器倒退历程游戏中的角色都是可成长角色，在成长过程总会呈现一些瓶颈期，而跨过所谓的瓶颈期之后，角色的能力将呈现不言而喻的扭转。 在整个倒退过程中，富文本编辑器遇到过一些窘境。也正是因为这些窘境，能够将倒退历程分为L0、L1、L2和L3阶段。 L0->L1 L0，即初代的富文本编辑器，依赖于浏览器本身的execCommand，仅提供了无限的命令，实现最简略的性能。随着对款式越来越丰盛的要求，此时的富文本编辑器无奈满足需要，L1阶段的编辑器应运而生。L1的富文本编辑器采纳 自定义execCommand的计划，能够实现更加丰盛的富文本性能。 L1->L2 L0、L1的富文本编辑器，依然都是通过execCommand批改HTML。而不同浏览器中，对于同一表象的富文本，其HTML构造可能大不相同。 比如说 加粗 ，其HTML可能是加粗，可能是加粗，也可能是加粗等等。为了解决数据与视图无奈一一对应的问题，提出了自定义数据模型的概念。 自定义数据模型， 是富文本编辑器在富文本HTML-DOM树的根底上抽离进去的数据结构，雷同的数据结构能够保障渲染的HTML也是雷同的。自定义的命令间接控制数据模型，最终保障渲染的HTML文档的一致性。 对于雷同的HTML，不同的富文本编辑器最终出现的数据模型并不相同。以 Hello EditorName 为例，这里比照了Quill、ProseMirror、Draft、Slate的数据模型如下： L2阶段的富文本编辑器，通过抽离数据模型，解决了富文本中脏数据、简单性能难以实现的问题。通过数据驱动，能够更好的满足定制性能、跨端解析、在线合作等需要。 L2->L3 到L2阶段的编辑器，能够满足绝大部分的应用场景。那为什么前面又倒退出L3呢？ 这是因为，L0-L2的富文本编辑器都是基于浏览器的contentEditable，在批改数据模型时，往往须要对用户操作进行拦挡。对用户行为进行拦挡是很难管制的，再加上不同浏览器的兼容问题，很容易呈现bug。 为了解决contentEditable编辑不可控的问题，以 Google Docs 为代表的编辑器通过“自研排版引擎”步入了L3阶段。 自研排版引擎，彻底摈弃了contentEditable，通过自行管制光标地位、选区绘制、排版、监听输出等行为，实现和浏览器类似的编辑成果。“自研”，无疑具备了更高的扩展性。但与此绝对应的，其开发难度高、老本高、隐性问题多，在整体体验和性能上与原生浏览器渲染仍存在肯定差距，该阶段的编辑器还有一段路要走。 ps: There are a thousand Hamlets in a thousand people's eyes。 下述对于成长阶段的划分仅基于作者自己的认识。 回顾富文本编辑器的倒退历程，不难发现：富文本编辑器的构造脱离不了模型、视图、控制器这三大模块。如下图所示： 正如游戏角色所冲破的瓶颈期，富文本编辑器在L1跃迁至L2产生的扭转是：自定义数据模型的抽离；L2跃迁至L3的扭转则是：排版引擎的全新定义。 三、富文本编辑器选型指南当咱们曾经通过各种渠道理解到游戏背景、人物材料之后，下一步就要登录游戏创立游戏角色。此时，老手经常遇到的困扰无疑就是：如何抉择最合适本人的游戏角色。 相似的，对首次接触富文本编辑器的小伙伴来说，常提到的问题是：我该抉择哪款富文本编辑器？ 首先，能够依据你的业务需要，抉择对应阶段的富文本编辑器： 业务自身就是以富文本编辑器为外围，或者有协同编辑需要。—— 抉择L2、L3的编辑器扩大，或者自研编辑器。这里能够参考有道云笔记和语雀的计划，参考链接见文末。业务需要频繁迭代，交互设计要求较高的。—— 倡议抉择L2的编辑器。业务较为稳固，要求不高的。——L1、L2任选。如果业务场景比较复杂，难以评判之后的业务场景。——倡议抉择L2的编辑器。其次，在选定好阶段的根底上，依据我的项目架构（Vue、React、Augular等），以及富文本编辑器本身的特点，抉择适宜的编辑器就能够。能够从下述几个方面思考： 开源水平社区生态交互细节扩大反对度定制化老本以上，就是我梳理的选型套路。像是CKEditor、TinyMCE、Quill等都是交口称誉的，大家在选型的时候无妨能够思考下这些编辑器： 四、富文本编辑器如何扩大抉择适合的角色，仅仅只是游戏的开始。在游戏过程中，须要一直地调整游戏角色的技能树，将其后劲倒退到极限。 ...

前言半路接手的后盾我的项目，外面的富文本编辑器应用的kindeditor，总感觉有些臃肿，而且之前的人在封装组件后，应用起来有些bug，于是从网上搜了一下，决定应用wangeditor进行从新封装，这里将应用笔记留下，供当前查看，并分享。 1.根本应用这个没什么好说的了，去官网看文档就好了。呈现的几个小问题： 留神设置一下editor的z-index（editor.config.zIndex），因为他的默认z-index很大，很有可能遮挡住你的其余控件（如弹窗等）。应用接口获取曾经保留的富文本内容，并将内容v-bind到editor组件的时候，因为申请数据须要工夫，很大可能造成富文本框组件渲染时props还没获取到富文本内容，无奈在mounted事件中间接将内容回填到富文本框，这里我间接在editor组件中通过watch解决的。2.图片上传如果须要本人实现上传逻辑，可参考并配置editor.config.customUploadImg。我的状况是，咱们有本人的图片上传组件，心愿应用本人的组件进行上传，这时须要配置editor.config.uploadImgFromMedia办法，替换本地上传性能，在其中退出本人的逻辑。记着上传完结后调用editor.cmd.do办法将图片插入富文本内容中。 3.视频上传同上，咱们也心愿应用本人的组件替换原始的本地上传，可是文档中没有提供相似editor.config.uploadImgFromMedia的办法。没方法，只能应用自定义扩大Button菜单的形式实现了。思路如下： 配置中删除video菜单。退出自定义扩大Button菜单。减少配置一个editor.config.uploadVideoFromMedia函数，来实现咱们本人的逻辑。在自定义扩大Button菜单的类中： 自定义菜单沿用之前video菜单的款式，保障款式统一。在自定义菜单中，设置菜单点击事件去调用咱们本人配置的editor.config.uploadVideoFromMedia。这样，实现了视频上传中相似editor.config.uploadImgFromMedia的办法。 自定义扩大Button菜单的类的代码如下： //wangeditor的自定义视频上传菜单import E from 'wangeditor';const BtnMenu = E.BtnMenu;class NewVideoMenu extends BtnMenu{ constructor(editor){ const $elem = E.$( `<div class="w-e-menu" data-title="视频"> <i class="w-e-icon-play"></i> </div>` ); super($elem, editor); } clickHandler(){ this.editor.config.uploadVideoFromMedia(); } tryChangeActive(){}}export default NewVideoMenu;通过管制自定义菜单在editor的配置数组editor.config.menus中的插入地位，来调整菜单的显示地位。 4.上传的视频在富文本框没有光标、无奈删除的问题视频上传完结时： let videoHTML = '&nbsp;<video src="' + this.video_url + '" controls style="max-width:100%"></video>&nbsp;';this.editor.cmd.do('insertHTML', videoHTML);视频标签的两侧各加一个空格的转义字符&nbsp;，能够使光标在富文本的视频四周呈现，并能够删除视频。测试环境中测试无效。 结语大部分的需要下，咱们不须要应用性能过于简单的富文本控件，应用一个简洁轻量的富文本控件就好。wangEditor就是其中之一。除此之外，其可扩展性好，文档写的也不错，还是很举荐大家应用的。

点击获取工具>>DevExpress WinForms领有180+组件和UI库，能为Windows Forms平台创立具备影响力的业务解决方案。DevExpress WinForms能完满构建晦涩、好看且易于应用的应用程序。v20.2日前全新公布，此版本增强了PDF Viewer、富文本编辑器等控件性能！ PDF Viewer便签 PDF Viewer当初反对PDF便笺，您能够通过代码或通过控件的UI增加、编辑、删除便笺，以及为便笺增加正文。 Ribbon和BarsBackstageView - 反对DirectX WinForms BackstageViewControl当初反对DirectX硬件加速，这样能够确保动画更加晦涩和高效存储，特地是在高分辨率显示器上。 富文本编辑器跨表中断表行 表格行当初能够逾越多个页面，此版本增加一个新的行选项 - 'Allow row to break across pages'，要在代码中启用此性能，请应用TableRow.BreakAcrossPages属性。 OLE对象 WinForms富文本编辑器反对OLE对象，新API容许您拜访和编辑代码中的OLE对象，带有OLE对象的文档能够打印并导出为PDF。 表中的'Keep with Next' 和 'Widow/Orphan Control' Word Processing Document API 和WinForms / WPF RTF编辑器在显示、打印和导出具备表段落的文档时，将利用以下选项： Keep with NextWidow/Orphan Control脚注和尾注UI 富文本编辑器附带新的UI元素，旨在插入、导航和格式化文档脚注和尾注。 “表格填写”爱护 您当初能够在代码中或通过RTF编辑器的UI来治理“表格填写”爱护。 新格局 Word Processing Document API 和WinForms/WPF富文本编辑控件当初反对以下文件格式： DOCM（Microsoft Office Open XML启用了文档的格局）DOT（Microsoft Word 97-2003模板格局）DOTM（Microsoft Office Open XML启用的模板格局）DOTX（Microsoft Office Open XML模板格局）FlatOpc XML（存储在立体XML文件而不是ZIP包中的Microsoft Word XML文档）。文档渲染加强 ...