Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer:

Module 'WrappedSelection' failed to load: Unspecified error.
Error: Unspecified error.
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2970:29)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2923:14)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

Module 'SaveRestore' failed to load: Unable to get property 'isDirectionBackward' of undefined or null reference
TypeError: Unable to get property 'isDirectionBackward' of undefined or null reference
    at Anonymous function (js/plugins/textAngular/rangy-selectionsaverestore.js:30:9)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

The issue appears to occur during the initialization of rangy.

An interesting observation is that the TextAngular demo functions smoothly on Internet Explorer. One potential difference between the demo and my project is that I am utilizing the unminified rangy library. Furthermore, these errors do not arise when using Chrome or Firefox.

Despite the application being able to load (with the errors potentially being just warnings in the console), upon interacting with the textAngular field, I encounter the following error:

Object doesn't support property or method 'getSelection' File: textAngular.js, Line: 693, Column: 4

I have scoured through the textAngular and rangy GitHub repositories but found no solutions to address these issues. Have any of you experienced similar challenges before?

If needed, I can share the link to our application for further insight.

Thank you!

javascriptangularjsinternet-explorerrangytextangular

Answer №1

It appears that textAngular is initializing the rangy select too early, causing issues. I was able to resolve this issue by updating line 2036 in textAngular/dist/textAngular.js to wait for the window.onload event before checking for the rangy library.

    window.onload = function() {
        // Making sure that rangy and rangy.saveSelection are available on the global scope.
        // Future update should avoid using the global scope.
        if(!window.rangy){
            throw("Error: rangy-core.js and rangy-selectionsaverestore.js are needed for textAngular to function properly, but rangy-core has not been loaded yet.");
        }else{
            window.rangy.init();
            if(!window.rangy.saveSelection){
                throw("Error: rangy-selectionsaverestore.js is required for textAngular to work correctly.");
            }
        }
    };

Answer №2

Struggling with a similar problem, I experimented with the window.onload solution as recommended. However, this led to a new issue concerning textAngularSetup not being loaded. After retracting the window.onload adjustment and incorporating the textAngularSetup.js file, the functionality is now seamless in both Chrome and IE. It's puzzling since I didn't observe that file in the demonstration.

Answer №3

Dealing with a similar issue in IE 11 (edge mode), I initially tried implementing the solution involving window.onload, but unfortunately, the problem persisted within the application.

To address this issue, I made several adjustments:

  1. Added window.onload to the textangular.js - run() function, following the previous solution.

  2. Substituted textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies.

I also made modifications to the core code to handle exceptions,

