Angular-trix not working in IE 10

Question

Angular-trix not working in IE 10

1k views Asked by Abhishek Pandey At 24 November 2024 at 07:21

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.

Original Q&A

There are 2 answers

Krsna Kishore On 10 April 2017 at 09:07

From their Github Repo i came to know that they are not supporting for IE10 but i gave an attempt to make it work :

Step 1 : Try to update your trix.js to 0.10.1

Here is the CDN i used

Step 2 : When you try to run this code in the IE 10 you will get a new Error

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

So from trix Issue list if you can add the dataset polyfill

then the following plunkner will be working in IE10

**lin** · Accepted Answer · 2017-04-10 09:23:45

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="[email protected]" 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.

TechQA.

Angular-trix not working in IE 10

There are 2 answers

Full fixed code

>> Demo Plunkr

Related Questions in HTML

Related Questions in CSS

Related Questions in ANGULARJS

Related Questions in INTERNET-EXPLORER-10

Related Questions in ANGULAR-TRIX

Popular Questions

Popular Tags

Trending Questions