Javascript jQuery.select（）不工作，如何获取插入符号处的节点？

我使用此代码向

contenteditable

div

中的选择添加样式

function textStyle( css ) {
    var sel, el, range, selectedText
    sel = window.getSelection()
    range = sel.getRangeAt( 0 )
    selectedText = range.toString()
    range.deleteContents()
    el = document.createElement('span')
    $( el ).css( css )
    el.innerHTML = selectedText
    range.insertNode( el )
    range = range.cloneRange()
    range.setStartBefore( el.firstChild )
    range.setEndAfter( el.firstChild )
    sel.removeAllRanges()
    sel.addRange( range )
}

$( '.bold' )
.on( 'click' , function() {
    textStyle({ 'font-weight' : 'bold' })
})

$( '.italic' )
.on( 'click' , function() {
    textStyle({ 'font-style' : 'italic' })
})

$( '.edit' )
.select(function() {
    console.log( $(this) )
})

添加样式正在起作用。但现在我想拥有与GoogleDrive相同的行为，并让按钮向用户提供反馈。因此，当我将插入符号“放入”文本部分时，我希望粗体按钮亮起

jQuery完成了吗？

.select（）

对我不起作用？文件说：

仅设置插入点的位置不会触发事件

编辑：最后，我希望能够简单地撤消样式设置，并在此之前向用户提供反馈

编辑2：关于“缺少”分号

---

是我干的；像这样：

CSS Javascript

var obj={
ndx:null
}
函数文本样式（css）{
变量选择、el、范围、选定文本
sel=window.getSelection（）
if（sel.toString（）！=“”）{
范围=选择范围（0）
selectedText=range.toString（）
range.deleteContents（）
el=document.createElement（'span'）
$（el）.addClass（css）
el.innerHTML=selectedText
range.insertNode（el）
range=range.cloneRange（）
设置开始前的范围（el.firstChild）
range.setEndAfter（el.firstChild）
选择removeAllRanges（）
选择添加范围（范围）
$（“input.Button.”+css）
.addClass（'highlight'）
}    
}
函数unStyle（）{
变量节点=$（'.edit span'）.eq（obj.ndx）
，text=node.text（）
，range=document.createRange（）
范围。选择节点（节点[0]）
var documentFragment=range.createContextualFragment（文本）
range.insertNode（documentFragment）
node.remove（）
}
$（“.bold”）
.on（'click'，function（）{
if（$（this）.hasClass（'highlight'））{
unStyle（）
$（this.removeClass（'highlight'））
}否则{
文本样式（'bold'）
}
})
$（“.italic”）
.on（'click'，function（）{
if（$（this）.hasClass（'highlight'））{
unStyle（）
$（this.removeClass（'highlight'））
}否则{
文本样式（“斜体”）
}
})
$（“.edit”）
.on（'mousedown'，函数（e）{
var span=$（e.target）.最近（'span'）的
，spanL=span.length
obj.ndx=span.index（）
对于（i=0；i

---

丢失everywhere@doniyor嗯，你有谷歌硬盘吗？还是Word女士？如果将插入符号置于粗体文本中，则会突出显示该插入符号的按钮。现在就这些。只需告诉我如何使
.select（）
工作即可@doniyor我添加了一行关于我喜欢的结果的内容。你的意思是，按钮
B
应该保持按下，如果是粗体，如果是去折叠，则保持不按下，对吗？@doniyor不是，耶和华，差不多了。如果您在字段中的某个位置键入，则通常状态应为未高亮显示。但是，一旦您将插入符号放入粗体文本中，它就应该高亮显示（不同的背景色）。下一步是去折叠“整个”粗体文本。希望有帮助。%）P
.bold {
  font-weight:bold;
}

.italic {
  font-style:italic;
}

.highlight {
  background: red !important;    
}

var obj = {

    ndx : null

}

function textStyle( css ) {

    var sel, el, range, selectedText

    sel = window.getSelection()

    if ( sel.toString() != '' ) {

        range = sel.getRangeAt( 0 )

        selectedText = range.toString()

        range.deleteContents()

        el = document.createElement('span')

        $( el ).addClass( css )

        el.innerHTML = selectedText

        range.insertNode( el )

        range = range.cloneRange()

        range.setStartBefore( el.firstChild )

        range.setEndAfter( el.firstChild )

        sel.removeAllRanges()

        sel.addRange( range )

        $( 'input.Button.' + css )
        .addClass( 'highlight' )

    }    

}

function unStyle() {

    var node = $( '.edit span' ).eq( obj.ndx )
    , text = node.text()
    , range = document.createRange()

    range.selectNode(node[0])

    var documentFragment = range.createContextualFragment( text )

    range.insertNode(documentFragment)

    node.remove()

}

$( '.bold' )
.on( 'click' , function() {

    if ( $( this ).hasClass( 'highlight' ) ) {

        unStyle()

        $( this ).removeClass( 'highlight' ) 

    } else {

        textStyle( 'bold' )

    }


})

$( '.italic' )
.on( 'click' , function() {

    if ( $( this ).hasClass( 'highlight' ) ) {

        unStyle()

        $( this ).removeClass( 'highlight' ) 

    } else {

        textStyle( 'italic' )

    }

})

$( '.edit' )
.on( 'mousedown' , function( e ) {

    var span = $( e.target ).closest('span')
    , spanL = span.length

    obj.ndx = span.index()

    for (i = 0 ; i < spanL ; i++ ) {

        span = span[i].className

    }   

    $( 'input.Button' )
    .removeClass( 'highlight' )

    if ( spanL ) {

        $( 'input.Button.' + span )
        .addClass( 'highlight' )

    }

})