javascript - 使用提供 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 is text ", 会变成 [ "this", ":bold", "is", ":no-bold", ":italic", "tex" ] )

现在您可以做 2 件主要的事情。

首先，您可以为每个文本字符添加一个跨度，并根据事件样式分配各种类，以便每个字符都有自己的元素:

<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 的大胆度和其他属性和其他样式