Updated File: rangy-core.js, line number:2967-2972

                        var r2;
                        try {
                            // code causing the exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

This approach showed improvement and was tested successfully on both IE11 and Chrome browsers.

Answer №4

Encountered a similar issue when trying to load a third-party tool into a modal popup that relied on textangular-rangy.min.js

To resolve this, I swapped out textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies, and made modifications to the core code to handle the exception.

For the file rangy-core.js, lines 2967-2972:

 var r2;
                        try {
                            // code generating above exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

Success! This solution now functions in both IE11 and Chrome :)

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

An unexpected error occurred with React JS stating: "Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row}"

I need help in showing data from a database in a React JS application. Encountered error in React JS: Error: Parse Error: Line 27: Unexpected token . at http://localhost/PHP-React-Demo/ajax_call.html return {cell.data.row} This is my code: Index.p ...

javascriptreactjs

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

javascriptimagevue.jscanvasbase64

having trouble retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...

javascripthtml

The compatibility between V-model and TinyMCE is unreliable

I've been working on integrating Vuejs and TinyMCE, using the @tinymce/tinymce-vue package for the Vue integration. I followed all the instructions and everything seems to be functioning properly - I can write, insert images... everything except for t ...

javascriptvue.jstinymceaxios

Tips on serving a static file from a location other than the public or view directories following middleware in Express JS

I am organizing my files in a specific way. Inside the folder api-docs, I have an index.html file along with some CSS and JS files. My goal is to display the API documentation only for authenticated users. Since I am using Jade for views in this proje ...

javascripthtmlnode.jsexpress

Optimizing the rendering of Font-awesome CDN JS for better performance on Pagespeed Insights

Instead of directly linking to the Font Awesome CSS, I have chosen to leverage the JavaScript provided by the trustworthy and efficient Font Awesome CDN. This allows for asynchronous loading of icons on my homepage, ensuring a seamless user experience. How ...

javascriptcssfont-awesomepagespeedgoogle-pagespeed

Confirm that the method has been called by utilizing the AVA testing framework

As I work on creating a unit test for my React component using tools like Ava and Enzyme, I encounter an issue. My goal is to create a simple unit test that checks if a certain method has been called. The test should pass if the method has indeed been call ...

javascriptunit-testingreactjsava

What is the best way to create and implement custom declaration files that are not available on @types or DefinitelyTyped?

I have encountered a situation where I am using an npm package named foo that is not available on DefinitelyTyped or may be outdated. Despite this, I still want to consume it under stricter settings like noImplicitAny, so I need to create custom definition ...

javascripttypescriptnpmdefinitelytyped

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

Currently, I am working on an interface where I need to implement the following structure: export interface Passenger { id: number, name: string, checkedIn: boolean, checkedInDate?: Date // <- Is it possible to make this f ...

javascriptangulartypescript

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

I have successfully implemented a countdown timer using session storage in my code. However, I am looking to enhance its functionality further by: Clearing the local session if the user leaves the site before the countdown timer finishes. Automatically c ...

javascripthtmltimerlocal-storage

ReactJS Chatkit has not been initialized

I made some progress on a tutorial for creating an Instant Messenger application using React and Chatkit. The tutorial can be found in the link below: https://www.youtube.com/watch?v=6vcIW0CO07k However, I hit a roadblock around the 19-minute mark. In t ...

javascriptreactjsreact-routerchatkit

Disable system discord.js

Hey there, I'm experiencing an issue with my code and could use some help. Every time I try to use my mute command, it keeps spamming "You need permission to use command". Below is the snippet of my code: client.on('message', message => { ...

javascriptnode.jsdiscorddiscord.jsbots

Navigating through routing resolves when making AJAX calls

I'm a beginner when it comes to working with Angular, and I've noticed that there isn't much documentation available on routing resolves. 1. Could someone explain how we can utilize resolves in Angular? 2. I have a requirement to make an A ...

angularjs

Unknown custom element error in Laravel and Vuetify

I encountered errors in my Laravel project, specifically with custom elements like this. [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found ...

javascriptlaravelvue.js

Issue on Heroku with Discord.js displaying a "Service Unavailable" message

Encountered a strange error while trying to launch my discord bot on heroku. Previously, I implemented a command handler for the bot to organize commands in separate files but faced multiple code errors. With the help of a member from this community, all e ...

javascriptnode.jsherokudiscord.js

What is the best way to specify the stream responseType for my client?

Is there a way to download a file from my express js app using AJAX instead of server-side handling? const response = await Axios({ method: 'GET', url: url, responseType: 'stream' }) Instead of piping the data directly to ...

javascriptnode.jsajaxexpressaxios

The issue of actions failing to flow from sagas to reducers in React.js

Upon user login, the success response is received but the action is not passed to the reducer. Strangely, during user registration, everything works smoothly. //saga.js import { put, takeEvery, all, call } from 'redux-saga/effects'; import {getRe ...

javascriptreactjsreact-reduxredux-saga

Transmit the identification number to the controller using ng-include

Is there a way to pass the id value from view to controller using ng-include? Here is how my view looks: @model Nybroe.FightPlan.Sql.Model.EventRecord @{ var eventId = Model.Id; } <div ng-app="tournamentApp"> <div ng-include src="'/Apps ...

c#angularjsmodel-view-controllerparameter-passing

Tips for invoking the href function in jwplayer with individual arguments

I need assistance with configuring jwplayer to load a list of href links one by one. Each href link includes a function that needs to be triggered automatically with specific parameters passed to JavaScript. Below is the code snippet I am currently worki ...

javascriptphpjqueryhtmljwplayer

What is the process for sharing your website content on Google Blogger?

I am currently developing a dashboard for a small business website and I would like to implement a feature that allows users to post directly to their Blogger blog from the dashboard of their own website. This eliminates the hassle of having to switch betw ...

phpjavascriptjquerybloggergoogle-code