由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好，于是决定采用这个库实现。

1、50行代码撸一个简易编辑器 现有的富文本编辑器，底层是基于 contenteditable+document.execCommand，使用API可参考mdn文档： contenteditable可

在开始实现简单的富文本编辑器之前，要先了解富文本中涉及到的Selection选区和Range范围的概念。

输入框的场景实在太多太多了，但我们偶尔也会碰到一些个性化的需求，今天给大家介绍的就是类似上面这样，可以显示标签的输入框。 先来假设一下我们的输入需求： 能对输入的内容进行校验、可以在任意位置插入...

CodeMirror 是一个通过JS实现的Web代码编辑器组件，它带有大量的语言模式、CSS主题和很多高级的插件功能，还允许进一步扩展，总之它非常强大。

最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。 是不是觉得很神奇？接下来我会一步步讲解这里面的功能都是如何实现的。 传统的输入框都是使用 <…

一、背景 说到富文本，就像现在在使用的这个富文本一样。这个插入，就像点击工具栏，插入图片或者表格。 业务需求是做一个邮件模板，前端书写某些参数用作占位符，后端将占位符替换成具体的内容。

在日常生活中我们会经常接触到各种各样的文档格式和形式，其中富文本在文档格式中扮演了重要角色。这篇文章将会为大家介绍前端富文本的一些基础知识以及简单的实现思路。

需求 1、文案可编辑，能实时将输入的{{xx}}转化为tag 2、用户点击位置即光标定位处 3、可插入标签，需要在插入前记录光标位置 4、支持选中区域（即蓝标）直接替换为tag 看到需求第一眼，想到用