Question

解决！

我正在将tiny标签添加到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 space

时，此代码会突破跨度的结束位置

享受

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

Answer 1

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

Answer 2

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

tinyMCE将光标移出双倍空间的标记

2 个答案: