javascript - contentEditable ExecCommand "bold"无法触发

Question

在我的 contentEditable div 上执行“粗体”执行命令时遇到了很多麻烦。我在这里尝试了很多关于类似问题的解决方案，但都无济于事。我知道 execCommand 存在一些错误；非常感谢任何帮助!

这是我的代码:

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

.text {
    	position: relative;
    	width: 100%;
    	height: 90%;
    	left: 0%;
    	border: solid;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
    <button id="bolder" type="button">Bold</button>
	<div class="text"  contenteditable="true">
			This won't work	
	</div>
	<img class="loader" id="loader" src="Social_Icons/loader.svg">
</div>

我使用的是最新的 Chrome 浏览器。

Answer 1

您的代码运行良好。但是:

• 如果您只是想让编辑器中的一些文本变得strong，您必须先选择文本。

• 如果你想让所有的文本都变成strong，你可以聚焦编辑器并使用document.execCommand('selectAll',false,null) 在应用 bold 之前选择所有文本。

此示例在单击 Bold 按钮后将所有文本设置为 bold:

$("#bolder").on('click', function() {
    $('[contenteditable]').focus();
    
    document.execCommand('selectAll',false,null)
    document.execCommand("bold", false, null);
});

.text {
    	position: relative;
    	width: 100%;
    	height: 90%;
    	left: 0%;
    	border: solid;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
    <button id="bolder" type="button">Bold</button>
	<div class="text"  contenteditable="true">
			This won't work	
	</div>
	<img class="loader" id="loader" src="Social_Icons/loader.svg">
</div>