离子框架干扰 contenteditable div + WYSIWYG 编辑器答案

【问题标题】：Ionic Framework interferes with contenteditable divs + WYSIWYG editors离子框架干扰 contenteditable div + WYSIWYG 编辑器
【发布时间】：2017-11-15 16:28:17
【问题描述】：

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

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

有没有办法在这里覆盖 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>

【问题讨论】：

标签： javascript angularjs trix

【解决方案1】：

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

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

【讨论】：