Customizable Themes for Advanced Text Editor

Incorporating CKEditor on a UserControl within our web application has been successful in loading default templates both locally and on the server. However, I encountered an issue when attempting to fetch templates from a database table, convert them into JSON format, and write them to a JavaScript file for integration with CKEDITOR.template_files.

The generated JS content in the file looks like this:

CKEDITOR.addTemplates('templateskey',{imagesPath:'',templates:[{title:'LCH - Complaint', image:'', description:'Message Template - Complaints', html:'HtmlContent'}]});

The challenge arises on the server where the dynamically created JS file appears to be blocked due to loading over HTTPS or being unable to locate the file.

[blocked] The page at 'https://...' was loaded over HTTPS, but ran insecure content from 'http://...' (page not found URL): this content should also be loaded over HTTPS.

Subsequently, CKEDITOR.config cannot load the "templatesKey" template and throws the error:

Uncaught TypeError: Cannot read property 'imagesPath' of undefined

To address this issue, I have downloaded the ASP.Net version of CKEditor and integrated it into my project. In the code-behind, I am setting myCKEditor.TemplatesFiles and myCKEditor.Templates as follows:

myCKEditor.TemplatesFiles = "['" + relativePath + "']";
myCKEditor.Templates = "templateskey";

Could the problem stem from the dynamic generation of the JS file or from the templates plugin loading content over HTTP instead of HTTPS? Is there a more efficient method to add templates dynamically to CKEditor?

Answer №1

During a conversation with my knowledgeable friend who specializes in SSH and HTTPS, we identified a possible limitation within HTTPS. Due to the dynamic generation of content, HTTPS may perceive the content as a potential threat, leading to security concerns.

Utilizing CkEditor for loading templates via AJAX proves to be an effective solution to address this issue.

If you are working on ASP .Net projects, consider constructing a Handler and invoking it through ajax to return JSON data.

For instance, below is an example of the handler:

//Make sure to implement IRequiresSessionState if session state information is required
public class TemplateHandler : IHttpHandler, IRequiresSessionState
    {
        // Add your implementation logic here.
}

Next, initiate the Ajax call as shown below:

CKEDITOR.on("instanceReady", function () {
    try {
        var httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = function () {
            var json;
            if (this.responseText == "")
                json = "";
            else
                json = JSON.parse(this.responseText);

            var template = {
                imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
                templates: json
            };
            CKEDITOR.addTemplates('myTemplates', template);
        };
        httpRequest.open('GET', '/handlers/templatehandler.ashx');
        httpRequest.send();
    } catch (ex) {
        console.log(ex);
    }

});

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

Solving the problem of Axis label alignment in Three.js grid and techniques for visualizing x, y, z data on

I have been tasked with plotting well deviation surveys on a 3D grid. After referencing several articles online, I successfully created a 3D grid of the required size. However, I am currently struggling with positioning the labels for the x, y, and z axis ...

Error: The module cannot be located due to a recursion issue in resolving within the Angular application

