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

Analyzing user input in PHP against a mysqli database

I'm currently working on an online quiz application. I have everything in place with the form, and it's successfully sending emails to the administrator. However, there's a specific functionality that I want to implement: I need the script ...

phphtmlmysqlcsstesting

Fluid active tabs are causing alignment issues with CSS triangles

I have included CSS triangles on the active tabs with fluid width on this page, but they are not aligned properly in each tab. For example, the About Us tab is correctly and centrally aligned, but the others are too far to the right. The issue lies with t ...

css

Transmitting FormData from Angular to a .NET MVC Controller

Here's my perspective: <form ng-submit="onFormSubmit()"> <div class="form-group"> <label for="Movie_Genre">Genre</label> @Html.DropDownListFor(m => m.Movie.GenreId, new SelectList(Model.Genres, "Id", "Na ...

javascriptangularjsjsonajaxasp.net-mvc-4

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

javascripthtmlcss

Did my code effectively block an XSS attack?

Recently, I was informed that my website has vulnerabilities to XSS attacks. In an effort to improve security, I have implemented the htmlspecialchars method as a preventive measure. Here is the function I created: function _e($string){ return htmlsp ...

phphtmlsecurity

The hyphen character is not displaying correctly

When I upload an XML file for RSS feeds, the link shows all the feeds correctly. However, when viewed on IE, the French word Tobique–Mactaquac (with a hyphen between two words) appears without the hyphen as TobiqueMactaquac. My charset is set to UTF-8. ...

phphtmlinternet-explorerutf-8

Ways to minimize the space between elements in a flex container

My goal is to minimize the space between my images that expand on hover. I aim for it to resemble this: expectation However, the current appearance is more like this: reality This is what I currently have: .container { display: flex; width: 100 ...

cssflexboxmargin

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

[code page="c#"] Hdnano.Value = Application["AccountNum"].ToString(); $(document).ready(function() { $("#ano").on("blur", function() { var accountNum = $('textarea#ano').val(); $("#Hdnano").val(folioNum); }); &l ...

c#jqueryjsonhtmlbootstrapping

Configure Cross-Origin Resource Sharing (CORS) for the signed URL on Google Storage for my

I have successfully implemented CORS in my Google Cloud Storage bucket by allowing any origin and method using a wildcard (*). However, I am still encountering the error "Origin '' is therefore not allowed access". To give context, although the ...

c#angularjsasp.net-corecorsgoogle-cloud-storage

Tips on personalizing the default html template in nuxt

Struggling to customize the default page from my Nuxt app due to limited documentation. Link to Documentation I'm interested in extracting only certain elements like the title or links in the head section. For example, how can I access just the li ...

javascripthtmlvue.jsnuxt.js

Develop a JavaScript function to generate a multiple selection form

Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...

javascriptjqueryhtml

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

javascriptjqueryhtmlcssaccordion

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

javascripthtmlhyperlinkpopup

Challenging design with CSS shapes

Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...

htmlcsstransformcss-shapes

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

Angular JS page in its purest form

I have successfully developed a single-page application using AngularJs. However, when I visit the main page of my application hosted on the Heroku server, for a brief moment, all the images and text appear in a raw state at the top left corner of the bro ...

javascriptangularjs

Creating PDF files with PDFkit in Node.js while rendering HTML data

I am looking for a way to generate a PDF file using the 'PDFkit' library. The data is being retrieved from a MySQL database, and some of the content includes HTML tags. However, when I try to render the HTML data to PDF using the 'html-to-te ...

htmlnode.jspdf-generationnode-pdfkit

What is the best method for securing my API key within the script.js file while utilizing dotenv?

My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...

javascripthtmlapiapi-keydotenv

How to deactivate a text box within a form that is dynamically generated using Angular

I have encountered an issue with disabling the textbox inside my dynamic form in AngularJS after clicking a button. My code works perfectly fine for disabling textboxes outside the dynamic form, but when I try to target the ID of the textbox within the dyn ...

javascriptjqueryangularjsdisabled-input