Jquery自己的Html文本编辑器

Question

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

但是当我编写代码（如html代码）时，就像你只看“测试”一样​​，但我在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代码作为文本注入，然后将其作为html返回，然后标记和其他字符应该是实体形式，例如<作为{{ 1}}等等

<

但它存在一些问题，例如可能删除了空格

因为this answer显示创建了一个可用于编码字符的函数，该函数只编码＆lt;，＆gt;，“，”和＆amp;字符。您可以将其他字符添加到替换为扩展功能。

Answer 2

所以你需要做的是html编码用户给出的原始文本，然后用html替换括号实体，最后设置输出div的html。这是一个简单的例子：

http://jsfiddle.net/2K97x/

String.prototype.htmlEncode = function () {
    return $('<div/>').text(this).html();
};

function replaceEntities(value) {

    return value.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>");

}

var rawValue = $('input').val();
var htmlEncoded = rawValue.htmlEncode();
var newHtml = replaceEntities(htmlEncoded);

$('div').html(newHtml);