10 Lipiec 2009

Codehighlighting do TinyMCE

Spodobał mi się sposób kolorowania składni, jaki wykorzystuje SyntaxHighlighter, zachciało mi się na jego podstawie zrobić sobie plugin do studio Gallery, i nie byłoby problemu, jednak… jednocześnie wykorzystuję TinyMCE, a ten edytorek, albo podmieniał wklepywany kod na encje, albo nie tykał go wcale i traktował całość jako HTML, szkoda, że nie potrafił podmieniać jedynie zawartości pomiędzy tagami <pre>.

Już zaprzęgałem do dzieła moje ulubione preg_replace_callback… gdy nagle przypomniałem sobie, że na stronie SyntaxHighlighting rzucił mi się w oczy plugin do TinyMCE.

Okrężną drogą, ale trafiłem w końcu na stronę Nawafa. Stworzył on plugin, który współpracuje niemal idealnie z Tinym w wersji 3.0.
Jednak i tutaj nie wszystko przebiegało po mojej myśli…

Tak jak sądziłem, pojawił się problem ze znacznikami HTML, które Tiny przekształcał lub nie wyświetlał ich w ogóle. Kolejne poszukiwania i powstała mała poprawka do Codehighlighting. Wystarczy wyedytować plik codehighlighting.js w katalogu js i dodać na początku

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

references = {
'ą': '&#261;',  'Ą': '&#260;',  'ć': '&#263;',  'Ć': '&#262;',  'ę': '&#281;',  'Ę': '&#280;',
'ł': '&#322;',  'Ł': '&#321;',  'ń': '&#324;',  'Ń': '&#323;',  'ó': '&#243;',  'Ó': '&#211;',
'ś': '&#347;',  'Ś': '&#346;',  'ż': '&#380;',  'Ż': '&#379;',  'ź': '&#378;',  'Ź': '&#377;',
'À': '&#192;',  'Á': '&#193;',  'Â': '&#194;',  'Ã': '&#195;',  'Ä': '&#196;',  'Å': '&#197;',
'Æ': '&#198;',  'Ç': '&#199;',  'È': '&#200;',  'É': '&#201;',  'Ê': '&#202;',  'Ë': '&#203;',
'Ì': '&#204;',  'Í': '&#205;',  'Î': '&#206;',  'Ï': '&#207;',  'Ð': '&#208;',  'Ñ': '&#209;',
'Ò': '&#210;',  'Ó': '&#211;',  'Ô': '&#212;',  'Õ': '&#213;',  'Ö': '&#214;',  'Ø': '&#216;',
'Ù': '&#217;',  'Ú': '&#218;',  'Û': '&#219;',  'Ü': '&#220;',  'Ý': '&#221;',  'Þ': '&#222;',
'ß': '&#223;',  'à': '&#224;',  'á': '&#225;',  'â': '&#226;',  'ã': '&#227;',  'ä': '&#228;',
'å': '&#229;',  'æ': '&#230;',  'ç': '&#231;',  'è': '&#232;',  'é': '&#233;',  'ê': '&#234;',
'ë': '&#235;',  'ì': '&#236;',  'í': '&#237;',  'î': '&#238;',  'ï': '&#239;',  'ð': '&#240;',
'ñ': '&#241;',  'ò': '&#242;',  'ó': '&#243;',  'ô': '&#244;',  'õ': '&#245;',  'ö': '&#246;',
'ø': '&#248;',  'ù': '&#249;',  'ú': '&#250;',  'û': '&#251;',  'ü': '&#252;',  'ý': '&#253;',
'þ': '&#254;',  'ÿ': '&#255;'
};
html = {
'&': '&amp;',   '<': '&lt;',    '>': '&gt;',    '"': '&quot;',      "'": '&#39;'
}

oraz zastąpić istniejącą wartość val, następującym kodem:

28
29
30
31
32
33
34
35
36

 var val =  document.getElementById("CodeArea").value;
	 for (i in html){
                var re = new RegExp(i, "g")
                val = val.replace(re, html[i])
            }
        for (i in references){
            var re = new RegExp(i, "g")
            val = val.replace(re, references[i])
        }

Jak ktoś nie chce edytować, może sobie podmienić na ten:
codehighlighting.js
(kodowanie oczywiście w utf-8)

Both comments and trackbacks are currently closed.