Wordpress 6Tinymce将光标移出双空格上的标记

解决了

我正在将SPAN标记添加到tinyMCE可视化编辑器以显示高亮显示的文本

在高亮显示的范围内键入时，可能会出现光标被捕获的情况。。。无法打印出跨度的一侧

我创建了一些在“双空间”上激发的javascript

下面的代码

1.）检查当前光标位置是否在突出显示的范围内

2.）检查当前光标位置是否在该量程的末端（刚好在关闭/SPAN之前）

3.）将当前光标从关闭/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 = ''
})

var mycc=''
ed.onKeyDown.add（函数（ed，e）{
evt=e | | window.event；
var charCode=evt.keyCode | | evt.which；
//if-dbl空间
如果（mycc==charCode&&charCode==32）{
var curElm=ed.selection.getRng（）.startContainer；
var caretPos=ed.selection.getBookmark（curElm.textContent）.rng.startOffset；
//如果元素结束
if（caretPos==curElm.textContent.length）{
var mkr='！'
//为光标定位添加标记
ed.selection.setContent（mkr）
var newstr=''
//在标记处拆分内容（加上我的案例的结束跨度）
var c=ed.getContent（{format:'raw'}）.split（“+mkr+”）
如果（！c[1]）{
c=ed.getContent（{format:'raw'}）.split（“+mkr+”
”）
}
//如果组件被拆分，请根据需要进行调整
如果（c[0]&&c[1]）{
//在后面添加闭合跨距加上标记
newstr=c[0]+''+mkr+c[1]
//更新内容
ed.setContent（newstr）
}
//找到标记
var marker=jQuery（ed.getBody（））.find（'.marker'）；
//集合选择
ed.selection.select（marker.get（0））；
//删除标记
marker.remove（）；
}
}
mycc=charCode
})
add（函数（ed，e）{
mycc=“”
})

上面的代码仍然有效，但我使用了下面的代码。当按向右箭头键而不是dbl空格键时，此代码会中断跨度的结束位置

享受

var mycc=''
ed.onKeyDown.add（函数（ed，e）{
evt=e | | window.event；
var charCode=evt.keyCode | | evt.which；
//if-dbl空间
//如果（mycc==charCode&&charCode==32）{
if（charCode==39）{
var curElm=ed.selection.getRng（）.startContainer；
var caretPos=ed.selection.getBookmark（curElm.textContent）.rng.startOffset；
//如果元素结束
if（caretPos==curElm.textContent.length）{
var mkr='！'
ed.selection.setContent（mkr）
var newstr=''
var c=ed.getContent（{format:'raw'}）.split（mkr+“”）
如果（！c[1]）{
c=ed.getContent（{format:'raw'}）.split（mkr+“
”）
}
如果（c[0]&&c[1]）{
newstr=c[0]。替换（/^\s\s*/，“”）。替换（/\s\s*$/，“”）+'+mkr+c[1]。替换（/^\s\s*/，“”）。替换（/\s\s*$/，“”）。替换（/^[\s（]+/g，“”）
ed.setContent（newstr）
e、 预防默认值（）
}
var marker=jQuery（ed.getBody（））.find（'.marker'）；
ed.selection.select（marker.get（0））；
marker.remove（）；
}
}
mycc=charCode
})

1.）查看当前光标位置是否在突出显示的范围内

这是可能的

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

---

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

谢谢，但键入时正文始终作为节点返回

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