Trying to import my module import { waitProp } from 'wait-prop'; Encountering the following error: ERROR in ./src/app/qr-scanner/qr-scanner.component.ts Module not found: Error: Recursion in resolving Stack: resolve: (/Users/gkucmierz/workspac ...

Converting an HTML template that loads external HTML files into ReactJS

Currently working on a web project that utilizes ReactJS. The template I am utilizing includes external JavaScript files that load remote HTML content, as shown below: <header role="banner> <script type="text/javascript" src="/remote/webassets/ ...

Explore the associative array within a JSON using jQuery to extract and manipulate the values within the array

I'm working with a JSON file containing surnames and first names in an array, along with other objects. How can I specifically extract the names "Jhon" and "Jason"? Below is a snippet from my JSON file: [{ "surname": "Vlad", "first_name": [ ...

Acquire a handle on the object being hovered over in three.js using react

Currently, I am utilizing the react-three-fiber library to render a scene containing numerous smaller objects. My goal is to make all of these objects hoverable within the scene. Additionally, I aim to have access to the hovered objects so that I can manip ...

MongoDB failing to display Mongoose model fields

Currently, I am immersed in a personal project where I am constructing a web application and diving into the world of node.js. The aspect I am currently focused on involves the uploading of a CSV file, converting the CSV data into a JSON object, and storin ...

Why do two date type variables have identical content?

I'm trying to grasp why the value of d1 changes in each alert(). Any insights would be greatly appreciated. Thanks! <script> d1 = new Date("01/01/2015"); d2 = d1; alert(d1); d2.setDate(d2.getDate()+10); alert(d1); </script> ...

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

Trying to access a JSON file located one directory above the NextJS application directory can be tricky. In a standard JavaScript setup, you might use the following code: var fs = require('fs'); var data = JSON.parse(fs.readFileSync(directory_pat ...

The Redux state is not being refreshed

I've been attempting to update the redux store by fetching a list of group names using axios within the action. Despite receiving a response from the API call, the redux store fails to reflect the updated data. FileName: actions/index.js CODE: expo ...

How can you change a CSS property in Ember using a view and then display it?

I have a specific color saved in my database as text (for example: "#FFFFFF") and I am looking to display it similarly to the way shown in this demonstration: http://jsfiddle.net/rLtb7dc7/ This is what I currently have... HTML: <span class="colorpre ...

Modal displaying undefined value with jQuery

I have been attempting to display data from a database in a table within a modal using the provided code. However, I keep encountering an issue with receiving an undefined value. Here is the accompanying image: https://i.sstatic.net/fPTIW.png Modal HTML ...

The highest and lowest points of the visible image within a transparent PNG file

As a newcomer to Three.js and graphics in general, I've been on the lookout for a method to identify the highest and lowest visible points in a PNG image with transparency. I understand that graphics manipulation involves manipulating an array of pixe ...

"Utilizing SignalR for Real-time Communication in ASP.NET WebForms

I found the need to incorporate SignalR library into one of my projects. So, I took on the task of creating a simple application to understand its functionality better. My app is based on several tutorials demonstrating how to create a chat room. The uni ...

What is the best way to align my content alongside my sidebar?

I am facing some challenges with my website layout because I used Bootstrap to integrate a sidebar. The sidebar has caused issues with the positioning of my content, and I'm struggling to align it properly next to the sidebar on the left side. Please ...

Incorporating search engine optimization into a React project

Currently, I am tackling a React js project and have been assigned the task of incorporating SEO into it. I have attempted to find some open source resources that outline a step-by-step process on integrating SEO, as well as how to implement tags and end ...

The functionality of the webservice is not functioning properly

I'm currently working with Express and NodeJS to create a simple hello world webservice. I am attempting to call this webservice in ReactJS using Axios, but I am encountering issues with the response from the webservice. Below is my code for the webse ...

Update the 'duplicate' buttons according to the position in the array

My app features 14 buttons, each generating a replica button with the same text when clicked. The pre-existing buttons are numbered to aid in iteration. I'm currently attempting to organize the newly created replica buttons in ascending order from lef ...

What are the ways to implement global functions in Vue.js?

I have a function that formats dates without time. I want to reuse this function in multiple components. What is the recommended approach for handling this scenario? Should I use directives, filters, or another method? How should I go about defining this ...

What is the best method for verifying that audio has not been loaded correctly?

After creating a script to scrape for mp3 audio file URLs and load them into my HTML audio element's src, I encountered an issue where some of the URLs were not functioning properly. As a result, the audio was unable to execute the load() method since ...

Updating the scope in AngularJS/jQuery

I'm currently working on integrating AngularJS into a legacy system that heavily relies on jQuery. I'm facing some challenges when trying to update the scope after retrieving data from an Ajax call. Essentially, the system includes a dropdown th ...