javascript - Ionic Framework 干扰 contenteditable div + WYSIWYG 编辑器

Question

Ionic 框架 (v 1.3) 干扰 contenteditable = 'true' DIV。据我所知，它阻止了我的单击和拖动事件正确传播，这(就我而言)阻止了我使用几乎任何所见即所得文本编辑器。

我无法将光标聚焦在 contenteditable DIV 中，也无法从中选择文本。当我使用 Trix 编辑器(也使用此编辑器)时，我可以获得初始焦点，但无法将光标放置在任何位置或选择任何文本。

有没有办法覆盖 Ionic 的行为？

我创建了一个 Plunker here 有两个 Pane 演示基本的 contenteditable 问题以及与 Trix 编辑器结合使用的问题。

演示使用:

<ion-view title="ContentEditable Example">
  <ion-content class="has-header padding">
    <div contenteditable="true" style="user-select: all; -webkit-user-select: all;">
      <p>ContentEditable Text. This is a DIV with contenteditable set to true, AND user-select set to all. Note how you cannot click and edit the text!</p>
    </div>
  </ion-content>
</ion-view>

Answer 1

我找到了一个解决方案，可以在 Ionic 中使用 contenteditable div 以及 Trix 编辑器。我将此类应用于 CSS，现在无论是在浏览器中还是在真实设备上进行测试，都没有遇到任何问题:

.editable{
    user-select: text; 
    -webkit-user-select: text; 
    pointer-events: all !important; 
    -webkit-user-modify:read-write !important;
}