javascript - jquery - 在插入符号位置插入元素

Question

我有一个 contentEditable div，在这个 div 中我有一个表格。

示例 HTML:

<div id="divId" contenteditable="true">
   <table>
      <tbody>
         <tr>
            <td><br></td>
            <td>@param<br></td>
         </tr>
         <tr>
            <td><br></td>
            <td><br></td>
         </tr>
      </tbody>
    </table>
</div>

我想在插入符号位置(表格中选定的单元格)上插入一个输入元素 - 例如 @param 所在的位置。

我使用了 $("#divId").append 但只将输入插入到 div 的末尾，而不是我需要的地方。

任何帮助将不胜感激。

Answer 1

这个功能你试过吗？

http://goo.gl/BdPd3k

function pasteHtmlAtCaret( html ) {
        var sel, range;
        if ( window.getSelection ) {
            // IE9 and non-IE
            sel = window.getSelection();
            if ( sel.getRangeAt && sel.rangeCount ) {
                range = sel.getRangeAt( 0 );
                range.deleteContents();


            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement( "div" );
            el.innerHTML = html;
            var frag = document.createDocumentFragment(),
                node, lastNode;
            while ( ( node = el.firstChild ) ) {
                lastNode = frag.appendChild( node );
            }
            range.insertNode( frag );

            // Preserve the selection
            if ( lastNode ) {
                range = range.cloneRange();
                range.setStartAfter( lastNode );
                range.collapse( true );
                sel.removeAllRanges();
                sel.addRange( range );
            }
        }
    } else if ( document.selection && document.selection.type != "Control" ) {
        // IE < 9
        document.selection.createRange().pasteHTML( html );
    }
}