如何在HTML中實現富文本編輯器？

Question

這是演示：

http://www.kevinroth.com/rte/demo.htm

當我使用firebugs來檢查源代碼時，我發現它只是iFrame，但iFrame如何才能有文本區域行為？ 有關如何實現這一點的任何想法？ 謝謝

Answer 1

我正在為我的工作做這件事，我做了一些研究。 根據我的想法，有兩種方法可以實現這一目標：

document.designMode

在JavaScript中使用document.designMode ，它將整個HTML文檔設置為可編輯。 由於整個HTML文檔是可編輯的，因此可能需要使用iframe來封裝編輯，以便用戶無法編輯您不想編輯的頁面的任何部分。

據我所知，您鏈接的演示和TinyMCE使用此方法。

CONTENTEDITABLE

contenteditable HTML屬性類似，但不需要使用iframe 。 您可以將該屬性添加到標記中，並使用閃爍的光標將其中的所有HTML變為可編輯。

以下是它的演示： http ： //html5demos.com/contenteditable

---

筆記

• 就個人而言，我會contenteditable於我的任務。 以下是關於該主題的良好概述和詳細信息： http ： //blog.whatwg.org/the-road-to-html-5-contenteditable
• 正如我所說，我對此做了有限的研究，所以請幫我糾正任何錯誤:)

Answer 2

在該框架中，您可以看到一個完整的HTML源代碼，它可以構建一個看起來像文本區域+工具欄+東西的東西。 一個復雜的Javascript正在做所有的技巧。 例如，如果您選擇一些文本並使用工具欄將其加粗，那么腳本會在文本周圍放置<strong>標記等等。

Answer 3

使用http://www.tinymce.com/這是最好的編輯器。 適用於任何瀏覽器，它有很多選項。 它非常易於使用。 只需看看示例和文檔。 它包含在許多流行的博客和CMS中。