Ionic Framework 干扰内容可编辑的 div + WYSIWYG 编辑器

Question

Ionic 框架 (v 1.3) 正在干扰 contenteditable = 'true' DIVs。据我所知，它阻止我的单击和拖动事件正确传播，这（在我的情况下）阻止我使用几乎所有所见即所得的文本编辑器。

我无法将光标聚焦在 contenteditable DIV 上，我也无法 select 文本。当我使用 Trix 编辑器（也使用它）时，我可以获得初始焦点，但不能将光标放在任何地方或 select 任何文本。

有没有办法在这里覆盖 Ionic 的行为？

我创建了一个 Plunker here，其中有两个窗格演示了基本的 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 编辑器。我将此 class 应用于 CSS，现在没有遇到任何问题，无论是在浏览器中还是在真实设备上进行测试：

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

Ionic Framework 干扰内容可编辑的 div + WYSIWYG 编辑器

Ionic Framework interferes with contenteditable divs + WYSIWYG editors

javascript

angularjs

trix