富文本编辑器相信大家都用过，相关的开源项目也很多，虽然具体的实现不一样，但是大部分都是使用DOM实现的，但其实还有一种实现方式，那就是使用HTML5的canvas，本文会带大家使用canvas简单实现

这次来聊一聊用了TinyMCE富文本组件编辑之后的图文信息文章和增加文件链接如何实现预览的功能需求。不能停下，停下就会影响老板买豪宅提豪车的时间，生活不易，卑微至极啊

textarea一般是用来实现比较简单的富文本功能（@和#，基本上是评论功能的实现方案），如果作为创作者工具的话，一般会组合其他的表单功能实现。比如Instagram，Shopee的KOL创作工具。 contentEditable实际上是大家最为喜闻乐见的富文本编辑器实现方案，…

HTML元素中有个特殊的属性contentEditable，此属性可以将HTML节点变为可编辑的元素，以实现某些需要特殊输入需求（比如想要自己鲁一个富文本等）。但是，如果你是第一次在react中使用，那么多半会遇到我标题所述的坑。具体就是想把一个组件做成可输入的（别问为啥不用i…

当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美🐶，咳咳。 一直以来，我都觉得这个属性只是为了存在而存在的，然而在今天接到的需求之后，我发现这个感觉没什么用的属性竟然完美地解决了我的需…

富文本编辑器，能够使web页面像word一样，实现对文本的编辑，通常应用在一些文本处理比较多的系统中。现在业界有很多成熟的富文本编辑器，比如功能齐全啊TinyMCE、轻量高效的wangEditor、百度出品的UEditor等。富文本编辑器很多，但是却很少思考如何从零开始，实现一…

富文本编辑器一直是前端领域的一个天坑，但若不是深入接触编辑器开发的工程师，却不一定清楚富文本编辑器到底坑在哪里，作为有幸和编辑器打了一年交道的前端，今天来聊聊Web富文本编辑器的那些事。 这是使用最久的传统富文本编辑器实现方式，这种实现方式的优势很明显，contentedita…

之前初探execCommand方法，就发现会有很多奇奇怪怪的问题，虽然看似都能解决，但每个问题的成本都会大大增加，该方法不是可控的，在这过程操作dom就必不可免，项目庞大起来可能会感觉不是在开发而是在

我们知道form表单中的input、textarea之类标签是支持内容可编辑的，但并不支持富文本，如果在这些标签里粘贴带格式的内容，会被去格式，只保留文本内容。如果想设置可编辑富文本，有两种方式： 嵌入空页面的iframe，并设置designMode属性值为“on”，这样整个文…