Search code examples
htmlcssangularjsinternet-explorer-10angular-trix

Angular-trix not working in IE 10

I'm using Angular-trix rich text editor, It's working fine in all browsers even IE 11, but It isn't working in IE10 or less.

It's continuously showing following error.

Unable to set property 'trixMutable' of undefined or null reference

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>

I can't figureout what's going wrong.

I found this possible duplicate, but unfortunately not working in my case.

Plunker Link

I posted same issue on github, but I got no response.

Note: Please open above plunkr in IE10 or Less.

Solution

  • I fixed your error by changing trix to the latest version 0.10.1. Once you add dataset.js it works like a charm in IE. dataset.js will avoid the error by adding missing core dependencies in IE.

    Unable to set property 'trixSelection' of undefined or null reference

    Full fixed code

    <!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

    If there is nothing special on trix.js I would recommend to swtich to textAngular which seems to be much more solid. I hope this fix will help you to implement trix.js into your application.