如何构建轻量级在线文本编辑器？

Question

我想构建一个像google doc这样的轻量级在线文本编辑器，但是要比它轻得多。

我的意思是，我只想实现以下三个功能：

1. 输入/删除字符
2. 创建/删除新行
3. 缩进

但我不太确定如何构建它。

这是我的想法：

将每一行视为一个div。 监视键盘事件，当用户按Enter键时，创建一个新的div

根据我的方法，我需要设置div的contentEditable = true 但是，在此之后，每当我按Enter键时，都会在div中创建换行符。

那么，如何制止呢？ （它只能通过使用javascript来解决吗？） 或者，还有其他方法可以实现我的目标吗？

Answer 1

像这样使用event.preventDefault();：

$(document).bind("keydown keypress", function(event) {
  if ( event.which == 13 ) {
    event.preventDefault();
    // Your code here
  }
});

Answer 2

我认为您的意思是tinymce或CKEditor等文字编辑器。您可以根据需要使它们变得更轻。

Answer 3

我会读取键盘事件，只是修改DOM以反映键盘更改。你将遇到的最大问题是定位'插入符号'（垂直线'）。查看此SO问题以正确执行此操作 - ＆gt; calculate-text-width-with-javascript

另一个替代方案，也就是我更喜欢的方法是使用标签。它是一个更轻量级的解决方案，内置文本测量功能。 Google Closure库对此内置有很多支持 - ＆gt; Closure Library，以及带文本选择的示例 - ＆gt; Canvas Text

Answer 4

小心让人们​​在你的网页上这样做 - 如果你没有正确地逃避/监控输入，他们就会对页面本身造成严重破坏，使他们无法保存东西等。

这些编辑器中的大多数都将其编辑器实现为嵌入式iframe。由于它是从同一个端口，协议和主机提供的，因此您可以完全访问它。

因此，您可以在iframe中制作标记，并将所有控件保留在iframe之外。当他们点击某个控件时，你会在iframe中实现这一点。

当他们保存时，你只需抓住iframe div的内容。