这是一个创建于 1708 天前的主题，其中的信息可能已经有所发展或是发生改变。
基于 slate.js 开发。想咨询下大佬们：
- 在富文本编辑器的开发中有些什么痛点
- 在富文本编辑器的使用中有什么痛点
- 你期望一个编辑器应该包含哪些？不仅是在使用上，还有开发中（比如说易于扩展之类）
- 你见过哪些复合你的预期的富文本编辑器，是不是开源的？
第 1 条附言 · 2020-03-19 14:19:40 +08:00
看到都在说难的，就是因为有各种坑才希望大家列举一下，毕竟只说难解决不了问题。
另外我是基于 slate.js 开发的，所以有很多东西时不需要考虑的。各人认为 slate 就相当于是个 jq 之于 web 的工具。我们需要二次开发才能得到想要的。
最后，关于这个项目我已经开始了一个雏形： https://qishaoxuan.github.io/finxos/
另外我是基于 slate.js 开发的，所以有很多东西时不需要考虑的。各人认为 slate 就相当于是个 jq 之于 web 的工具。我们需要二次开发才能得到想要的。
最后，关于这个项目我已经开始了一个雏形： https://qishaoxuan.github.io/finxos/
 |
1
wezzard 2020-03-19 12:01:20 +08:00
抽象層級複雜。排版引擎一個層級、programmtically 訪問的業務接口一個層級、用戶互動一個層級。
控制器加上裏面的子模塊，基本上三四萬行起。 |
 |
2
micean 2020-03-19 12:05:25 +08:00
祝福楼主
想一想我就脑壳痛的东西 |
 |
3
huayumo 2020-03-19 12:05:58 +08:00  3
|
 |
4
Mogugugugu 2020-03-19 12:19:12 +08:00
雨雀的富文本是非常棒的、供楼主参考，不开源。
|
 |
5
loading 2020-03-19 12:21:55 +08:00 via Android
建议去了解一下这有多难，一个团队都疯掉的东西。
如果你这是指 vue.js 例子那种 markdown 就当我没说吧。 |
 |
6
iamdqncoder 2020-03-19 12:27:10 +08:00
貌似这是个大坑
|
 |
7
ayase252 2020-03-19 12:28:25 +08:00 via iPhone
想起这玩意睡觉都睡不好，真的，极其容易出 bug
|
 |
8
jydeng 2020-03-19 12:28:36 +08:00
我也曾经想过，后来放弃了，项目上用 CKEDITOR+自制插件，满足了需求。
|
 |
9
mywaiting 2020-03-19 12:29:19 +08:00
ProseMirror 了解一下
|
 |
10
murmur 2020-03-19 12:35:22 +08:00
图表、富文本编辑器都是前端深坑，图表还可以做简单，富文本做简单就是没法用，最后还要用别人的
|
 |
11
nightwitch 2020-03-19 12:36:58 +08:00
先考虑一下蒙文这种自上而下的排版以及从右到左的阿拉伯语该怎么排版。这两种是富文本的梦魇
|
 |
12
abcbuzhiming 2020-03-19 12:37:36 +08:00 4
富文本编辑器是超级大坑，名列知乎“哪些是产品经理觉得简单实际上超级难的需求”的前 5 名
|
 |
13
justfortest 2020-03-19 12:37:56 +08:00 via Android
曾经我业余写一个 web 聊天，自己搞消息编辑器，包括光标、复制、表情、图片、链接，真的脑壳疼，需要考虑的事情太多了，建议打消这个念头，编辑器不可能契合所有用户，基本都要自己修修改改。
|
 |
14
ericls 2020-03-19 12:41:56 +08:00 via iPhone 4
首先你得 fight dom. 比如 composition state 这一类的东西 总之 dom 得和你的数据同步。
另外就是你得设计模型 如果纯文本好说 如果有结构就比较复杂了 关键是你还是得和 dom 做同步…… 然后你得考虑一些只有渲染时候出现 但是不是数据的一部分的东西 来渲染比如语法高亮 白空 根据鼠标位置等外部数据的渲染 然后你得考虑协同 用 CRDT 还是 OT. 你的 flow control 等等 离线模式怎么设计 以上东西我整整花了一年 |
 |
15
Runningzs 2020-03-19 12:43:00 +08:00
这个问题你应该问一下富文本编辑器大国：韩国人 （手动狗头）
|
 |
16
IDCFUN 2020-03-19 12:45:10 +08:00
求问各位大大一个编辑器有关的问题，textarea 里有一段文字，我选中中间一部分，然后点击一个按钮在选中部分前边插入<a>，后边插入</a>，这个用原生 JS 如何 实现呢？谢谢啦。
|
 |
