富文本編輯器裏面，兩次 enter 後回普通格式，這是怎麼實現的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3634 天前的主题，其中的信息可能已经有所发展或是发生改变。

我自己正在做一個wysiwyg editor，主要是用execCommand做。

有些富文本編輯器，在tag了文字之後，連續兩下enter，下一行文字就能變回普通格式（或div）。

例如:
<blockquote>babbalbalalall（光標）</blockquote>
兩下enter後會變成：
<blockquote>babbalbalalall</blockquote>
<div>（光標）</div> (or <p> （光標）</p>)
而不是：
<blockquote>babbalbalalall<br><br></blockquote>

我的問題是，這個功能的實現思路是怎樣的？

blockquote

div

enter

4 条回复 • 2014-12-05 17:26:44 +08:00

lzy4223

2014-12-03 16:15:16 +08:00

哎，這條應該發到技術才對。怎麼一轉眼回來就不能edit和move了？

learnshare

2014-12-03 16:32:51 +08:00

editor 好大一坑，你怎么就进去了。

两次回车一般是“另起一行(p)”或“另起一块(div)”的概念，一个回车是换行（br）。不清楚你的 editor 核心思路是怎样的，但我觉得不要用页面中的 HTML 作为操作对象，要直接操作自己的数据结构（完成插入、删除等操作），然后再输出到页面中。

yrdr

2014-12-03 17:38:56 +08:00

什么时候发出来分享下，我也在些富文本编辑器，不过写完了就是，但还有些BUG没解决，blockquote就是
还有，我想问下，execCommand可以加blockquote吗？无论是formatblock或者是heading对于blockquote都没效果，所以我采用这种办法：遍历node的方式
补充一句：富文本编辑器就是坑，各个浏览器兼容性真是坑！
可以无视我了

lzy4223

2014-12-05 17:26:44 +08:00

@yrdr
execCommand formatblock 可以加blockquote。但是很多後遺症，不能toggle，要自己加。還有是，如我上面提到的。兩個enter跳不出格式。

@learnshare
嗯，你的思路是對的。
我簡單地用execCommand改editalbe iframe的tag，然後直接輸出到textarea。但是最後發現，這樣的話，就不能escape了。正如你所說的，這些加tag和escape的操作都要先完成再變成html輸出頁面才是正道。
所以，果斷放棄了。
將來有時間再搞把。