Javascript Meteor中的ExecCommand不起作用_Javascript_Meteor_Contenteditable_Rich Text Editor_Execcommand

Javascript Meteor中的ExecCommand不起作用

javascript meteor

Javascript Meteor中的ExecCommand不起作用,javascript,meteor,contenteditable,rich-text-editor,execcommand,Javascript,Meteor,Contenteditable,Rich Text Editor,Execcommand,我正在尝试在Meteor中实现ContentEditable的基本富文本编辑功能，但我遇到了execCommand的问题。 “撤消”和“重做”命令可以正常工作，但其他每一个命令（如粗体和斜体）都不起作用，并且不会出现错误。代码也可以作为常规页面使用（我已经对Meteor做了明显的修改，比如模板和事件）我的html： <body> {{> buttons}} <div id="editor" class="textZone" contenteditable=

我正在尝试在Meteor中实现ContentEditable的基本富文本编辑功能，但我遇到了execCommand的问题。 “撤消”和“重做”命令可以正常工作，但其他每一个命令（如粗体和斜体）都不起作用，并且不会出现错误。代码也可以作为常规页面使用（我已经对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>

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

如果您将

div

标记改为

按钮（对于可单击的元素），或者使div文本不可选择（例如禁用用户选择与css），它应该可以按您的预期工作
原因是，当您单击包含文本的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>


大胆的
“null”
是错误的。它应该是不带引号的null
。然而，我不确定这会有什么不同。您的编辑器是否使用iframe作为编辑器内容？不，这没有任何区别。我之前的测试结果也是空的，我只是测试这是否是因为我的线头。我没有使用iframe，我特别不想使用。没有明显的原因说明它为什么不起作用。除了与上述三个相同的其他execcommand之外，没有其他代码用于其他选项。我唯一遗漏（我想）的是，这是在if（Meteor.isClient）块中运行的。我在div中有contenteditable=“true”。它在上面的代码中。-webkit用户选择：无；没用。@mesosteros看到我的编辑了——我想我不清楚。我的意思是，如果您将contenteditable=“true”
添加到可单击的div
元素（带有id的元素）中，您将看到这些div的文本上出现了粗体，这意味着问题在于execCommand
正在被那些div
中的文本吞噬。解决方案是将div标记更改为按钮或使用css规则。
<template name="buttons">
  <div id="rtfOptions">
    <div class="separate">
      <button class="rtfOption" id="bold">bold</button>
    </div>
  </div>
</template>