tinyMCE 간단한 구문 강조 표시

Question

tinyMce 편집기에서 간단한 실시간 구문 강조 표시가 필요합니다. 텍스트에 #{keyword} 및 #{more keywords}에 대해 강조 표시 (배경 또는 텍스트 색 변경)하고 싶습니다. 키워드에는 글자, 숫자 및 점 (.) 만 사용할 수 있습니다. 내 아이디어가 좋은 경우 는 나도 몰라 :

• 바인딩 편집기 <span class="code">#{keyword}</span> (정규식)의 모든 항목
• 제거
• 모든 # {키워드}를 찾아 #으로 대체의 OnChange 이벤트에

(CSS 클래스 code이 배경이 어떤 색으로 설정 한 것) {키워드에}

모든 아이디어를 어떻게이 문제를 해결하는 방법?

Answer 1

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