Meteor 中的 ExecCommand 不起作用

Question

I'm trying to implement the basic Rich Text Editing functionalities of ContentEditable in Meteor and I'm having an issue with execCommand.我正在尝试在 Meteor 中实现 ContentEditable 的基本富文本编辑功能，但我遇到了 execCommand 问题。 The undo and redo commands work fine but every other command such as bold and italic do not work and give out no errors.撤消和重做命令可以正常工作，但其他所有命令（例如粗体和斜体）都不起作用并且不会出现错误。 The code also worked fine as a regular page (I've done the obvious adaptations for Meteor such as templates and the events).该代码作为常规页面也能正常工作（我已经对 Meteor 进行了明显的调整，例如模板和事件）。

My html:我的html：

<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>

My events (only 2 non-working + the undo as it works. As for the rest its pretty much the same):我的事件（只有 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");
                }
    )};
}

Someone know the issue?有人知道这个问题吗？ Does it have something to do with document or the scope?它与文档或范围有关吗？

Answer 1

If you change the div tags to button instead (for the clickable elements), or make the div text unselectable (eg disabling user-select with css) it should work as you expect.如果您将div标签更改为button （对于可点击元素），或者使 div 文本不可选择（例如，使用 css 禁用user-select ），它应该按您的预期工作。

The reason is that when you click on the div with text inside, the execCommand targets the div 's text (which is not contenteditable ) so the command fails silently.原因是当您单击带有文本的div时， execCommand以div的文本（不是contenteditable ）为目标，因此命令会以静默方式失败。 Try adding contenteditable="true" to the div and you'll see that it will bold the div 's text if you click on it.尝试将contenteditable="true"添加到 div 中，如果您单击它，您会看到它将div的文本加粗。 Alternatively, try adding the css rule -webkit-user-select: none;或者，尝试添加 css 规则-webkit-user-select: none; (on Chrome, vendor prefixes differ on other browsers) to disable text selection on the div, and you'll see that the execCommand works just fine. （在 Chrome 上，供应商前缀在其他浏览器上有所不同）禁用 div 上的文本选择，您将看到execCommand工作正常。

See a working demo here .在此处查看工作演示。

Code examples, for clarity:代码示例，为清楚起见：

Option 1选项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>

Option 2选项 2

<template name="buttons">
  <div id="rtfOptions">
    <div class="separate">
      <button class="rtfOption" id="bold">bold</button>
    </div>
  </div>
</template>

Meteor 中的 ExecCommand 不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-01-26 20:17:51

Meteor 中的 ExecCommand 不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-01-26 20:17:51

解决方案1
2 已采纳 2015-01-26 20:17:51