如何创建一个富文本编辑器

Question

45

大家好，我想知道创建富文本编辑器背后的概念是什么，也就是如何创建富文本编辑器。我想学习实现方法。

PS：请不要建议使用YUI或任何其他内置库。我想自己制作一个。

那么，背后的概念是什么？

谢谢 :)

- codeomnitrix

2

以下是一些简单的例子，可能有助于学习基本概念：寻找一个简单的富文本编辑器。 - Pekka

尝试一下这个：http://codemasala.com/blog/2012/09/22/learn-to-create-your-own-rich-text-editorrte-using-jquery/ - Rajat Saxena

@Pekka웃 我知道这是一个老问题，但看起来你的链接已经失效了。你有其他替代方案吗？ - Panpaper

@Pekka웃 链接已经失效 :( - oldboy

2个回答

1

我不建议你去看别人的使用方式，但我建议你看一下jWYSIWYG，了解它是如何用jQuery编码的。

- Chris Bornhoft

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

最简单的方法如下。它被 TinyMCE、CKEditor 和许多其他编辑器使用。有许多变体，特别是如果您正在创建代码编辑器，则可以使用文本区域和等宽字体进行巧妙的技巧。

动态创建 iframe 并将可编辑内容放置在 iframe 文档内
通过将 iframe 的文档的 designMode 属性设置为 "on" 或将其 <body> 元素的 contentEditable 属性设置为 true 来使 iframe 可编辑。请注意，在 Firefox 中，designMode 支持早于 contenteditable，因此更少出现错误。
在主文档的合适位置（例如直接在可编辑 iframe 上方）添加按钮（例如粗体、斜体、插入图像等），这些按钮将作用于 iframe 中所选内容。所有浏览器都提供了一个 execCommand() 方法（例如参见 MSDN 和 MDN），用于执行许多这些操作，尽管它们的工作方式以及它们生成的标记有所不同。

那就是它的基本原理。大多数编辑器都会处理一些其他复杂的事情，这些事情并不立刻显而易见，部分原因在于要解决浏览器之间的差异，另一部分原因则是为了提供内置浏览器命令未覆盖的额外功能。这是一件非常复杂和困难的事情，需要高度的专业知识和承诺，并不是轻易可以完成的。