17
dremy 2020-03-19 12:58:49 +08:00 via iPhone
勇士，祝好运
|
 |
20
fancy111 2020-03-19 13:18:42 +08:00 1
既然都自行开发富文本编辑器了，就不要用第三方的任何东西。直接手写 JS，原生。我看好你
|
 |
21
poisedflw 2020-03-19 13:20:16 +08:00 1
曾经用过 Quill.js ，Slate.js ，可以说是超级大坑，slate 在 windows 的选区中有一大堆问题。
和 8L 一样，最终换了 ckeditor5 加一些定制化的插件，真的很香！ |
 |
22
zarte 2020-03-19 13:45:44 +08:00
我需要个各个浏览器下生成的内容源码一样的编辑器，复制 word 内容进去也是生成一样的。
|
 |
23
SuperAllen 2020-03-19 13:50:06 +08:00 via Android
@DemonQ 想了解下楼主有写编辑器想法的心路历程
|
 |
25
340244120w 2020-03-19 14:29:45 +08:00 via iPhone
参考 uditor 就知道了
|
 |
26
red2dog 2020-03-19 14:33:39 +08:00
超级天坑。
|
 |
27
wanguorui123 2020-03-19 14:59:59 +08:00
铁杵磨成针
|
 |
28
iConnect 2020-03-19 15:01:02 +08:00 via Android
浏览器兼容性可以逼疯千百回
|
 |
29
tsui 2020-03-19 15:28:10 +08:00
选型就选了天坑 Slate，good luck
|
 |
30
cuixiaoyan 2020-03-19 15:28:48 +08:00
我截图之后，能直接粘贴到富文本编辑器里可以否。
|
 |
31
DemonQ OP @cuixiaoyan 这个问题就像是在问 vue 怎么实现图片上传一样。。。
|
 |
32
ipwx 2020-03-19 15:33:55 +08:00
所见即所得的 Markdown 编辑器，包含公式等功能。参考 Typora。
如果你做出来了这么一款 HTML5 控件，提供 vue.js / ReactJS 接口，你就是开源大佬。 |
 |
33
gaigechunfeng 2020-03-19 15:44:02 +08:00
我支持楼主。难的东西总要有人做，做出来就能出成果。
记得写好了给我们用用就行。 加油！ |
 |
34
lin 2020-03-19 15:53:04 +08:00
可以在微信小程序上用么？
|
 |
35
vsitebon 2020-03-19 16:31:05 +08:00
@ipwx https://github.com/marktext/muya 可以关注这个仓库，类 typora 渲染
|
 |
36
NonClockworkChen 2020-03-19 17:11:34 +08:00
你好空啊
|
 |
37
jojuniori 2020-03-19 17:13:24 +08:00
有现成的功能较全的轮子了： https://pandao.github.io/editor.md/
|
 |
38
myliang 2020-03-19 17:47:10 +08:00 via Android
别问，干就完了
|
 |
39
mengkun 2020-03-19 18:15:40 +08:00 1
看了一下 DEMO，设计理念似乎与这个有点像 https://editorjs.io/
|
 |
40
Charod 2020-03-19 18:26:38 +08:00
祝你好运
|
 |
41
minglanyu 2020-03-19 18:29:32 +08:00
坑真的多，加油盆友
|
 |
42
TangMonk 2020-03-19 18:33:42 +08:00
不如研究下 Ckeditor
|
 |
43
Lightio 2020-03-19 19:47:48 +08:00
现在看到富字开头的东西都以为是起名帖了，，，
|
 |
44
zxCoder 2020-03-19 19:51:02 +08:00
@nightwitch 真有人用这种文字吗
|
 |
45
zhuangzhuang1988 2020-03-19 19:57:26 +08:00
别.
|
 |
46
pomelotea2009 2020-03-19 20:04:36 +08:00 via Android
别走两个极端：一种是完全 WYSIWYG 比如 Typora，另一种是分视图预览。建议光标所在的行显示 source code 不要预览，光标不在的行显示预览，这样可以避免很多问题
|
 |
47
HangoX 2020-03-19 20:06:22 +08:00 1
我会说看成了富婆编辑器吗。。。
|
 |
48
msaionyc 2020-03-19 20:31:36 +08:00
祝好运，我一个用的人都有阴影，这玩意 bug 太多了。
加油 |
 |
49
dtsdao 2020-03-19 20:47:09 +08:00
|
 |
50
thulof 2020-03-19 20:53:57 +08:00
商业级别的很难，要考虑很多
|
|
51
thulof 2020-03-19 20:56:12 +08:00
试用了一下 demo，当进入多级列表的时候，无法退出多级列表了，再尝试几次撤销之后，白屏了。
vendors~app.chunk.9b186841b0c756e84f5f.js:81 TypeError: Cannot read property 'align' of undefined |
 |
