如何构建一个轻量级的在线文本编辑器

How to build a lightweight online text editor?

本文关键字：在线 文本编辑 编辑器 轻量级 文本 何构建 构建 一个      更新时间：2023-09-26

我想构建一个像谷歌文档这样的轻量级在线文本编辑器，但比它轻得多。

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

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

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

这是我的想法：

将每一行视为单个div。监视键盘事件，当用户点击回车时，创建一个新的div

根据我的方法，我需要设置div的contentEditable=true然而，在那之后，每当我点击回车键时，就会在div中创建一条新行

那么，如何阻止这种情况呢？（只能使用javascript解决吗？）或者，还有其他方法可以实现我的目标吗？

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

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

我想你指的是像tinymce或CKEditor这样的文本编辑器。你可以随心所欲地把它们做得更轻。

小心让人们在你的网页上这样做——如果你没有正确地逃离/监控输入，他们可能会对页面本身造成严重破坏，阻止他们保存东西，等等。

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

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

当它们保存时，您只需获取iframe的div.

的内容

我会读取键盘事件并修改DOM以反映这些键盘更改。您将遇到的最大问题是定位"插入符号"（垂直线）。查看此SO问题以正确执行此操作->使用javascript 计算文本宽度

另一种选择，也是我更喜欢的一种，是使用标签。这是一个更轻量级的解决方案，内置文本测量。谷歌闭包库对这个内置的->闭包库有很多支持，例如文本选择->画布文本

相关文章：