准备写个富文本编辑器，各位有什么想法？

[DemonQ]

基于 slate.js 开发。想咨询下大佬们：

1. 在富文本编辑器的开发中有些什么痛点
2. 在富文本编辑器的使用中有什么痛点
3. 你期望一个编辑器应该包含哪些？不仅是在使用上，还有开发中（比如说易于扩展之类）
4. 你见过哪些复合你的预期的富文本编辑器，是不是开源的？

看到都在说难的，就是因为有各种坑才希望大家列举一下，毕竟只说难解决不了问题。
另外我是基于 slate.js 开发的，所以有很多东西时不需要考虑的。各人认为 slate 就相当于是个 jq 之于 web 的工具。我们需要二次开发才能得到想要的。
最后，关于这个项目我已经开始了一个雏形： https://qishaoxuan.github.io/finxos/

[wezzard]

抽象層級複雜。排版引擎一個層級、programmtically 訪問的業務接口一個層級、用戶互動一個層級。

控制器加上裏面的子模塊，基本上三四萬行起。

[micean]

祝福楼主
想一想我就脑壳痛的东西

[huayumo]

没必要造轮子 https://summernote.org/这个好用的很,开源免费的

[Mogugugugu]

雨雀的富文本是非常棒的、供楼主参考，不开源。

[loading]

建议去了解一下这有多难，一个团队都疯掉的东西。
如果你这是指 vue.js 例子那种 markdown 就当我没说吧。

[iamdqncoder]

貌似这是个大坑

[ayase252]

想起这玩意睡觉都睡不好，真的，极其容易出 bug

[jydeng]

我也曾经想过，后来放弃了，项目上用 CKEDITOR+自制插件，满足了需求。

[mywaiting]

ProseMirror 了解一下

[murmur]

图表、富文本编辑器都是前端深坑，图表还可以做简单，富文本做简单就是没法用，最后还要用别人的

[nightwitch]

先考虑一下蒙文这种自上而下的排版以及从右到左的阿拉伯语该怎么排版。这两种是富文本的梦魇

[abcbuzhiming]

富文本编辑器是超级大坑，名列知乎“哪些是产品经理觉得简单实际上超级难的需求”的前 5 名

[justfortest]

曾经我业余写一个 web 聊天，自己搞消息编辑器，包括光标、复制、表情、图片、链接，真的脑壳疼，需要考虑的事情太多了，建议打消这个念头，编辑器不可能契合所有用户，基本都要自己修修改改。

[ericls]

首先你得 fight dom. 比如 composition state 这一类的东西 总之 dom 得和你的数据同步。

另外就是你得设计模型 如果纯文本好说 如果有结构就比较复杂了 关键是你还是得和 dom 做同步……

然后你得考虑一些只有渲染时候出现 但是不是数据的一部分的东西 来渲染比如语法高亮 白空 根据鼠标位置等外部数据的渲染

然后你得考虑协同 用 CRDT 还是 OT. 你的 flow control 等等 离线模式怎么设计


以上东西我整整花了一年

[Runningzs]

这个问题你应该问一下富文本编辑器大国：韩国人 （手动狗头）

[IDCFUN]

求问各位大大一个编辑器有关的问题，textarea 里有一段文字，我选中中间一部分，然后点击一个按钮在选中部分前边插入<a>，后边插入</a>，这个用原生 JS 如何 实现呢？谢谢啦。

[dremy]

勇士，祝好运

[ericls]

@IDCFUN textarea 不好。用 content editable。然后就好操作了

[IDCFUN]

@ericls 谢谢，我去了解一下。

[fancy111]

既然都自行开发富文本编辑器了，就不要用第三方的任何东西。直接手写 JS，原生。我看好你

[poisedflw]

曾经用过 Quill.js ，Slate.js ，可以说是超级大坑，slate 在 windows 的选区中有一大堆问题。
和 8L 一样，最终换了 ckeditor5 加一些定制化的插件，真的很香！

[zarte]

我需要个各个浏览器下生成的内容源码一样的编辑器，复制 word 内容进去也是生成一样的。

[SuperAllen]

@DemonQ 想了解下楼主有写编辑器想法的心路历程

[DemonQ]

@zarte 这个在我以前的项目中已经支持了，而且好像也不是那么难。。。

[340244120w]

参考 uditor 就知道了

[red2dog]

超级天坑。

[wanguorui123]

铁杵磨成针

[iConnect]

浏览器兼容性可以逼疯千百回

[tsui]

选型就选了天坑 Slate，good luck

[cuixiaoyan]

我截图之后，能直接粘贴到富文本编辑器里可以否。

[DemonQ]

@cuixiaoyan 这个问题就像是在问 vue 怎么实现图片上传一样。。。

[ipwx]

所见即所得的 Markdown 编辑器，包含公式等功能。参考 Typora。

如果你做出来了这么一款 HTML5 控件，提供 vue.js / ReactJS 接口，你就是开源大佬。

[gaigechunfeng]

