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

Posted 2023-03-06

【中文标题】使用提供 HTML 输出的文本格式选项创建表单输入

【英文标题】：Create Form Input with Text Formatting Options giving HTML OUTPUT

【发布时间】：2017-06-30 03:47:34

【问题描述】：

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

与在 *** 中提问的方式非常相似。 主要目的是获取用户在表单中输入的内容的 html 输出。例如，如果用户选择 Bold Button 并输入一些内容，我应该将该部分作为

<b>Bold Content</b>

需要有关如何实现此目标的建议。

谢谢

【问题讨论】：

tinymce.com

最好的方法是加入一个降价编辑器，这样它就可以保护你的页面，因为它只提供静态内容。这将保护您免受 xss 的侵害。

@MatthewCawley Tinymce 效果很好。谢谢。如果您将其发布为答案，我可以标记它

【参考方案1】：

有多种方法可以解决这个问题，我将解决 2 个相当简单的方法

首先要注意的是，您希望将编辑器包装在具有contenteditable 属性的容器元素中，然后有一个数组变量，其中包含文本字符串和样式字符串的“事件”，以您喜欢的任何方式编码（可能以: 开头的字符串，如":bold"）。

你不想做的是直接存储html，而是可以转换成html代码的状态。

每当用户写入时，您都会捕获击键（并防止它们出现默认行为）以添加到最后一个文本字符串（或添加一个新字符串以防最后一个是事件），如果击键是，比如说，退格，然后如果最后一项是事件，则删除数组尾部的所有事件（所以[ "this ", ":bold", "is ", ":no-bold", ":italic", "text", ":no-italic", ":bold" ]，稍后您将转向“this is text ", 会变成[ "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> 标签，为每个:no-bold 和类似事件添加一个</b>。然而，这是非常不鼓励的。如果你错过了：在 css 中你可以使用 font-weight 来描述 italic 和其他样式的粗体和其他属性

【参考方案2】：

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