Preserve original formatting in CKEditor: Maintain source code indentation

My CKEditor configuration looks like this:

var wysiwyg = ck.replace(el[0], {
  allowedContent: true,
  protectedSource: [/\r|\n/g]
});

I'm inserting HTML source into CKEditor as:

<div style='font-weight: bold;'> 
  <div> 
    <div> test </div> 
  </div>
</div>

When I use wysiwyg.getData(), this is the output I get:

<div style="font-weight: bold;">
<div>
<div>test</div>
</div>
</div>

Is there a way to maintain the indentation in CKEditor according to the source?

I've attempted using different regular expressions within protectedSource to preserve everything between HTML >...< like /(?:\>)([^<]*?)(?:\<)/g https://regex101.com/r/eV4dO0/1 but haven't had any success.

Answer №1

Is it possible to maintain the original source formatting?

Unfortunately, it is not. The content goes through various processes before reaching you, which may not preserve every tab or space character. It's essential to keep in mind that CKEditor is designed as a WYSIWYG editor, not for coding purposes.

Answer №2

To properly configure CKeditor, make sure to include the following two lines in the Config file:

config.protectedSource = [/\r|\n/g];
config.allowedContent = true;

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

What is the best way to load $cookies into an Angular service?

After defining an Angular service where I need to access a cookie, I noticed that the $cookieStore is deprecated and that it's recommended to use $cookies instead. This is how my service is set up: 'use strict'; var lunchrServices = angul ...

The click event in jQuery/JavaScript is not functioning

Although it should be as simple as breathing, I just can't seem to spot the mistake in my code... I attempted to add a click event to a div with a unique ID, but unfortunately, it's not working at all. This issue persists with both jQuery and Ja ...

Passing parameters from a div to a single page component in Vue.js: A complete guide

There is code that appears on multiple pages: <div id="contact-us" class="section md-padding bg-grey"> <div id="contact"></div> <script src="/dist/build.js"></script> </div> Included in main.js is: im ...

Update data in PHP dynamically without reloading the page

It would be great if they are doing well! I have encountered a minor issue - everything seems to work perfectly, but it doesn't quite meet my requirements. I am referring to this particular function: <script> var previous = null; var current = ...

Angular 1.5's Ui-Router 1.0.0-beta.3 is missing a template configuration for 'resolve@root'

Struggling to make UI-Router's resolve method function properly, I'm encountering an error that I haven't been able to resolve. Error: No template configuration specified for 'resolve@root' Here is the definition of my stateProvid ...

Uncaught Node.js Error Event Handling

Hello everyone, I'm new to this and currently working on writing a code that utilizes node's event emitter. Take a look at the code snippet below: var EventEmitter = require('events').EventEmitter; var errors = require('./errors&a ...

Interactive Vue.js canvases that adapt and respond to various

I am currently working on adjusting my canvas to fit within its container in a Vue component. When I call resizeCanvas() in the mounted hook, I notice that the container's height and width are both 0. How can I create a canvas that dynamically fits it ...

Issue: Error encountered while trying to use the removeAttribute() function in Selenium and Java: missing closing parenthesis after argument list

WebElement removeReadOnly=driver.findElement(By.xpath("//input[@id='mat-input-0']")); js.executeScript("document.getElementBypath('//input[@id='mat-input-0']').removeAttribute('readonly');",&quo ...

The property 'body' cannot be read because it is undefined

I have been attempting to incorporate passport logic into my controllers file, but I encountered an issue. When I place the logic inside the controllers, it gives me an error message saying "Cannot read property 'body' of undefined." However, whe ...

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

Having trouble getting the Grid class to work in Tailwind with NextJs, any suggestions on why it might not be

Having some trouble with the grid classes in Tailwind not functioning as expected in my code, even though other classes like mt-10 and flex are working perfectly. I've tried applying flex to the parent container and removing it, but the closest I&apo ...

Is it possible to programmatically open the Firefox browser console using JavaScript within an extension?

I attempted to link toJavaScriptConsole() with a button, however it is not functioning (undefined reference error) Is there a way to code an XUL button that will launch the firefox browser console, allowing us to view logs from the extension? ...

Error on the main thread in NativeScript Angular for Android has not been caught

As a beginner in the field of mobile development, I am currently exploring NativeScript and encountering an error in my Android application. https://i.stack.imgur.com/BxLqb.png You can view my package.json here ...

Does the Loopback Model have an "exists" method that includes a where clause?

I am interested in querying the data using filters to check for existence. Does loopback support this method of querying? If so, could you provide some guidance? myModel.exists({where: {and: [{city: "London"}, {gender: "F"}]}}, function(err, bool){ if(bo ...

Exploring ways to modify the default Keep Alive behavior in Express JS

While stress testing a nodejs express server, I discovered that it automatically includes a "Connection: Keep-Alive" header. However, my application only needs to expose a web api to the client and does not require the connection to remain open after recei ...

The elegant-admin template's mobile navigation toggle is missing

I recently downloaded an admin theme and added the CSS to my Django static files. However, after doing so, the mobile toggle feature disappeared. I double-checked all the CSS and JS links in the index template, and they are correctly linked to the paths, b ...

Encountering a Next.js prerendering issue when using getStaticPaths

I am currently developing a Next.js application. Here is the structure of my files: cpanearme -components -listitem.js -pages -home -index.js -firm -[id].js Below is the code for a list item that redirects to the dynamic rout ...

Implement a mouseover event on the axis label using D3.js and JavaScript

Is it possible to trigger a mouseover event on the y-axis label in a chart? For instance, let's say we have a scatter plot with labels "area1", "area2", and "area3" on the y-axis. When a user hovers over the label "area1", a tooltip should appear disp ...

Locally hosted website failing to transfer login details to external domain

Having trouble with an ajax call that is supposed to retrieve data from a web page, but instead returns a jQuery parse Error. Even though I can access the page directly, the ajax call doesn't seem to be working and storing the result properly. Below ...