我支持楼主。难的东西总要有人做，做出来就能出成果。
记得写好了给我们用用就行。
加油！

[lin]

可以在微信小程序上用么？

[vsitebon]

@ipwx https://github.com/marktext/muya 可以关注这个仓库，类 typora 渲染

[NonClockworkChen]

你好空啊

[jojuniori]

有现成的功能较全的轮子了： https://pandao.github.io/editor.md/

[myliang]

别问，干就完了

[mengkun]

看了一下 DEMO，设计理念似乎与这个有点像 https://editorjs.io/

[Charod]

祝你好运

[minglanyu]

坑真的多，加油盆友

[TangMonk]

不如研究下 Ckeditor

[Lightio]

现在看到富字开头的东西都以为是起名帖了，，，

[zxCoder]

@nightwitch 真有人用这种文字吗

[zhuangzhuang1988]

别.

[pomelotea2009]

别走两个极端：一种是完全 WYSIWYG 比如 Typora，另一种是分视图预览。建议光标所在的行显示 source code 不要预览，光标不在的行显示预览，这样可以避免很多问题

[HangoX]

我会说看成了富婆编辑器吗。。。

[msaionyc]

祝好运，我一个用的人都有阴影，这玩意 bug 太多了。
加油

[dtsdao]

https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/rich-editor.html

[thulof]

商业级别的很难，要考虑很多

[thulof]

试用了一下 demo，当进入多级列表的时候，无法退出多级列表了，再尝试几次撤销之后，白屏了。
vendors~app.chunk.9b186841b0c756e84f5f.js:81 TypeError: Cannot read property 'align' of undefined

[Felldeadbird]

给楼主一个方向。
在做好 PC 的同时，也可以做好移动用户。

[guudsltd]

弄个上传剪切板图片的功能

[whatsmyip]

支持开源造轮子

反馈一个 bug，添加超链接之后，想要取消，全选这部分文字之后焦点总是被自动定位到链接框

[derek80]

了解下： https://github.com/outline/rich-markdown-editor 也是基于 Slate.js 的。其实希望语雀的大部分功能可以实现，比如 plantuml 等。

[jaynos]

在 quote 块中, 光标放在"在 block 为空时"之前, 回车几次, 删除几次, 就可以复现一个白屏 bug

本来我也想给博客造个简单的富文本编辑器轮子, 最后我还是老实的用 textarea 了, 楼主保重

[jaynos]

鼠标 hover 在 header 的+上, 直接就炸了

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful

[zhw2590582]

勇气可嘉，但还真是不建议花时间研究这个，现在流行的富文本编辑器都不是一个人能完成的。

[adjusted]

我们内部有维护一个基于 prosemirror 和 react 的编辑器，有兴趣可以聊聊 wx 就是 id

[aa23]

我也在计划写一个，不过我想做的更偏向与在线文档方面

[iszengmh]

要防止注入

[DemonQ]

@whatsmyip 这是我的交互没想清楚咋搞。。。

[zarte]

@DemonQ 开源了吗？求连接。

[DemonQ]

@zarte 请仔细看题

[blackboom]

Slate.js 确实是天坑，最后还是要回归到 Draft.js

[xuanbg]

富文本编辑器是最大天坑，没有之一！

要说有什么痛点或者坑点，那倒是只有一个，就是：你永远也满足不了用户的需求……

[yuankui]

slatejs 是真的坑。
从 0.4 到 0.5 版本升级后，底层数据模型，上层 api 全 TMD 的换了。
准备研究下 proseMirror

[zhzbql]

不管是勇气可嘉还是真大佬，先占座留个名，万一以后火了呢

[mauve]

迎难而上，🐛

[wuhhhh]

开头以为是换皮 看底下评论感觉难得一批 心想没什么难啊 都是抄 翻上去一看 自己写 打扰了 前排留名等一个大佬

[XTTX]

@DemonQ 我最近在研究富文本编辑器. 如果要做点不同的东西我推荐一些奇特的排版功能. table 都有了, 可以试试做平行 tab. 别人用 BBcode 实现的一些复杂排版. 我正在规划的一个产品就有这种图文并茂的排版需求

[DemonQ]

@XTTX 以前的产品做过这种需求，我现在的结构正在规划这种情况，有兴趣的话可以从 github 加下我 qq 来讨论下~

[redeyesovo]

就叫富有富文本编辑器吧。🐶

[qile1]

web 端所有的富文本有个缺点是无法自动分页，尤其是有很大一部分专业网站的报告输入的时候需要 A4 或者 B5 打印时候，长文本就没法分页了，现在一些商业产品也必须安装控件才能实现分页功能，楼主能解决我愿意花钱弄下

[jss]

富文本编辑器，我只服 Froala，其他都是垃圾…

[lithbitren]

浏览器兼容性是真的天坑

[Hanser002]

题主做的蛮好的- -

[zhdsuperm]

bug：ctrl + A 再用输入法输入文字，直接奔溃

[enther]

@ericls 您好，我们刚刚走过你说的每一个坑。。。介意加个微信聊聊吗？ 412078668