Javascript所见即所得编辑器和字体大小，我被难住了

Question

我正在创建一个Javascript WYSWYG编辑器(是的，我知道已经有一百万个，但没有一个能满足我的需求)，我遇到了麻烦。

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

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库，该库太大，不容易拆分和剥离。

Answer 1

我以前在基于IE的控件中这样做过。总而言之：

1. 用户选择一段文本并在您的图形用户界面中选择不同的字体大小。Javascript中的
2. ：
   1. 使用浏览器DOM获取当前文本选择对象。
   2. 创建新的跨度元素，根据需要设置

   样式字体大小属性(例如:12pt)。将跨度的内部文本设置为最初选择的文本。<代码>H210<代码>H111在相同的跨度中从新跨度中删除选定文本

​

当然，具体细节取决于您的目标浏览器。如果你需要支持很多浏览器，使用一个库(JQuery等)可能是个不错的选择。

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

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

Answer 2

仅当您需要特殊许可时，CKEditor的价格才为850美元。只要你能尊重GPL，LGPL或MPL，你就可以不用购买任何东西就可以使用它。http://ckeditor.com/license

Answer 3

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