Ensure proper formatting in CKEditor for any text that is not already correctly formatted in HTML

I am dealing with an older ASP.NET application that utilizes the freetextbox WYSIWYG editor. The issue is that it saves HTML in a peculiar format into the database.

<TABLE class=mceVisualAid border=0 width=560 align=center height=395>
<TBODY>
<TR align=center>
<TD class=mceVisualAid><SPAN>
<H1 style=COLOR: rgb(0,0,0)    align=center><SPAN><SPAN><SPAN><STRONG><FONT size=3><STRONG><FONT size=3><STRONG><FONT size=2><STRONG><FONT size=3> Message</FONT></STRONG></FONT></STRONG></FONT></STRONG></FONT></STRONG></SPAN></SPAN></SPAN></H1>
<H1 style=COLOR: rgb(0,0,0) align=center><SPAN><SPAN><SPAN><STRONG><FONT size=3><STRONG><FONT size=3><STRONG><FONT size=2><STRONG><FONT size=3>16 August 2013</FONT>

Now, I have switched to using the ckeditor WYSIWYG in my ASP.net MVC application, which relies on the same data saved in the database. Unfortunately, I am struggling to find an optimal way to display this HTML in the editor. Here is a snippet from my config.js file for ckeditor:

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.entities = false;
config.basicEntities = false;
config.entities_greek = false;
config.entities_latin = false;

};

Upon rendering, the output appears like this: https://i.sstatic.net/gFlET.png

javascriptckeditor4.xfreetextbox

Answer №1

Consider implementing the following code in your View:

@Html.Raw(HttpUtility.HtmlDecode(Model.MyContent)).ToHtmlString();

Make sure that the CKEditor input is validated for any potential cross-site scripting (XSS) attacks or illegal tags.

One way to address this issue is by utilizing an external anti-XSS library and running the content through a sanitizer before saving it to the database. It's crucial to perform this process on the Server-side.

Here is a suggested anti-XSS library, although there may be better options available since my experience with this one is dated:

https://msdn.microsoft.com/en-us/security/aa973814.aspx

Answer №2

Ensure to decode these htmlentities into real characters for proper rendering.

An effective way to achieve this in JavaScript is:

var htmlEntities = $('#MyId').ckeditor();   //Or any method of obtaining data 
var pureHtml = $('<textarea />').html(htmlEntities).text();  //Conversion

Alternatively, you can use a cleaner approach like the following:

function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // Remove script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'<>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

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

Unable to complete 'drawImage' operation in react-image-crop

I'm currently working on cropping an image with the 'react-image-crop' package and storing the output in the result variable. import React, { useState } from 'react' import ReactCrop from 'react-image-crop' import ' ...

javascriptreactjsreact-image-crop

Firestore query is not displaying the expected data, resulting in an empty array being returned

I've encountered an issue where my query is returning an empty array. Despite double-checking for errors and typos in the query, no error messages are popping up. This problem arose while working on a learning project inspired by Firehip's NextJS ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Integrating Dynamics CRM with an External Source to Trigger Workflows

Scenario: Imagine a scenario where you want to trigger an existing workflow or a custom action from a webpage located outside the CRM Dynamics environment, such as MS CRM 2011-2013-2015-2016 and 365. Potential Solution: One possible solution could be to ...

javascriptrestcontrollerdynamics-crmworkflow

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

javascripthtmlcssnode.jsagora.io

Difficulty encountered when assigning object properties as callback results in node-tesseract package

I'm attempting to utilize the outcomes of a callback function as properties of an object. Here is an example of how I am implementing the module I am constructing: var Capture = require("./Capture.js") const example = async function() { let scr ...

javascriptnode.jsobjectcallbacktesseract

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

I am in the process of building an accordion group with bootstrap 3. Here is the code I have so far: <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <div class ...

javascriptjqueryhtmlcsstwitter-bootstrap

When dynamically accessed, the property of a JSON object is considered "undefined"

I'm running into trouble trying to access properties of a JSON object in my JavaScript code using obj[varWithPropName]. Strangely, it does work when I use obj["PropName"]. Here's a simplified snippet for reference: import * as CharInfo from &ap ...

javascriptjsonobject

Is there a quicker method for toggling the visibility of an html element?

Is there a more efficient method to show/hide over 20,000 DOM elements? I've noticed that using element.style.display = "none" is very slow. I suspect this is due to too many reflows in the browser. However, simply using element.style.visibility = ...

javascripthtml

The API endpoint does not include the Access-Control-Allow-Origin header on its resource

I have been attempting to utilize jQuery XHR to send a basic GET request to an API on Zillow. The response is visible in my browser and Postman, displaying correct results. Although I have redacted my API key below, the request itself could not be more str ...

javascriptjqueryajaxxmlhttprequestcross-domain

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

javascripthtmlajaxformspost

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

I'm dealing with two PHP files called card_process.php and payment.php. My goal is to transfer data from the cart_process page to the payment page. Here's a snippet of the code: In cart_process.php: $paynow = "<button type='submit' ...

javascriptphpjqueryhtmljson

Generate a new tree structure using the identifiers of list items within an unorganized list

Attempting to convert the id's of li's in a nested unordered list into valid JSON. For example, consider the following list. To be clear, the goal is not to create the UL list itself, but rather the JSON from the li id's <ul class="lis ...

javascripthtmljson

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

What's the most effective method for implementing dynamic navigation in NextJS using Firebase integration?

Excited to begin building a web app using NextJS and Google's Firebase. This app will have both an admin panel and a public site, with the ability for the admin to edit the navigation of the public site. I'm debating whether it's wise to fet ...

javascriptreactjsecmascript-6next.js

Changing the background color of required inputs that are empty using jQuery

I need help customizing the background color of required input fields that are left empty when a user submits a form. Some of the fields are optional, but I want only the required ones to be highlighted in red. Specifically, the required fields have been ...

javascriptjquery

The order of event handlers in jQuery

I am currently setting up event binding for a text element dynamically. Take a look at the following code snippet: <input type="text" id="myTxt" /> <script type="text/javascript"> function attachEvent1(element){ element.keyup(func ...

javascriptjqueryhtmlevents

How can you transform the outcome of a TYPO3 repository search into a JSON format?

Is it possible to convert the outcome of a "findAll()" function on a Repository into a JSON object, make changes to specific properties in JavaScript, and then send it back to the Action, converting it again for use by the Action to persist it in the datab ...

javascriptjsontypo3

The Quickest Way to Retrieve Attribute Values in JavaScript

I'm trying to access a specific attribute called "data-price". Any tips on how I can retrieve the value of this attribute using this syntax: Preferred Syntax div[0].id: 48ms // appears to be the quickest method Alternative Syntax - Less Efficient ...

javascriptjqueryperformance

What makes using the `@input` decorator more advantageous compared to the usage of `inputs:[]`

In defining an input on a component, there are two available methods: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable implements OnInit { displayEntriesCount: number; Alternatively, it can be done like this ...

javascriptangular

Incorporating a basic search feature into Ajax

At the moment, only results appear when you modify the query. I want to modify this to allow user input. I have set up the fields, but I need help adjusting my ajax code to accept the new search criteria which is crucial for functionality. This is what m ...

javascriptjqueryajaxjsonsearch