Слайд 30 в блоге Пола Айриша упоминал:
Мне нужна простая подсветка синтаксиса в реальном времени в редакторе tinyMce.
Я хочу выделить (изменить фон или цвет текста) для каждого (для кода класса [1165236 css] $ ('# container'). Find ('div.robotarm')
быстрее, чем $ ('# container div.robotarm'
Я хочу выделить (изменить фон или цвет текста) для каждого # {ключевого слова} и # {дополнительных ключевых слов} в тексте. Ключевое слово может только ...
фон будет иметь какой-либо цвет) # {ключевого слова}
и # {дополнительных ключевых слов}
в тексте. Ключевое слово может содержать только буквы, цифры и точки (.).
Я не знаю, хороша ли моя идея: # {ключевое слово} span>
(регулярное выражение)
Любые идеи, как решить эта проблема?
Привязка к событию onChange кажется нормальным, но вам также следует рассмотреть возможность использования событий onKey ---. Я надеюсь, что следующий фрагмент кода будет вам полезен:
css (будет определено в content_css, т.е.):
[current] {
background-color:yellow;
}
[changed] {
background-color:green;
}
js helpfunctions:
var select_current = function(node){
unselect_current();
node.setAttribute('current','true');
};
var unselect_current = function(){
var n = ed.getBody().firstChild;
while (n){
if (n.nodeType == 1 && n.getAttribute('current'))
{
n.removeAttribute('current');
}
n = n.nextSibling;
}
};
p_of = function(node) // returns p-Element of node
{
while (node){
if (node.nodeName == 'BODY') { return null; }
if (node.nodeName == 'P') { return node; }
else { node = node.parentNode; }
}
return null;
}
при вызове события:
var _node_changing = false;
console.log('onNodeChange: ', arguments);
if (!_node_changing && element.getAttribute('_mce_type') != 'bookmark'){
_node_changing = true;
var p = p_of(element);
if (p){
if (!p.getAttribute('current')){
select_current(p);
}
}
_node_changing = false;
}