Meteor中的ExecCommand不起作用
ExecCommand in Meteor is not working
我正在尝试在Meteor中实现ContentEditable的基本富文本编辑功能,但我在使用execCommand时遇到了问题。撤消和重做命令工作正常,但所有其他命令(如粗体和斜体)不起作用,并且不会给出任何错误。该代码作为常规页面也可以正常工作(我已经对 Meteor 进行了明显的改编,例如模板和事件)。
我的网页:
<body>
{{> buttons}}
<div id="editor" class="textZone" contenteditable="true"></div>
</body>
<template name="buttons">
<div id="rtfOptions">
<div class="separate">
<div class="rtfOption" id="undo">undo</div>
<div class="rtfOption" id="redo">redo</div>
</div>
<div class="separate">
<div class="rtfOption" id="bold">bold</div>
<div class="rtfOption" id="italic">italic</div>
</div>
</div>
</template>
我的事件(只有 2 个非工作 + 撤消。至于其余的几乎相同):
if (Meteor.isClient) {
Template.buttons.events({
"click #bold": function() { // Toggles bold on/off for the selection or at the insertion point
document.execCommand("bold", false, "null");
},
"click #italic": function() { // Toggles italics on/off for the selection or at the insertion point
document.execCommand("italic", false, "null");
},
"click #undo": function() { // Undoes the last executed command.
document.execCommand('undo', false, "null");
}
)};
}
有人知道这个问题吗?它与文档或范围有关吗?
如果您将div
标签更改为button
(对于可点击的元素),或者使div文本不可选择(例如使用css禁用user-select
),它应该按预期工作。
原因是当你点击里面有文本的div
时,execCommand
会针对div
的文本(不是contenteditable
),所以命令会静默失败。尝试将contenteditable="true"
添加到div中,如果您单击它,您将看到它将加粗div
的文本。或者,尝试添加 css 规则-webkit-user-select: none;
(在 Chrome 上,供应商前缀在其他浏览器上有所不同)以禁用div 上的文本选择,您将看到execCommand
工作正常。
在此处查看工作演示。
为清楚起见,代码示例:
选项 1
<template name="buttons">
<div id="rtfOptions">
<div class="separate">
<div class="rtfOption" id="bold" style="user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;">bold</div>
</div>
</div>
</template>
选项 2
<template name="buttons">
<div id="rtfOptions">
<div class="separate">
<button class="rtfOption" id="bold">bold</button>
</div>
</div>
</template>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用