Javascript jqueryexecCommand不'；t在contenteditable HTML标记中作为弹出窗口工作

我试图通过jqueryexeccommand函数创建内联文本编辑器。为此，我的源代码段如下：

/*******************************************************************/
/**********单击：内容可编辑文本编辑器div的内部********/
/*******************************************************************/
$（文档）.ready（函数（）{
$（函数（）{
$（'.text editor'）。打开（“单击”，函数（e）{
/*******开始：单击文本以更改背景*********/
$（“.text编辑器”）.removeClass（“文本单击”）；
$（此）.addClass（“文本单击”）；
/*******结束：单击文本以更改背景*********/
/*******开始：单击文本以标记contenteditable属性*********/
$（this.attr（“contenteditable”，“true”）；
/*******结束：单击文本以标记contenteditable属性*********/
/*******开始：单击文本弹出类*********/
$（“.text editor”）.removeClass（“弹出窗口”）；
$（此）.addClass（“弹出窗口”）；
/*******结束：单击文本添加弹出类*********/
/*******开始：单击文本弹出Div*********/
$（“.popup panel”）.remove（）；
var PopupHtml=”\
\
\
\
";
$（'.text editor'）.contents（）.prop（'designMode'，'off'）；
$（this.contents（）.prop（'designMode'，'on'）；
如果（！$（'.popup panel'）。长度）{
$（this.append（PopupHtml）；
}
/*******结束：单击文本添加弹出Div*********/
e、 停止传播（）
}); 
/*******************************************************************/
/**********单击：内容外部可编辑文本编辑器div*******/
/*******************************************************************/
$（文档）。在（“单击”）上，函数（e）{
if（$（e.target）.is（“.text editor”）==false）{
/*******开始：单击文本以更改背景*********/
$（“.text编辑器”）.removeClass（“文本单击”）；
/*******结束：单击文本以更改背景*********/
/*******开始：单击文本以标记contenteditable属性*********/
$（“.text editor”）.removeAttr（“contenteditable”）；
/*******结束：单击文本以标记contenteditable属性*********/
/*******开始：单击文本以删除弹出类*********/
$（“.text editor”）.removeClass（“弹出窗口”）；
/*******结束：单击文本添加弹出类*********/
/*******开始：单击文本弹出Div*********/
$（'.text editor'）.contents（）.prop（'designMode'，'off'）；
$（“.popup panel”）.remove（）；
/*******结束：单击文本添加弹出Div*********/
}
});
$（“#粗体文本”）。在（“单击”上，函数（e）{
document.execCommand（'bold'，false，null）；
});
$（“#下划线文本”）。在（“单击”上，函数（e）{
document.execCommand（'underline'，false，null）；
});
$（“#斜体文本”）。在（“单击”上，函数（e）{
document.execCommand（'italic'，false，null）；
});
});
});
.text编辑器{背景色：透明；边框：1px实心透明；显示：块；}
.text单击{背景颜色：浅黄色；边框：1px虚线#ccc；}
*[contenteditable=“true”]{大纲：0px实心透明；}
ul.text选项{margin:0；padding:0；}
ul.text-option li{列表样式：无；显示：内联块；}
ul.text-option li a{padding:5px；border:1px solid#ccc；右边距：5px；}
按钮{右边距：5px；}
/*弹出式容器-可以是任何你想要的*/
.popup{position:relative；/*display:inline block；*/cursor:pointer；-webkit user select:none；-moz user select:none；
-ms用户选择：无；用户选择：无；
}
/*实际弹出窗口*/
.popup.popup面板{可见性：隐藏；/*宽度：160px；*/背景颜色：#555；颜色：#fff；文本对齐：中心；边框半径：6px；
填充：8px；位置：绝对；z索引：1；底部：125%；左侧：50%；左边距：-80px；}
/*弹出箭头*/
.popup.popup面板：：在{内容：''之后；位置：绝对；顶部：100%；左侧：50%；左边距：-5px；边框宽度：5px；
边框样式：纯色；边框颜色：#555透明；}
/*切换此类-隐藏并显示弹出窗口*/
.popup.show{可见性：可见；-webkit动画：fadeIn 1s；动画：fadeIn 1s；}
/*添加动画（在弹出窗口中淡入淡出）*/
@-webkit关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@关键帧fadeIn{从{opacity:0；}到{opacity:1；}}

第一标题文本
第二标题文本
第三标题文本
第四标题文本
第五标题文本
这是段落文本
“过时
此功能已过时。虽然它可能在某些浏览器中仍然有效，但不鼓励使用，因为它可以随时删除。请尽量避免使用它。”


尝试输出exec命令return，因为如果不支持，它可能返回false

console.log(document.execCommand('underline',false,null))

“HTML文档切换到设计模式时”
您能否尝试在文档上切换execCommand

接下来，情况不应该是这样，但是您可以从jQuery选择器运行execCommand吗

$(document).execCommand