Javascript所见即所得编辑器和字体大小，我很难过答案

【问题标题】：Javascript WYSIWYG Editor and font sizes and I am stumpedJavascript所见即所得编辑器和字体大小，我很难过
【发布时间】：2011-04-07 02:52:38
【问题描述】：

我正在创建一个 Javascript WYSWYG 编辑器（是的，我知道已经有 100 万个，但没有一个能满足我的需求）而且我碰壁了。

我的编辑器中只需要两个功能：

1) 用户应该能够选择 pts 中指定的任何字体大小。 2) 用户应该能够在同一个编辑器窗口中拥有各种大小的文本。

听起来很简单，但您会惊讶于这有多难。

我已经看过 TinyMCE、NicEdit、FreeRichTextEditor、TinyEditor、openWYSIWYG、WYMeditor、jHtmlArea、uEditor、CLEditor、jQRTE、jQuery Simple WYSIWYG Editor 和 xinha，它们都没有这两个功能。

我能找到的唯一符合要求的编辑器是 Google Docs、CKEditor 和 YUI Rich Text。 Google Docs 不是一个选项，CKEditor 是 850 美元，对我的项目来说太过分了，YUI 富文本编辑器也太复杂了。我只想要一个具有这两个功能的非常简单的编辑器。

这是我项目的一大障碍。

找到的任何解决方案都必须是轻量级和免费的。例如，YUI 文本编辑器可以工作，但依赖于 YUI javascript 库，该库太大且不容易拆开。

【问题讨论】：

TinyMCE 可以在 pts 中使用字体，并且可以在同一页面中具有各种尺寸。
它只允许您从指定的七个中进行选择。如果你查看它生成的代码，它没有使用 pts。

标签： javascript editor text-editor wysiwyg font-size

【解决方案1】：

我以前在一个基于 IE 的控件中做过这个。总结：

用户选择一段文本并在您的 GUI 中选择不同的字体大小。
在 Javascript 中：
1. 使用浏览器 DOM 获取当前文本选择对象。
2. 新建一个 SPAN 元素，根据需要设置 CSS 样式的 font-size 属性（例如：12pt）。
3. 将 SPAN 的内部文本设置为最初选择的文本。
4. 从文档中删除选定的文本。
5. 在同一位置插入新的 SPAN。

当然，具体情况取决于您所针对的浏览器。如果您需要使用库（JQuery 等）来支持许多浏览器，则可能是这样。

如果我没记错的话，在 IE 中你使用 document.selection 和 selection.createRange() 来获取当前选择。

范围对象上还有一个delete() 或collapse() 用于删除选定的文本。要插入跨度，您可以使用insertBefore() / insertAfter() 或range.pasteHTML()

【讨论】：

我至少需要 Chrome 和 Firefox 支持。我遵循您的解决方案直到最后一步 - 如何在句子中间插入跨度？仅当我尝试更改整个跨度的大小时，这不会起作用吗？如果我有这样的文本：这是一个无聊的句子其他文本，我只想制作“句子和其他”大小的 17pt 字体，这在您的解决方案中如何工作？
是的，我记得这是我给出的方法的问题。为了解决这个问题，我想我最终使用了 selection.execCommand("FontSize",false,"3")。在 IE 中，这会创建一个 html 1-7 大小而不是 PT 大小的 FONT 元素（我知道它很狡猾）。 IE 正确应用了这个新元素，以便在需要时在每个父元素中添加两个 FONT 元素。然后我得到我当前选择的元素（现在是 FONT 元素）删除 size 属性并替换为 font-size 样式属性。不理想，但它可以在 IE 中使用。

【解决方案2】：

CKEditor 仅在您需要特殊许可证时才 850 美元。只要您尊重 GPL、LGPL 或 MPL，您就可以在不购买任何东西的情况下使用它。 http://ckeditor.com/license

【讨论】：

【解决方案3】：

使用 CLEditor，您可以编写一个简单的插件，将内置字体弹出窗口替换为磅值（而不是字体大小 1-7）。然后使用 CLEditor .selectedText() 和 .execCommand() 方法（连同“inserthtml”命令）将当前选择替换为包含所选文本的跨度标记。这可以跨浏览器工作，非常轻量级，编写起来应该不会那么难。

【讨论】：

我考虑过这一点，但如果用户选择了一些复杂的 html，比如一个 div 的结尾和另一个 div 的开头，这将不起作用。
CLEditor 版本 1.2.4（刚刚发布）现在包含一个 .selectedHTML() 方法，它应该可以解决您描述的问题。如果用户有一个复杂的选择，返回的 HTML 字符串将包含正确的开始和结束标记。

【解决方案4】：

TinyEditor 现在有这个功能。您可能可以按原样使用它，也可以自定义代码。它看起来真的很干净，布置得很好。

http://www.scriptiny.com/2010/02/javascript-wysiwyg-editor/

【讨论】：