Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote is situated.

An easy way to observe this issue is by visiting the summernote.org website and inserting the provided css reference into the online editor (make sure to switch to code view first). You will notice that the toolbar and other elements on certain pages become center-aligned, causing unintended visual changes due to the injected css:

<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />

We have attempted to contain Summernote within an iframe tag, but unfortunately, this approach does not resolve the issue. Is there a method to isolate Summernote in order to prevent this css "leakage" to affect the surrounding page?

Just for your information, we are working with asp.net Razor pages.

Thank you. James

javascripthtmlcssrazorsummernote

Answer №1

Through extensive investigation, it has been discovered that Summernote does not function within its own iFrame, causing any CSS contained in it to spread to the entire page. Although this issue has been noted by others, I do not currently have access to those specific sources of information.

As a result, we ultimately made the decision to switch to ckeditor, which is proving to be a more suitable solution for our requirements.

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

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui

regular expression for replacing only alphanumeric strings

I'm currently developing a tool that tags alphanumeric words based on the option selected from the right-click context menu. However, I am facing issues when a group of words containing special characters is selected. I have been using the following ...

javascriptregex

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

The map failed to display any information

<div> {!props.isLoading && <div> {normalizedData.map((outerObj,index) => { { <p className="space_name"> {outerObj.space_name} </p> ...

javascriptreactjs

After the ajax call has finished loading the page, I would like to toggle a particular div

When I trigger a click event on an element, it calls a function with Ajax calls. How can I toggle a div (which will be loaded after the Ajax call) once the page is loaded? function triggerFunction(){ $("#trigger_div").trigger("click"); $("#to ...

javascriptjqueryajax

Modifying arrays in ReactJS

Having trouble editing my array list, need some help. I can update a single input value successfully, but struggling with updating the entire array. Any suggestions on why the method isn't working and how to edit the array? When I try to store data ...

javascriptreactjs

How to retrieve email input using SweetAlert2 in PHP?

Hello there! I'm curious about the most effective method for integrating PHP with Javascript. My goal is to execute some coding tasks once an email address has been entered. swal({ type: "success", title: "Congrats!", text: "Please enter your P ...

javascriptphpsweetalert2

The issue of background-attachment: fixed not functioning properly on Safari

Currently, I have the following code implemented on an element that extends 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no- ...

csssafaricross-browserbackground-attachmentbackground-size

Include the image source in the array

Currently, I am utilizing this loop to showcase images using Smarty {foreach from=$gallery item=image key=KEY} <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 smallImage"> <img ng-click="bigImage('/files/galleries/{$image.gallery ...

javascriptphpangularjssmarty

jQuery setInterval is not functioning as expected

I need help comparing two password fields and displaying a Popover message if they do not match. HTML <div class="form-group col-lg-6"> <label>Password</label> <input type="password" class="form-control" name="password" id="p ...

javascriptjquery

Managing extensive text-based passages or titles within React.js

I'm curious about the most effective way to store lengthy text-based HTML elements like <p>, <h1>, <h2>, <h3> in React.js for optimal semantics. After delving into the realm of react.js documentation, I grasped that we have the ...

javascriptreactjs

Tips for designing a three-line label: positioning text in the middle, above, and below

I have a label that looks like this: https://i.sstatic.net/q0DaR.png Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'? https://i.sstatic.net/aJapG.png - reference image T ...

htmlcssbootstrap-4css-position

Changing Background Images Based on Screen Size in CSS Media Queries

Hey there, I am currently using two different header images - one for desktop and another for both tablet and mobile devices. I am wondering how I can automatically switch from the desktop header image to the mobile/tablet header image when the screen siz ...

htmlcssresponsive-designmedia-queries

Can I get the audio download for ReCaptcha?

I'm seeking guidance on what I might be doing incorrectly Referring to the code provided in: How to interact with the reCAPTCHA audio element using Selenium and Python My goal is to obtain the src file for the audio to download it. To achieve this, ...

pythonhtmlpython-3.xselenium

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Is it possible for data passed through props on Vue.js router-view to be visible in browser developer tools?

I have passed several props to the router-view component in this manner: <router-view :zipchange="zipchange" :accountitems="accountitems" :accountloaded="accountloaded" :profilepic="profilepic" /> Upon inspecting an element in the browser's de ...

javascriptvue.jsvue-router

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

javascripthtmlnode.jsexpress

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

I am currently experimenting with generating sentences accompanied by draggable text boxes. To achieve this, I intend to construct the following HTML structure using JavaScript exclusively: <div> <p>Data1<span class = "smallBox droppabl ...

javascriptjqueryhtmlcss

By including "on click" as a trigger, child nodes in the (_hyperscript) can be activated

Currently, my goal is to design a menu that keeps track of whether the user has expanded or collapsed a menu item and its sub-menu items. The issue I'm facing is that the "_"on click"" event gets "attached" to all child elements. I have sco ...

htmlhyperscript

Navigate through set of Mongoose information

I have a challenge where I need to retrieve an array of data from Mongoose, iterate through the array, and add an object to my Three.js scene for each item in the array. However, when I try to render the scene in the browser, I encounter an error that say ...

javascriptnode.jsexpress