Keep simple & live Strong

home

Textile WYSIWYG editor

01 Mar 2010

Working on Textile & WYSIWYG editor these days. What I need is a WYSIWYG editor for editing content with styles like bold, color, list, etc.. And I do not want to save HTML directly into database, so Textile seems a good choose.

Check here for more details.

I would like to share some javascript regular expression code. After writing these code, I felt it is so lucky to working with Ruby.

textilize: function(html, escape){
        html = html.replace(/<br ?\/?>/gi, "\n");
        html = html.replace(/<(?:b|strong)>((.|[\r\n])*?)<\/(?:b|strong)>/gi, '*$1*');
        html = html.replace(/<(?:i|em)>((.|[\r\n])*?)<\/(?:i|em)>/gi, '_$1_');
        html = html.replace(/<(?:u|ins)>((.|[\r\n])*?)<\/(?:u|ins)>/gi, '+$1+');
        html = html.replace(/<a href="(.*?)">((.|[\r\n])*?)<\/a>/gi, '"$2":$1');
        html = html.replace(/<font color="#0000ff".*?>((.|[\r\n])*?)<\/font>/gi,
          '%{color:blue}$1%');
        html = html.replace(/<font color="#FF0000".*?>((.|[\r\n])*?)<\/font>/gi,
          '%{color:red}$1%');
        html = html.replace(/<font color="#088A4B".*?>((.|[\r\n])*?)<\/font>/gi,
          '%{color:green}$1%');
        //list
        var r = /([\s\S]*)<ul>([\s\S]*?)<\/ul>([\s\S]*)/;
        while (r.test(html))
            {
                p = RegExp.$1;
                c = RegExp.$2;
                e = RegExp.$3;
                c = c.gsub(/<li>([\s\S]*?)</li>/, "* #{1}\n");
                html = p + "\n" + c + e;
            }
        html = html.replace(/^[\r\n]+|[\r\n]+$/g, '');
        return html;
    },

htmlize: function(textile, escape){
        //escape
        textile = textile.replace(/\/gi, "0142540974231612");
        textile = textile.replace(/\\_/gi, "0750023893692338");
        textile = textile.replace(/\\*/gi, "0643004879835027");
        textile = textile.replace(/\n/gi, '<br/>');
        textile = textile.replace(/\*(.+?)\*/gi, (this.internetExplorer ?
        '<strong>$1</strong>' : '<b>$1</b>'));
        textile = textile.replace(/_(.+?)_/gi, (this.internetExplorer ?
        '<em>$1</em>' : '<i>$1</i>'));
        textile = textile.replace(/(.+?)/gi, '<u>$1</u>');
        textile = textile.replace(/"(.+?)":([^\s\n<]+)/gi, '<a href="$2">$1</a>');
        textile = textile.replace(/%{color:blue}(.+?)%/gi,
        '<font color="#0000ff">$1<\/font>');
        textile = textile.replace(/%{color:red}(.+?)%/gi,
        '<font color="#FF0000">$1<\/font>');
        textile = textile.replace(/%{color:green}(.+?)%/gi,
        '<font color="#088A4B">$1<\/font>');
        textile = textile+'<br\/>';
        textile = textile.replace(/<p>[\s\n]*<\/p>/g, '');
        //unescape
        textile = textile.replace(/0142540974231612/, "\");
        textile = textile.replace(/0750023893692338/, "\\_");
        textile = textile.replace(/0643004879835027/, "\\*");
        //list
        var r = /(<br\/>\* .*?<br(\/)*>)(?!\* )/;
        while (r.test("<br/>" + textile))
            {
                l = RegExp.leftContext;
                m = RegExp.lastMatch;
                e = RegExp.rightContext;
                m = m.gsub(/\* (.*?)<br(\/)*>/, "<li>#{1}</li>").gsub("<br/>", "");
                textile = l + "<ul>" + m + "</ul>" + e;
            }
        return textile;
    },

Importent: "JavaScript and VBScript do not have an option to make the dot match line break characters. In those languages, you can use a character class such as [\s\S] to match any character." see here for more details.

So when in Ruby we use:

/(.*)<ul>(.*?)<\/ul>(.*)/

In Javascript we need code like:

/([\s\S]*)<ul>([\s\S]*?)<\/ul>([\s\S]*)/

What a pain ...


Afterward
later on, I found a more light weight textile editor from Redmine. After simple modification, I got this . I would like to recommend this one unless editing very complex format.




comments powered by Disqus
Fork me on GitHub