使用提供 HTML OUTPUT 的文本格式选项创建表单输入

Question

我想在网页中创建一个表单输入并具有自定义文本格式选项，如粗体、斜体和添加超链接。

与在 StackOverflow 中提问的方式非常相似。主要目的是获取用户在表单中输入的 html 输出。例如，如果用户选择粗体按钮并输入一些东西，我应该把那部分作为

<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>

更简洁，更容易上手。或者，您可以<b>为每个:bold事件添加一个标签，</b>为每个:no-bold和类似事件添加一个标签。然而，这是非常不鼓励的。如果您遗漏了它：在 css 中，您可能必须font-weight为italic其他样式描述粗体和其他属性

Answer 2

TinyMCE为您提供开箱即用的所有这些功能（以及更多）。