Angular-trix 在 IE 10 中不起作用答案

【问题标题】：Angular-trix not working in IE 10Angular-trix 在 IE 10 中不起作用
【发布时间】：2017-05-10 15:50:55
【问题描述】：

我正在使用Angular-trix 富文本编辑器，它在所有浏览器甚至IE 11 中都可以正常工作，但在IE10 或更低版本中无法正常工作。

一直显示以下错误。

无法设置未定义或空引用的属性“trixMutable”

HTML

<trix-editor ng-model-options="{updateOn:'blur'}" spellcheck="false" class="trix-content" ng-model="trix" angular-trix trix-initialize="trixInitialize(e, editor);" trix-change="trixChange(e, editor);" trix-selection-change="trixSelectionChange(e, editor);" trix-focus="trixFocus(e, editor);" trix-blur="trixBlur(e, editor);" trix-file-accept="trixFileAccept(e, editor);" trix-attachment-add="trixAttachmentAdd(e, editor);" trix-attachment-remove="trixAttachmentRemove(e, editor);" placeholder="Write something.."></trix-editor>

我不知道出了什么问题。

我找到了这个possible duplicate，但很遗憾在我的情况下不起作用。

Plunker Link

我在github 上发布了同样的问题，但没有得到回复。

注意：请在IE10或以下打开plunkr。

【问题讨论】：

控制台有错误吗？
是的！我已经提到过。
trixMutable 你在哪里定义的？
我没有在任何地方定义这个变量trixMutable
那你的变量是未定义的还是空引用怎么来的？

标签： html css angularjs internet-explorer-10 angular-trix

【解决方案1】：

我通过将 trix 更改为最新版本 0.10.1 来修复您的错误。一旦你添加了dataset.js，它在 IE 中就像一个魅力。 dataset.js 将通过在 IE 中添加缺少的核心依赖项来避免该错误。

无法设置未定义或空引用的属性“trixSelection”

完整的固定代码

<!DOCTYPE html>
<html ng-app="trixDemo">

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.10.1/trix.css">
  <link rel="stylesheet" href="style.css" />

  <script src="polyfills.js"></script>
  <script data-require="angularjs@1.4.4" data-semver="1.4.4" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.10.1/trix.js"></script>
  <script src="angular-trix.js"></script> 
  <script src="democtrl.js"></script>
</head>

<body ng-controller="trixDemoCtrl">
  <trix-editor ng-model-options="{ updateOn: 'blur' }" 
               spellcheck="false" class="trix-content" 
               ng-model="trix" 
               angular-trix 
               trix-initialize="trixInitialize(e, editor);" 
               trix-change="trixChange(e, editor);" 
               trix-selection-change="trixSelectionChange(e, editor);" 
               trix-focus="trixFocus(e, editor);" 
               trix-blur="trixBlur(e, editor);" 
               trix-file-accept="trixFileAccept(e, editor);" 
               trix-attachment-add="trixAttachmentAdd(e, editor);" 
               trix-attachment-remove="trixAttachmentRemove(e, editor);" 
               placeholder="Write something.."></trix-editor>
</body>
</html>

>> Demo Plunkr

如果trix.js 没有什么特别之处，我会建议切换到textAngular，这似乎更可靠。我希望这个修复能帮助你在你的应用程序中实现trix.js。

【讨论】：

您的trix.js 的解决方案很好，但现在我要使用textAngular，看起来好多了，我希望这不会给我任何错误。感谢您的帮助。

【解决方案2】：

从他们的 Github Repo 我知道他们不支持 IE10 但我尝试让它发挥作用：

第 1 步：尝试将您的 trix.js 更新为 0.10.1

这是我使用的CDN

第 2 步：当您尝试在 IE 10 中运行此代码时，您将收到一个新错误

无法设置未定义或空引用的属性“trixSelection”

所以如果你可以从trix Issue list添加dataset polyfill

那么下面的plunkner 将在 IE10 中工作

【讨论】：