52
Felldeadbird 2020-03-19 21:00:03 +08:00
给楼主一个方向。
在做好 PC 的同时，也可以做好移动用户。 |
 |
53
guudsltd 2020-03-19 21:08:30 +08:00
弄个上传剪切板图片的功能
|
 |
54
whatsmyip 2020-03-19 21:09:55 +08:00
支持开源造轮子
反馈一个 bug，添加超链接之后，想要取消，全选这部分文字之后焦点总是被自动定位到链接框 |
 |
55
derek80 2020-03-19 21:16:07 +08:00
了解下： https://github.com/outline/rich-markdown-editor 也是基于 Slate.js 的。其实希望语雀的大部分功能可以实现，比如 plantuml 等。
|
 |
56
jaynos 2020-03-19 21:40:11 +08:00
在 quote 块中, 光标放在"在 block 为空时"之前, 回车几次, 删除几次, 就可以复现一个白屏 bug
本来我也想给博客造个简单的富文本编辑器轮子, 最后我还是老实的用 textarea 了, 楼主保重 |
|
57
jaynos 2020-03-19 21:41:56 +08:00
鼠标 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 |
 |
58
zhw2590582 2020-03-19 22:06:31 +08:00
勇气可嘉，但还真是不建议花时间研究这个，现在流行的富文本编辑器都不是一个人能完成的。
|
 |
59
adjusted 2020-03-19 22:24:45 +08:00
我们内部有维护一个基于 prosemirror 和 react 的编辑器，有兴趣可以聊聊 wx 就是 id
|
 |
60
aa23 2020-03-19 22:30:32 +08:00
我也在计划写一个，不过我想做的更偏向与在线文档方面
|
 |
61
iszengmh 2020-03-20 07:42:33 +08:00 via Android
要防止注入
|
 |
65
blackboom 2020-03-20 10:43:20 +08:00
Slate.js 确实是天坑，最后还是要回归到 Draft.js
|
 |
66
xuanbg 2020-03-20 11:04:54 +08:00
富文本编辑器是最大天坑，没有之一！
要说有什么痛点或者坑点，那倒是只有一个，就是：你永远也满足不了用户的需求…… |
 |
67
yuankui 2020-03-20 11:05:21 +08:00
slatejs 是真的坑。
从 0.4 到 0.5 版本升级后，底层数据模型，上层 api 全 TMD 的换了。 准备研究下 proseMirror |
 |
68
zhzbql 2020-03-20 11:46:30 +08:00
不管是勇气可嘉还是真大佬，先占座留个名，万一以后火了呢
|
 |
69
mauve 2020-03-20 11:49:37 +08:00
迎难而上，🐛
|
 |
70
wuhhhh 2020-03-20 14:34:51 +08:00
开头以为是换皮 看底下评论感觉难得一批 心想没什么难啊 都是抄 翻上去一看 自己写 打扰了 前排留名等一个大佬
|
 |
71
XTTX 2020-03-20 15:19:05 +08:00
@DemonQ 我最近在研究富文本编辑器. 如果要做点不同的东西我推荐一些奇特的排版功能. table 都有了, 可以试试做平行 tab. 别人用 BBcode 实现的一些复杂排版. 我正在规划的一个产品就有这种图文并茂的排版需求
|
|
72
DemonQ OP @XTTX 以前的产品做过这种需求，我现在的结构正在规划这种情况，有兴趣的话可以从 github 加下我 qq 来讨论下~
|
 |
73
redeyesovo 2020-03-20 15:55:17 +08:00
就叫富有富文本编辑器吧。🐶
|
 |
74
qile1 2020-03-20 17:52:48 +08:00 via Android
web 端所有的富文本有个缺点是无法自动分页，尤其是有很大一部分专业网站的报告输入的时候需要 A4 或者 B5 打印时候，长文本就没法分页了，现在一些商业产品也必须安装控件才能实现分页功能，楼主能解决我愿意花钱弄下
|
 |
75
jss 2020-03-20 20:03:52 +08:00 via iPhone
富文本编辑器，我只服 Froala，其他都是垃圾…
|
 |
76
lithbitren 2020-03-21 06:42:25 +08:00
浏览器兼容性是真的天坑
|
 |
77
Hanser002 2020-11-06 20:37:58 +08:00
题主做的蛮好的- -
|
 |
78
zhdsuperm 2020-12-24 14:53:01 +08:00
bug：ctrl + A 再用输入法输入文字，直接奔溃
|
Select Language