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 代碼作為文本注入，然后將其作為 html 取出，然后標簽和其他字符應采用實體形式，例如< as < 等等

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

但是它存在一些問題，例如可能會刪除空格

因此，此答案顯示了創建一個可用於對字符進行編碼的函數，該函數僅對 <,>,",',& 字符進行編碼。您可以將其他字符添加到替換中以擴展該函數。

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