2013-06-25 55 views
2

已解決!tinyMCE將光標移出雙倍空間上的標記

我將SPAN標籤添加到tinyMCE可視化編輯器中以顯示突出顯示的文本。

在高亮顯示的跨度內鍵入內容時,可能會出現光標陷入......的情況,無法鍵入跨度的一側。

我創建了一些JavaScript,關於「雙空間」

下面的代碼火災...

1)檢查當前光標位置是我強調SPAN

2中。 )檢查當前光標位置是否在該SPAN的末尾(就在關閉/ SPAN之前)

3.)將當前光標從關閉/ SPAN的左側移動到關閉/ SPAN的右側

任何或所有的幫助將不勝感激。

正確的代碼!

在打字時,如果你發現自己在一個SPAN元素的結束自我,按下空格鍵兩次,以打破目前的SPAN

var mycc = '' 
ed.onKeyDown.add(function(ed, e){ 
    evt = e || window.event; 
    var charCode = evt.keyCode || evt.which; 
    // if dbl space 
    if(mycc == charCode && charCode==32){ 
     var curElm = ed.selection.getRng().startContainer; 
     var caretPos = ed.selection.getBookmark(curElm.textContent).rng.startOffset; 
     // if end of element 
     if(caretPos==curElm.textContent.length){ 
      var mkr = '<span class="marker">!</span>' 
      // add marker for cursor positioning 
      ed.selection.setContent(mkr) 
      var newstr = '' 
      // split content at marker (plus ending span for my case) 
      var c = ed.getContent({format : 'raw'}).split(" "+mkr+"</span>") 
      if(!c[1]){ 
       c = ed.getContent({format : 'raw'}).split(" "+mkr+"<br></span>") 
      } 
      // if the conent was split, adjust as needed 
      if(c[0]&&c[1]){ 
       // add closing span back plus marker after 
       newstr = c[0]+'</span>'+mkr+c[1] 
       // update content 
       ed.setContent(newstr) 
      } 
      // find the marker 
      var marker = jQuery(ed.getBody()).find('.marker'); 
      // set selection 
      ed.selection.select(marker.get(0)); 
      // remove marker 
      marker.remove(); 
     } 
    } 
    mycc = charCode 
}) 
ed.onMouseDown.add(function(ed, e){ 
    mycc = '' 
}) 

上面仍然有效的,但我去下面的代碼。這個代碼爆發跨度的結束位置的按壓右時,而不是AROW的DBL空間

享受

var mycc = '' 
ed.onKeyDown.add(function(ed, e){ 
    evt = e || window.event; 
    var charCode = evt.keyCode || evt.which; 
    // if dbl space 
    //if(mycc == charCode && charCode==32){ 
    if(charCode==39){ 

     var curElm = ed.selection.getRng().startContainer; 
     var caretPos = ed.selection.getBookmark(curElm.textContent).rng.startOffset; 
     // if end of element 
     if(caretPos==curElm.textContent.length){ 
      var mkr = '<span class="marker">!</span>' 
      ed.selection.setContent(mkr) 
      var newstr = '' 
      var c = ed.getContent({format : 'raw'}).split(mkr+"</span>") 
      if(!c[1]){ 
       c = ed.getContent({format : 'raw'}).split(mkr+"<br></span>") 
      } 
      if(c[0]&&c[1]){ 
       newstr = c[0].replace(/^\s\s*/, '').replace(/\s\s*$/, '')+'</span>&nbsp;'+mkr+c[1].replace(/^\s\s*/, '').replace(/\s\s*$/, '').replace(/^[\s(&nbsp;]+/g,'') 
       ed.setContent(newstr) 
       e.preventDefault() 
      } 
      var marker = jQuery(ed.getBody()).find('.marker'); 
      ed.selection.select(marker.get(0)); 
      marker.remove(); 
     } 
    } 
    mycc = charCode 
}) 

回答

0

我更新了我的問題的Wi正確的代碼。

0

1)看看當前光標位置是我強調SPAN

這是可能的

var ed = tinymce.get('your_editor_id') 
var node = ed.getSelection.getNode(); // in case of complex nestings you will need to loop along the parentNode till you find a span-node 

if ($(node).hasClass('highlight')) {...whatever you like..} 
+0

謝謝,但BODY總是在輸入時作爲節點返回 –