javascript - 如何开发富文本编辑器？

Question

如题，最近在搞富文本编辑器，网上的富文本编辑器都无法满足产品的要求，所以想自己动手做一个，但是又不太清楚富文本编辑器是如何开发的，对于这个，有几个疑问：

1. 只用 JS 可以搞定吗？

2. 有多麻烦？

3. 有什么参考资料吗？

4. 是不是已经有什么解决方案了？

5. 是不是应该前后端一起配合才能开发出来？

谢谢分享，好人一生平安！！：）

Answer 1

1. Yes

2. 其实富文本编辑器主要就是设计模式中命令模式的一种具体应用，把编辑器中的每一个单一功能做成一个命令（Command），然后绑定按钮/快捷键去触发对应的命令（比如利用自定义事件来触发），每一个命令针对编辑器中的内容进行操作，生成新的内容然后替换/更改之前的内容。

3. 最好的参考资料就是各种开源的实现，读源码即可

4. 同上

5. 不需要，除非某些特定的操作要读取/写入后端的数据，比如下载模板/上传附件等

Answer 2

1个编辑器, 功能全一点的, 上万行代码, 真有必要自己开发一个?...github上面找个开源的, 改改就好了...

而且写编辑器很吃js的基本功, "又不太清楚富文本编辑器是如何开发的", 这种情况下, 不是泼冷水, 很难写的出来, 就算写出来, 页是一堆bug

Answer 3

kindeditor已经够强大了吧，自己开发一个感觉很费劲

Answer 4

ueditor链接描述这个已经有成熟的东西了，没有必要去造轮子了。如果有需要可以在这个基础上做插件之类的。

Answer 5

不需要后端配合，除非你需要上传图片这样的功能。所见即所得的富文本编辑器开源的已经有很多。如果你真的想了解，可以下载代码读一遍。

Answer 6

Markdown，你值得拥有。

Answer 7

核心就是 document.execCommand，可以参看 MDN上的文档;
别的用到比较多的就是 window.getSelection() 这些方法；

需要后端配合的，一般就是上传图片，保存、读取内容这些；

但是你这些问题都没搞定，自己造轮子 是不是有点急了？

建议你有时间的话，先看看现有的成熟的富文本编辑器的代码，看看他们是怎么实现的，比如百度的UEditor

Answer 8

重头写一个不合算，还是从已有进行改造，加定制化的内容更好些。

Answer 9

可参考 https://github.com/wangfupeng1988/wangEditor/ 的源码。
不过提醒一下，里面有各种坑，去知乎搜一下就知道了