资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/富文本编辑器小结

富文本编辑器小结

CatalpaFlat / 2429人阅读

摘要：自己写一个富文本编辑器。无处不在的坑首先端的富文本编辑器，基本命令参照命令文档，兼容性的问题就不说了，大家都知道，主要说说一些开发了才能知道的坑。

近况

最近由于公司业务上的需求，我们需要一个自己的编辑器来编写我们得到APP里面的订阅文章，为什么需要自己的编辑器，主要是因为用第三方的编辑器很难完成公司定制化的需求，比如：排版上我们想要更好看点，统一，因为各个订阅专栏编辑的人不一样，容易造成各种不同的审美差异，解决方案有2种：

采用一个可定制化的第三方富文本编辑器，然后自己写插件来满足自己的要求。

自己写一个富文本编辑器。

最后和团队的人商量决定，自己撸一个吧，因为使用第一种方案，依赖于别人的开源插件，总是不太放心，而且害怕到时候有什么问题，要研究他们的源码，那就跟自己写差不多多少，而且我们自己撸一个，并非要写一个非常通用，可以开源的富文本编辑器，我们只需要针对我们自己业务，写一个定制化符合公司使用的编辑器就行了。综上，我开始了这次非常愉快（坑爹）的编辑器之旅！！！

先看效果图，如图所示，如果有订阅了我们得到APP里面专栏文章的，可以对比下，现在和8月的文章就能看出来了。

无处不在的坑

首先web端的富文本编辑器，基本命令参照documen命令文档，兼容性的问题就不说了，大家都知道，主要说说一些开发了才能知道的坑。

div还是p

可编辑模式下（是否支持可编辑可以用[HTMLElement.isContentEditable
](https://developer.mozilla.org... 命令来查看的），如果内部没有P标签这个初始化标签，编写的时候，换行给你添加的标签将会是div，如图所示：

这里就已经不太符合我们要求了，不想要各种div标签在文本外面，语义化来说，我们应该用p标签才对。

解决方案： 初始化添加一个p标签，并且里面加入一个br


删除也要小心翼翼

这个坑跟第一个同样的原因，只是表现形式不同，如果你开始删除你的编辑文本，删除完之后，整个可编辑元素，就变成空了，意味着，又没有初始化的p标签，那么你在添加文字的时候，就会跟上面的问题一样了。

解决方案：监听删除动作，判断内部还是否有子元素，没有初始化p标签

行内标签很有个性

添加文本需要的行内标签，例如： bold，italic，underline，subscript等等，可以任意添加和取消，一般来说没有任何问题，需要注意的是，你不能随意更改相关标签的css特殊样式，炒个栗子：bold在chrome里面添加一个b标签，浏览器样式，font-weight：bolder;，如果你自己css给覆盖掉，变成 font-weight: normal;，那么再次点击，应该取消的时候，不会成功的。原因我没有找到文档，据我推测，因为是取消的时候，判断条件为是否有相关命令的css样式，并不是单纯的文字外部标签名称。

formatBlock跟你说，不是所有的牛奶都是特仑苏！

使用formatBlock来添加或者更换文字的外标签时，要特别注意--BLOCKQUOTE这个东东,
document.execCommand("formatBlock", false, "

")，它能添加或者更换，但是要取消他的时候，就不起作用了。

解决方案： 在执行代码的时候，多加一个判断，判断当前选中文字的外标签是什么，再决定是需要执行什么命令。

let Range = document.getSelection().getRangeAt(0),
     formatName = Range.commonAncestorContainer.parentElement.nodeName === "BLOCKQUOTE" ? "P" : "BLOCKQUOTE";
document.execCommand("formatBlock", false, formatName)
removeFormat并不是万能的

清楚格式这个命令，主要会清除掉附带在标签上的内联样式，也就是style，但是不会清除class名称，这意味着，从外部粘贴过来的文本，如果不幸的ClassName和你的css里面的ClassName重复了，就会带上你的css样式。而且也不会清楚里面内联元素标签，什么意思呢？就是span都还是存在的，从原理上来说这个不影响最后的显示，但没有必要需要这些个标签，很容易产生其他的问题。

解决方案：执行清楚格式操作的时候，多加一些操作，把无用的样式，标签和ClassName全部干掉。（此处必须有杀气！）

其他

至于其他的很多命令（indent，fontSize，fontColor...），我这里没有使用，也不知道是否有坑，原因是前面说到的样式统一，保证美观，不支持内联样式，由统一的css样式渲染。

GPU服务器 私有云 富文本编辑器 富文本web编辑器 富文本 百度富文本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50192.html

相关文章

  • 富文本编辑器小结

    摘要：自己写一个富文本编辑器。无处不在的坑首先端的富文本编辑器，基本命令参照命令文档，兼容性的问题就不说了，大家都知道，主要说说一些开发了才能知道的坑。 近况 最近由于公司业务上的需求，我们需要一个自己的编辑器来编写我们得到APP里面的订阅文章，为什么需要自己的编辑器，主要是因为用第三方的编辑器很难完成公司定制化的需求，比如：排版上我们想要更好看点，统一，因为各个订阅专栏编辑的人不一样，容易...

    ZHAO_ 评论0 收藏0

  • 如何设计高扩展的在线网页制作平台

    摘要：如何设计高扩展的在线网页制作平台本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。市面上可使用的一些在线制作推广平台制作的页面又不能很好地结合到自己的业务流程里面。 如何设计高扩展的在线网页制作平台 本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。体验地址: https://godspen.ym...

    dreamans 评论0 收藏0

  • 原生富文本编辑器

    摘要：富文本选区为了更精细化控制富文本编辑器的内容，可以使用方法，返回对象。 前言 前不久面某厂，负责人所在部门是做在线文档的，最后几个提问都是围绕离线存储和富文本编辑相关问题，在这块有点懵，之前没有接触过富文本编辑器原理，在页面光标能在文本之间随意选择，删除和输入，一直以为是一种hack技术，原来页面本身有的一个属性，配合实现还有js的方法和属性。在这简单记录一下。 实现原理 实现富文本效...

    TerryCai 评论0 收藏0

  • 原生富文本编辑器

    摘要：富文本选区为了更精细化控制富文本编辑器的内容，可以使用方法，返回对象。 前言 前不久面某厂，负责人所在部门是做在线文档的，最后几个提问都是围绕离线存储和富文本编辑相关问题，在这块有点懵，之前没有接触过富文本编辑器原理，在页面光标能在文本之间随意选择，删除和输入，一直以为是一种hack技术，原来页面本身有的一个属性，配合实现还有js的方法和属性。在这简单记录一下。 实现原理 实现富文本效...

    Simon 评论0 收藏0

  • 开发富文本编辑器的一些经验教训

    摘要：当然，这只是结合自己项目的工程结构和特点设置的一套使用方式，仅供参考开发富文本编辑器的教训由于项目的时间较紧张，我在页面上应用了框架的背景下，想当然的想要把也应用于富文本编辑器的开发，事实证明这是不太可行的。 此文已由作者刘诗川授权网易云社区发布。 欢迎访问网易云社区，了解更多网易技术产品运营经验。 最近我们的产品有一个需求是要在PC端做一个面向用户的书评编辑器，让用户和编辑在蜗牛读书...

    mtunique 评论0 收藏0

发表评论

登陆后可评论

0条评论

CatalpaFlat

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<