富文本编辑器需要游标插入表（自己的文本编辑器，没有使用插件）

Question

我正在使用java脚本实现自己的测试编辑器。 因为我需要在插入符号位置插入表格，但我无法将光标始终放在可编辑的div中。 有没有选项将光标（插入符号）放在编辑器中。

我有样品小提琴 。

我的问题是：

我可以在光标显示的时间点击可编辑div内部。 但是当我点击表格按钮时，光标就隐藏了。 所以我在可编辑div的末尾追加我的表。

注意：在所有插件中，他们都有一些用于放置光标的代码，我无法将其迁移到我的代码中

我的愿望是：

我需要在点击任何按钮（用于文本编辑器）时显示光标（插入符号），并且应在光标（插入符号）位置插入相关操作（如插入表）。

 $('.wysiwyg-controls a').on('click', function(e) { e.preventDefault(); document.execCommand($(this).data('role'), false); }); //# region for popover open and close $(function(){ $("#popoverExampleTwo").popover({ html: true, content: function() { return $('#popoverExampleTwoHiddenContent').html(); }, trigger:'click', title: '', placement:'bottom' }); }); $('html').on('click', function(e) { if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) { $('[data-original-title]').popover('hide'); $('.popover').css('display','none'); } }); //# endregion for popover open and close $(document).on("click", "#GenBtn", function() { generateTable(); }); function generateTable(){ var myRows = $("#rows").val(); var myColumns = $("#columns").val(); //var numberPattern = /^(\\(\\d+\\) ?)?(\\d+[\\- ])*\\d+$/; if (myRows == "" || myRows == "0" ) { //alert("Please enter number of Rows"); return false; } if (myColumns == "" || myColumns == "0") { //alert("Please enter number of Columns"); return false; } var html = '<table class="EditableTableInTextEditor"><tbody>'; for (var i = 0; i < myRows; i++) { html += "<tr>"; for (var j = 0; j < myColumns; j++) { html += "<td>&nbsp;</td>" } html += "</tr>" } html += "</tbody></table>"; $(".wysiwyg-content").append(html.toString()); if ($('.popover').length > 0) { $('.popover').remove(); } } 

 * { box-sizing: border-box; } .wysiwyg-editor { display: block; width: 100%; } .wysiwyg-controls { display: block; width: 100%; height: 35px; border: 1px solid #C2CACF; border-bottom: none; border-radius: 3px 3px 0 0; background: #fff; } .wysiwyg-controls a { display: inline-block; width: 35px; height: 35px; vertical-align: top; line-height: 38px; text-decoration: none; text-align: center; cursor: pointer; color: #ADB5B9; } .wysiwyg-controls [data-role="bold"] { font-weight: bold; } .wysiwyg-controls [data-role="italic"] { font-style: italic; } .wysiwyg-controls [data-role="underline"] { text-decoration: underline; } [class^="menu"], [class^="menu"]:before, [class^="menu"]:after { position: relative; top: 48%; display: block; width: 65%; height: 2px; margin: 0 auto; background: #ADB5B9; } [class^="menu"]:before { content: ''; top: -5px; width: 80%; } [class^="menu"]:after { content: ''; top: 3px; width: 80%; } .menu-left:before, .menu-left:after { margin-right: 4px; } .menu-right:before, .menu-right:after { margin-left: 4px; } .wysiwyg-content { max-width: 100%; width: 100%; height: auto; padding: 12px; resize: both; overflow: auto; font-family: Helvetica, sans-serif; font-size: 12px; border: 1px solid #C2CACF; border-radius: 0 0 3px 3px; background: #F2F4F6; } textarea{ width:100%; } .EditableTableInTextEditor{ border-collapse:collapse; width:80%; margin:5% auto; } .EditableTableInTextEditor td{ padding:15px; border:1px solid black; vertical-align:middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wysiwyg-editor"> <div class="wysiwyg-controls"> <a href='#' data-role='bold'>B</a> <a href='#' data-role='italic'>I</a> <a href='#' data-role='underline'>U</a> <a href='#' data-role='justifyleft'><i class="menu-left"></i></a> <a href='#' data-role='justifycenter'><i class="menu-center"></i></a> <a href='#' data-role='justifyright'><i class="menu-right"></i></a> <input type="button" id="popoverExampleTwo" value="table"/> </div> <div class="wysiwyg-content" contenteditable> <b>Let's make a statement!</b> <br> <i>This is an italicised sentence.</i> <br> <u>Very important information.</u> </div> </div> <div id="popoverExampleTwoHiddenContent" style="display: none"> <form id="GenerateTableForm"> <input type="number" min="1" max="10" name="rows" id="rows" />rows <input type="number" min="1" max="10" name="columns" id="columns" />columns <input id="GenBtn" type="button" name="button" value="create table"/> </form> </div> 

可以任何一个请帮我如何工作光标（插入符号）像插件一样。 提前致谢。

Answer 1

使用.focus（）函数为要放置光标的div。 如果div的id是“doc”

然后使用document.getElementById（'doc'）。focus（）;

Answer 2

这是快速静态样本小提琴。 我已经使用你的函数和参考小提琴（ https://jsfiddle.net/Xeoncross/4tUDk/ ）来创建这个。

https://jsfiddle.net/trupti11/wLj0yb35/1/

这可能会让你不知所措。

代码：JS

var insertData = "";
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
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            insertData = generateTable();
            //el.innerHTML = html;
            el.innerHTML = insertData;
            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);
    }
}

function generateTable(){
    var myRows = 2;//$("#rows").val();
            var myColumns = 2;//$("#columns").val();
            //var numberPattern = /^(\(\d+\) ?)?(\d+[\- ])*\d+$/;

            if (myRows == "" || myRows == "0" ) {
                alert("Please enter number of Rows");
                return false;
            }
            if (myColumns == "" || myColumns == "0") {
                alert("Please enter number of Columns");
                return false;
            }
            var html = '<table class="EditableTableInTextEditor"><tbody>';

            for (var i = 0; i < myRows; i++) {
                html += "<tr>";
                for (var j = 0; j < myColumns; j++) {
                    html += "<td>&nbsp;</td>"
                }
                html += "</tr>"
            }
            html += "</tbody></table>";
      return html;
            //$(".wysiwyg-content").append(html.toString());

            //if ($('.popover').length > 0) {
            //  $('.popover').remove();
            //}
}

希望这可以帮助！