Jquery Own Html Text Editor

Question

I'm trying make my own html text editor. Like you see picture. I wrote bold, italic, there is no problem.

But when i wrote code (like html code), like you see only write "Test", But I wrote in textarea <p>Test</p>

And I'm using SyntaxHighlighter plugin for display my codes.

And you see my code below

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

I know it cause for preview.html(text), I need also write like preview.text(text) code. But I dont know, how can i do this? Thanks.

Answer 1

a quick way is to create a element inject the html code as text, then get it back out as html, then the tags, and other characters, should then be in entity form, eg < as < etc

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

But there are some issues with it, eg whitespaces maybe removed

Because of that this answer shows creating a function that you can use to encode characters, which just encodes the <,>,",',& characters. You could add other characters to the replace to extend the function.

Answer 2

So what you need to do is html encode the raw text given by the user, then replace the bracket entities with html, and finally set the html of the output div. Here's a simple example of that:

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