使用文本格式选项创建表单输入，提供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直接为您提供所有这些功能（以及更多功能）。