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

我正在使用java脚本实现自己的测试编辑器。在这种情况下，我需要在插入符号位置插入表格，但我无法将光标始终放在可编辑的div中。是否可以在编辑器中放置光标（插入符号）

我对此有充分的理由

我的问题是：

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

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

我的愿望是：

我需要显示光标（插入符号）点击任何按钮（用于文本编辑器）和相关的行动（如插入表）应插入光标（插入符号）的位置

$（'.wysiwyg控件a'）。打开（'click'，函数（e）{
e、 预防默认值（）；
document.execCommand（$（this.data（'role'），false）；
});
//#打开和关闭popover的区域
$（函数（）{
$（“#PopoverExample2”）.popover({
是的，
内容：函数（）{
返回$（'#PopoverExampleTowHiddenContent'）.html（）；
},
触发器：'单击'，
标题：“”，
位置：'底部'
});
});    
$（'html'）。在（'click'，函数（e）上{
if（typeof$（e.target）.data（'original-title'）=='undefined'&&
！$（e.target）.parents（）是（'.popover.in'））{
$（“[数据原始标题]”）.popover（'hide'）；
$（'.popover'）.css（'display'，'none'）；
}
});
//#popover打开和关闭的结束区域
$（文档）。在（“单击”上，“#GenBtn”，函数（）{
可生成（）；
});
函数generateTable（）{
var myRows=$（“#rows”）.val（）；
var myColumns=$（“#列”）.val（）；
//var numberPattern=/^（\（\d+\）？）（\d+[\-]）*\d+$/；
如果（myRows==“0”）{
//警报（“请输入行数”）；
返回false；
}
如果（myColumns==“”| | myColumns==“0”）{
//警报（“请输入列数”）；
返回false；
}
var html=''；
对于（变量i=0；i0）{
$（'.popover'）.remove（）；
}
}

*{
框大小：边框框；
}
.wysiwyg编辑器{
显示：块；
宽度：100%；
}
.wysiwyg控件{
显示：块；
宽度：100%；
高度：35px；
边框：1px实心#C2CACF；
边框底部：无；
边界半径：3px3px0；
背景：#fff；
}
.wysiwyg控制a{
显示：内联块；
宽度：35px；
高度：35px；
垂直对齐：顶部；
线高：38px；
文字装饰：无；
文本对齐：居中；
光标：指针；
颜色：#ADB5B9；
}
.wysiwyg控件[data role=“bold”]{
字体大小：粗体；
}
.wysiwyg控件[数据角色=“斜体”]{
字体：斜体；
}
.wysiwyg控件[数据角色=“下划线”]{
文字装饰：下划线；
}
[class^=“menu”]，[class^=“menu”]：之前，[class^=“menu”]：之后{
位置：相对位置；
最高：48%；
显示：块；
宽度：65%；
高度：2倍；
保证金：0自动；
背景#ADB5B9；
}
[class^=“menu”]：在{
内容：''；
顶部：-5px；
宽度：80%；
}
[class^=“menu”]：在{
内容：''；
顶部：3px；
宽度：80%；
}
.左菜单：之前，.左菜单：之后{
保证金权利：4px；
}
.右菜单：之前，.右菜单：之后{
左边距：4倍；
}
.wysiwyg内容{
最大宽度：100%；
宽度：100%；
高度：自动；
填充：12px；
调整大小：两者；
溢出：自动；
字体系列：Helvetica，无衬线；
字体大小：12px；
边框：1px实心#C2CACF；
边界半径：0 0 3px 3px；
背景#F2F4F6；
}
文本区{
宽度：100%；
}
.EditableTableInTextEditor{
边界塌陷：塌陷；
宽度：80%；
利润率：5%自动；
}
.EditableTableInTextEditor td{
填充：15px；
边框：1px纯黑；
垂直对齐：中间对齐；
}

让我们发表一个声明！


这是一个斜体字的句子。


非常重要的信息。
排
柱

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

---

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

这是快速静态提琴样本。我已经使用了您的函数和引用fiddle（）创建了这个函数

这会给你一点前进的想法

代码： JS

var insertData=”“；
函数pasteHtmlAtCaret（html）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//非标准且并非所有浏览器都支持（例如IE9）
var el=document.createElement（“div”）；
insertData=generateTable（）；
//el.innerHTML=html；
el.innerHTML=插入数据；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（document.selection&&document.selection.type！=“控制”）{
//IE<9
document.selection.createRange（）.pasteHTML（html）；
}
}
函数generateTable（）{
var myRows=2；//$（“#rows”）.val（）；
var myColumns=2；//$（“#列”）.val（）；
//变量数
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();
            //}
}