javascript - Jquery 自带的 Html 文本编辑器

Question

我正在尝试制作我自己的 html 文本编辑器。就像你看到的图片。我写的是粗体，斜体，没有问题。

但是当我写代码的时候(比如html代码)，就像你看到的只写“Test”，但是我写在textarea <p>Test</p>

我正在使用 SyntaxHighlighter 插件来显示我的代码。

你在下面看到我的代码

function Textarea(input, preview) {
    var text = input.val().replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>")
                          .replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>")
                          .replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>")
                          .replace(/\[s\]/g, "<s>").replace(/\[\/s\]/g, "</s>")
                          .replace(/\[img\]/g, "<br/><p></p><img src='").replace(/\[\/img\]/g, "' /><br/><p></p>")
                          .replace(/\[link/g, "<a").replace(/URL="/g, "href='").replace(/"\]/g, "'>").replace(/\[\/link\]/g, "</a>")
                          .replace(/\[code/g, "<pre").replace(/type="/g, "class='brush:").replace(/"\]/g, "'>").replace(/\[\/code\]/g, "</pre>");

    preview.html(text);
}

我知道这是 preview.html(text) 的原因, 我还需要像 preview.text(text) 这样写代码。但我不知道，我该怎么做？谢谢。

Answer 1

一种快速的方法是创建一个元素，将 html 代码作为文本注入(inject)，然后将其作为 html 取回，然后标签和其他字符应采用实体形式，例如 <作为<等等

$('<div></div>').text(input.val()).html().replace...

但是它有一些问题，例如空格可能会被删除

因为那个this answer展示了创建一个可用于对字符进行编码的函数，该函数仅对 <、>、"、'、& 字符进行编码。您可以将其他字符添加到替换中以扩展该函数。