Issues with Angular-Trix compatibility with Internet Explorer 10

I am currently using the Angular-trix rich text editor, which is functioning perfectly in all browsers including IE 11. However, I am encountering issues with it not working in IE10 or earlier versions.

An error message that keeps appearing states:

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 have been unable to identify the root cause of this issue.

I came across a similar problem on Stack Overflow here, but unfortunately, the solution did not work for me.

Visit Plunker Link

I also reported this issue on GitHub, however, I have not received any response yet.

Note: Please try opening the provided plunkr link in IE10 or older versions.

htmlcssangularjsinternet-explorer-10angular-trix

Answer №1

I successfully resolved the issue by updating trix to the latest version 0.10.1. By incorporating dataset.js, it now functions flawlessly in IE. The inclusion of dataset.js addresses the error by supplying any missing core dependencies in IE.

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

Complete corrected 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46272821332a27342c35067768726872">[email protected]</a>" 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>

>> View Demo Plunkr

If the contents of trix.js do not require special attention, my suggestion would be to consider transitioning to textAngular, which appears to offer a more stable solution. I trust that this resolution aids in seamlessly integrating trix.js into your application.

Answer №2

After checking out their Github Repository, it appears that they do not offer support for IE10. However, I decided to try and make it work:

Step 1: Attempt to update your trix.js to version 0.10.1

Here is the CDN link that I used

Step 2: When running this code on IE 10, a new error will occur

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

According to an entry in the trix Issue list, adding the dataset polyfill should resolve this issue

Once you've done that, the provided Plunker demo should function properly in IE10

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to submitting a form and navigating to a new page using Angular

In my project, I have created a form where users can input key-value pairs. These pairs are then stored in an array and I want to submit this data to the backend in JSON format without using AJAX. Instead of traditional HTML forms that POST data with keys ...

angularjs

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

Manipulating the DOM by linking to a div and using JSON information for opening and closing

I have retrieved data from a JSON file and displayed it as a link. I am looking to implement functionality that allows me to hide and show a div when the link is clicked. Below is the code I'm currently using: $(document).ready(function() { $ ...

jqueryhtmljsonhideshow

Instructions on implementing getJSON in this code

I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...

javascriptjqueryhtmljsongetjson

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

htmlcssbackground-colorcss-animations

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...

htmlcssadsense

Encountering issues transferring file from Angular client to Spring Java server as it returns a 400 error message

While I have had success uploading files from Postman rest client to a server (spring application deployed on a remote machine), I encounter an issue when attempting to upload files using a rest client in angular.js. Instead of a successful file upload, I ...

javaangularjsspringrestspring-mvc

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

javascripthtmlangularjs

Using GeoIP2() in Django models to retrieve data saved from an IP address call and present it in my HTML

I have developed a function that extracts the IP address and saves information from the city_data in GeoIP2(). My goal is to retrieve the Latitude and longitude from the city_data and showcase it on my HTML page. The issue I am facing is the inability to ...

pythonhtmldjangodjango-modelsgeoip2

Cluster multiple markers on a Google Map using Angular

It's surprising that there are no examples discussing the utilization of multiple MarkerClusterers in AngularJS Google Maps. To showcase my code, I have created a Plunker: http://plnkr.co/edit/TlkZ18IMbWKxI8pdgwko?p=preview The structure of the tem ...

angularjsgoogle-mapsangular-google-maps

CAUTION: Attempted to load angular multiple times while loading the page

I encountered a warning message while working on my project, causing errors in calling backend APIs due to duplicate calls. Despite attempting previously suggested solutions from the forum, I am stuck and seeking assistance. Can anyone provide guidance? Be ...

javascriptjqueryangularjs

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Creating a session with AngularJS

One task I'm facing is transferring an object from one page to another. Specifically, when a user clicks on a search result on the results page, it should lead them to a page with relevant details. To achieve this, I attempted using services and facto ...

angularjssession

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I'm trying to incorporate a loading spinner or any other HTML element while an image is being loaded. Currently, I am utilizing the ImageComponent to showcase images in a random movie generator. Although I managed to make the spinner work for the init ...

htmlreactjsnext.js

A single snippet of JavaScript blocking the loading of another script

I've encountered an issue where the code seems to be conflicting with itself. The top part works fine, but the bottom part doesn't. However, when I remove the top portion, everything works as intended! You can see a working example of both compo ...

javascripthtml

Utilize JavaScript to trigger a div pop-up directly beneath the input field

Here is the input box code: <input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> Along with the pop-up div code: <div id='div_change_qty' name='div_change_qty&ap ...

javascriptjqueryhtmlcss

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

   **** Sorry for the lengthy title **** Today I encountered a problem that I would like to discuss with all of you. When I click on a "COMMENT" button, instead of triggering JavaScript code to display a CHILD.div inside the corresponding ...

javascripthtml

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

javascripthtmlcss

How to eliminate spacing between photos in a flexbox layout

[Unique] Find the Solution Image inside div has extra space below the image My design showcases various images of different sizes in multiple rows. See an example here. Despite my efforts, there are noticeable gaps between the rows that I can't seem ...

cssvue.jsduplicates

Transferring information to a function

I'm looking for a way to pass the variable Date to my function HasBtnRights(). Does anyone have suggestions on how I can achieve this? <asp:TemplateField HeaderText="More info" Visible='<%#HasBtnRights(Eval("Date")) %>'> < ...

htmlasp.net