Question

我想像Stackoverflow编辑器那样使用WYSIWYG。它可以通过选择文本中的点击事件添加<b><i>之类的元素块。

目前我的代码看起来像这样

HTML

<input id="btn" type="submit" value="Bold">
<div id="ctn" contenteditable="true"></div>

的JavaScript

<script>

var btn = document.getElementById('btn');
var ctn = document.getElementById('ctn');

btn.addEventListener('click', function(){
ctn.document.execCommand('bold', false, null);
}, false);

</script>

为什么它不起作用？但下面的代码是有效的。它的旧式JavaScript。代码显示为此。

HTML 的

 <div contenteditable="true" onclick="SetToBold ();">Select a part of this text!</div>

的JavaScript

<script>

function SetToBold () {
            document.execCommand ('bold', false, null);
        }

</script>

nb：在JavaScript而不是JQuery上回答它。谢谢你阅读：）

Answer 1

您正在选择div元素（ctn），但之后尝试访问它的document属性。 Div元素没有document属性。

修改

Here是一个工作小提琴 - 选择文字的一部分，说“让我大胆！”＃39;然后单击按钮。它会很大胆。小提琴包含以下JavaScript：

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
    document.execCommand('bold', false, null);
}, false);

你的代码和小提琴之间的唯一的区别在于我在文档对象上调用execCommand，而不是选择div并尝试访问它的文档属性（它没有）

在选择文档上添加元素

1 个答案:

修改