jQuery execCommand不能作为可内容编辑的HTML标记中的弹出窗口

Question

我正在尝试通过jQuery execCommand函数创建内联文本编辑器。为了做到这一点，我的源代码片段如下：

​

/*******************************************************************/
/********** Click: inner of contenteditable text-editor div ********/
/*******************************************************************/
$(document).ready(function(){
	$(function() {
	  $('.text-editor').on("click", function(e) {
			/******* Start: Click text to Background Change *********/
			$(".text-editor").removeClass("text-click");
			$(this).addClass("text-click");
			/******* End: Click text to Background Change *********/

			/******* START: Click text to tag contenteditable attr. *********/
			$(this).attr("contenteditable","true");
			/******* End: Click text to tag contenteditable attr. *********/

			/******* Start: Click text to Popup class *********/
			$(".text-editor").removeClass("popup");
			$(this).addClass("popup");
			/******* End: Click text to add Popup class *********/

			/******* Start: Click text to Popup Div *********/
			$(".popup-panel").remove();
			var PopupHtml = "<div class='popup-panel show' contenteditable='true'>\
			<button type='button' id='bold-text'><i class='fas fa-bold'></i></button>\
			<button type='button' id='underline-text'><i class='fas fa-underline'></i></button>\
			<button type='button' id='italic-text'><i class='fas fa-italic'></i></button>\
			</div>";

			$('.text-editor').contents().prop('designMode','off');
			$(this).contents().prop('designMode','on');

			if(!$('.popup-panel').length){
				$(this).append( PopupHtml );
			}
			/******* End: Click text to add Popup Div *********/
			e.stopPropagation()
	  }); 

	  /*******************************************************************/
	  /********** Click: outter of contenteditable text-editor div *******/
	  /*******************************************************************/
 	  $(document).on("click", function(e) {
	    if ($(e.target).is(".text-editor") === false) {
			/******* Start: Click text to Background Change *********/
			$(".text-editor").removeClass("text-click");
			/******* End: Click text to Background Change *********/

			/******* START: Click text to tag contenteditable attr. *********/
			$(".text-editor").removeAttr("contenteditable");
			/******* End: Click text to tag contenteditable attr. *********/

		  	/******* Start: Click text to remove Popup class *********/
		  	$(".text-editor").removeClass("popup");
		    /******* End: Click text to add Popup class *********/

		  	/******* Start: Click text to Popup Div *********/
		  	$('.text-editor').contents().prop('designMode','off');
		  	$(".popup-panel").remove();
		    /******* End: Click text to add Popup Div *********/
	    }
	  });


 	  $('#bold-text').on("click", function(e) {
 	  	document.execCommand('bold',false,null); 
 	  });

 	  $('#underline-text').on("click", function(e) {
 	  	document.execCommand('underline',false,null); 
 	  });

 	  $('#italic-text').on("click", function(e) {
 	  	document.execCommand('italic',false,null); 
 	  });


	});
});

.text-editor{ background-color: transparent; border: 1px solid transparent; display: block; }
.text-click{background-color: lightyellow; border: 1px dashed #ccc;}
*[contenteditable="true"] { outline: 0px solid transparent; }

ul.text-option{ margin: 0; padding: 0; }
ul.text-option li{ list-style: none; display: inline-block; }
ul.text-option li a{ padding: 5px; border: 1px solid #ccc; margin-right: 5px; }
button{ margin-right: 5px; }

/* Popup container - can be anything you want */
.popup { position: relative; /*display: inline-block;*/ cursor: pointer; -webkit-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none;
}

/* The actual popup */
.popup .popup-panel {visibility: hidden;/*width: 160px;*/background-color: #555;color: #fff;text-align: center;border-radius: 6px;
padding: 8px;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -80px;}

/* Popup arrow */
.popup .popup-panel::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;
border-style: solid;border-color: #555 transparent transparent transparent;}

/* Toggle this class - hide and show the popup */
.popup .show {visibility: visible;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

@keyframes fadeIn {from {opacity: 0;}to {opacity:1 ;}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="box">

		<h1 class="text-editor" contenteditable="true">First Heading Text</h1>
		<h2 class="text-editor">Second Heading Text</h2>
		<h3 class="text-editor">Third Heading Text</h3>
		<h4 class="text-editor">Forth Heading Text</h4>
		<h5 class="text-editor">Fifth Heading Text</h5>
		<p class="text-editor">This is paragraph text</p>
	</div>

​

问题是，当我选择html内容可编辑标签内的文本并单击弹出按钮“粗体”/“下划线”/“斜体”时，文本不会按要求更改。但如果按钮集没有弹出，它就会工作，如下所示

    <div class="box">
        <h1 class="text-editor" contenteditable="true">First Heading Text</h1>
        <h2 class="text-editor">Second Heading Text</h2>
        <h3 class="text-editor">Third Heading Text</h3>
        <h4 class="text-editor">Forth Heading Text</h4>
        <h5 class="text-editor">Fifth Heading Text</h5>
        <p class="text-editor">This is paragraph text</p>
    </div>

<ul class="text-option">
    <li><button type="button" id="bold-text"><i class="fas fa-bold"></i></button></li>
    <li><button type="button" id="underline-text"><i class="fas fa-underline"></i></button></li>
    <li><button type="button" id="italic-text"><i class="fas fa-italic"></i></button></li>
</ul>

这里出了什么问题？请谁帮我正确地工作。

Answer 1

过时此功能已过时。虽然它仍可在某些浏览器中使用，但不鼓励使用它，因为它随时可能被删除。请尽量避免使用它。

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

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

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

“当一个超文本标记语言文档被切换到designMode”，你能尝试在文档上切换execCommand吗？

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

$(document).execCommand