Avoid allowing wysiwyg source code editor to alter the entirety of a website

Currently, I am implementing a WYSIWYG editor named "Jodit" on my website. This editor allows me to insert HTML code and add custom styling using the "!important" declaration, which can alter the CSS of the entire website.

For example, you can visit

Click on the "Change Mode" icon "

Then paste the following code:

<html>
<style>
    * {
        color: red !important;
    }
</style>
</html>

After adding this code, all text on the website turns red.

I would like to know how I can prevent a WYSIWYG editor from affecting code outside of its designated textarea?

Answer №1

If you want to target the content inside the WYSIWYG area specifically, consider making the selector more specific:

.jodit_workplace > * {
    color: red !important;
}

In cases where you can't control the content from the WYSIWYG editor and can't prefix the selector, using an iframe or shadow dom to isolate it from the rest of your page may be a solution.

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

Creating a fully responsive navigation bar for all screen sizes

Recently, I came across a helpful YouTube tutorial on creating a navigation menu using HTML and CSS. The main challenge I encountered was getting the width of my navigation bar to span 100% of the screen on all devices while maintaining a height of 30px. I ...

Perform a function on Angular 5

In my database, there is a table named settings. I have 2 backend endpoints: one for getting settings and another for updating settings. Now I am working on creating an Angular window to edit this table. I've set up an Angular Service to retrieve va ...

Looking to dynamically adjust row color based on status using ANGULAR 4

In my table, I have 6 columns: name, email, phone, company, status_1, and status_2. Both status_1 and status_2 can have two options: "1" or "0." My Requirement: I want to change the color of the row based on the following logic: if(status_1 is "1" ...

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: https://i.sstatic.net/2g5w8.jpg Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { ...

What is the best way to enlarge icons and space them out evenly along a single line?

Would anyone be able to assist me in increasing the size of and separating these three icons that are close to each other using CSS3 in a single line? I am utilizing Bootstrap5 and Google Icons. <link href="https://fonts.googleapis.com/icon?family= ...

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Press the button to center the div, press it again to align it to the left. This feature is compatible with all browsers except for IE6, which does not support margin: 0 auto;. How can I find a solution to this issue? The width of the div is not fixed and ...

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

Check the validity of the data by logging into another website

I've run into a bit of a problem while working on my website. Here's a brief explanation (using fake addresses), I have a website, www.website1.com, with lots of well-coded elements. You can log in to this website using www.website2.com. So whe ...

Creating a responsive navigation bar with Bootstrap步 is simple and effective

Thank you for taking the time to review my current code. The main issue I am encountering pertains to the responsiveness of the navbar. Whenever I zoom in or out, certain elements tend to lose their alignment and aesthetic appeal. Specifically, the navbar ...

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

Spin and flip user-submitted images with the power of HTML5 canvas!

I am currently working on a profile upload system where we are implementing image rotation using the HTML5 canvas object with JavaScript. Although the uploaded image is rotating, we are facing issues where parts of the image are being cut off randomly. So ...

Spinning icons in React: A step-by-step guide

Currently, I am attempting to create a spinning icon using React, but it seems like I might be overlooking something in my approach. Here is the return function that I have: return ( <div className="loader"> <p>Loading Dat ...

Error encountered: Unable to access attributes of an object that is not defined (specifically trying to read 'clientX')

Hey there! I'm having some trouble moving figures while moving the cursor. It's strange because I've done the same thing on another page and it worked perfectly: const scaleFactor = 1 / 20; function moveItems(event) { const shapes = do ...

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

What caused the submit button to suddenly change colors in such a peculiar manner?

In its natural state, the submit button appears in the default color, lacking any specific style when viewed in Chrome. Once the CSS rule input[type="submit"]{border-radius: 2px;} is applied, the button transforms, suddenly changing color and showing a sh ...

HTML/CSS: Issue with image grid layout where images of different heights are not wrapping correctly

I have a Wordpress-based web project in progress at the following link: The current setup of the post thumbnails grid on the website was done with the assumption that all thumbnails will be the same height. However, I am looking to modify it so that the t ...

Display the query results on a separate blade

In my original attempt, I intended to display the results in a modal but later decided to show them in a different blade. My goal is to fetch all comments related to a post using its post_id. However, I encountered the following error: The GET method is no ...

Transforming HTML 'img' elements into React components without losing styling: How do I achieve this with html-to-react?

I am seeking guidance regarding the usage of the html-to-react library. Consider the following html string: '<div> <img src="test.png" style="width: 100px;"/> <img src="test2.png" style="margin: 0px 4px;"/> </div>' ...