如何开发富文本编辑器?

Karon_
  • 1.1k

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

  1. 只用 JS 可以搞定吗?

  2. 有多麻烦?

  3. 有什么参考资料吗?

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

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

谢谢分享,好人一生平安!!:)

回复
阅读 9.4k
10 个回答
  1. Yes

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

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

  4. 同上

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

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

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

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

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

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

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

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

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

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

Markdown,你值得拥有。

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

walter211
  • 2
新手上路,请多包涵

求RN版编辑器

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