Question

我试图在Meteor中实现ContentEditable的基本Rich Text Editing功能，并且我遇到了execCommand的问题。 undo和redo命令工作正常但是其他所有命令（如粗体和斜体）都不起作用并且没有错误。该代码也可以作为常规页面使用（我已经对Meteor进行了明显的修改，例如模板和事件）。

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

我的活动（只有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");
                }
    )};
}

有人知道这个问题吗？它与文档或范围有关吗？

Answer 1

如果您将div代码更改为button（对于可点击的元素），或者使div文本无法选择（例如，使用css禁用user-select），它应该按预期工作

原因是当您点击内嵌文字的div时，execCommand会定位div的文字（不是contenteditable）所以命令无声地失败。尝试将contenteditable="true"添加到div中，如果点击它，您会看到它会加粗div的文字。或者，尝试添加css规则-webkit-user-select: none;（在Chrome上，供应商前缀在其他浏览器上有所不同）以禁用div上的文本选择，并且您将看到execCommand正常工作。< / p>

查看有效的演示here。

代码示例，为清晰起见：

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

Meteor中的ExecCommand无效

1 个答案: