使用文本格式選項創建表單輸入，提供HTML輸出

Question

我想在網頁中創建一個表單輸入，並具有自定義文本格式選項，如粗體，斜體和添加超鏈接。

非常類似於在StackOverflow中提問的方式。 主要目的是獲取用戶在表單中輸入的html輸出。 例如，如果用戶選擇Bold Button並鍵入內容，我應該將該部分作為

<b>Bold Content</b>

需要有關如何實現這一目標的建議。

謝謝

Answer 1

有很多方法可以解決這個問題，我將解決2個相當簡單的問題

首先要注意的是，您希望將編輯器包裝在具有contenteditable屬性的容器元素中，然后有一個數組變量，包含文本字符串和樣式字符串的“事件”，以您喜歡的任何方式編碼（可能是以字符串開頭的: ，像":bold" ）。

你不想做的是直接存儲html ，而是將那些狀態轉換成html代碼。

每當用戶寫入時，您將捕獲鍵擊（並防止它們出現默認行為）以添加到最后一個文本字符串（或者在最后一個事件是一個事件的情況下添加一個新鍵盤），如果鍵擊是，例如，退格，然后如果最后一項是一個事件，你刪除數組尾部的所有事件（所以[ "this ", ":bold", "is ", ":no-bold", ":italic", "text", ":no-italic", ":bold" ] ，你后來轉向”這是 文字 “，會變成[ "this", ":bold", "is", ":no-bold", ":italic", "tex" ] ）

現在你可以做兩件大事。

首先，您可以為每個文本字符添加跨度，並根據事件樣式分配各種類，以便每個字符都有自己的元素：

<span class="">t</span><span class="">h</span>...<span class="bold">i</span><span class="bold">s</span><span class="bold"> </span><span class="italic">t</span>...

瀏覽器渲染速度非常慢，但效果會很好。

您可以做的另一件事是通過處理每個文本字符串而不是每個字符來演變前面的示例，因此您將為數組中從文本到事件的每個轉換開始一個范圍，假設您正在迭代它，並且添加對應於各種類型的類，直到從事件到文本的轉換，在這種情況下，您插入文本，並在另一個事件發生之前關閉它，然后重復：

<span class="">this </span><span class="bold">is </span><span class="italic">text</span>

更簡潔，更容易獲得。 或者，您可以為每個:bold事件添加<b>標記，為每個事件添加</b> :no-bold和類似。 然而，這是非常沮喪的。 如果你錯過了它：在css中你可以使用font-weight來描述粗體和italic和其他樣式的其他屬性

Answer 2

TinyMCE直接為您提供所有這些功能（以及更多功能）。