2

解决了！

我将 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 = ''
})

上面仍然有效，但我使用了下面的代码。当按下右箭头而不是 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
})
4

2 回答 2

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..}
于 2013-06-25T16:27:06.933 回答
-1

我用正确的代码更新了我的问题。

于 2013-06-25T20:43:46.477 回答