Javascript所見即所得編輯器和字體大小和我難住

Question

我創建一個Javascript WYSWYG編輯器（是的，我知道有一百萬已經存在但沒有滿足我的需求），我打了一堵牆。

我需要在我的編輯只有兩種功能：

1）用戶應該能夠選擇在點指定的任何字體大小。 2）用戶應該能夠在同一編輯器窗口中獲得各種尺寸的文本。

聽起來很簡單，但您會驚訝於這有多困難。

我已經看過TinyMCE，NicEdit，FreeRichTextEditor，TinyEditor，openWYSIWYG，WYMeditor，jHtmlArea，uEditor，CLEditor，jQRTE，jQuery簡單所見即所得的編輯器和xinha，它們都沒有這兩個功能。

我能找到的符合條例草案的唯一編輯是Google Docs，CKEditor和YUI Rich Text。谷歌文檔不是一個選項，CKEditor是850美元，對我的項目來說是過分的，而YUI Rich Text編輯器也太複雜了。我只想要一個具有這兩個功能的簡單編輯器。

這是我項目的一大障礙。

無論發現哪種解決方案都必須輕量且免費。例如，YUI文本編輯器工作，但取決於YUI JavaScript庫，它太大，不容易分解和剝離。

Answer 1

我已經在基於IE的控件中完成了這項工作。總結：

1. 用戶選擇一段文本並在GUI中選擇不同的字體大小。
2. 在Javascript中：
   1. 使用瀏覽器的DOM來獲得當前的文本選擇對象。
   2. 創建一個新的SPAN元素，根據需要設置CSS樣式font-size屬性（例如：12pt）。
   3. 將SPAN的內部文本設置爲最初選擇的文本。
   4. 從文檔中刪除選定的文本。
   5. 將新的SPAN插入相同的位置。

當然具體取決於瀏覽器/ s的你的目標。如果你需要支持使用庫（JQuery等）的許多瀏覽器可能是要走的路。

如果我沒有記錯，在IE中使用document.selection和selection.createRange()來獲得當前選擇。

範圍對象上還有一個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」命令）將當前選擇替換爲包含選定文本的span標記。這將跨瀏覽器工作，將是非常輕量級的，不應該是那麼難寫。

Answer 4

TinyEditor現在有這個功能。您可以按原樣使用它，也可以自定義代碼。它看起來很乾淨，佈局很好。

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