Content in TinyMCE styled with the default CSS of the application

Hello fellow developers;

I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itself, but rather ensure that the content typed within it matches the final published look.

Although TinyMCE meets all my editing needs, I still desire consistency in the visual presentation of the content.

I attempted to include: "content_css : "custom.css" but unfortunately, it didn't produce the desired result...

  <script language="javascript" type="text/javascript">
    tinyMCE.init({
      selector: "#issue",
      theme : "modern",
      mode : "textareas",
      plugins : "hr, code, wordcount, image, imagetools, table, paste, template",
      /*menubar: "insert,edit",*/
      /*toolbar: "image,paste, hr",*/
      paste_data_images: true,
      content_css : "visual/css/base.css",
      templates: [
        {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
        {title: 'Some title 2', description: 'Some desc 2', url: 'visual/mce/models/devel.html'}
      ]
    });
  </script>

Is there a method to ensure that the content adheres to the CSS styles utilized by our primary application?

Answer №1

Consider including inline: true in your setup. By doing so, you can eliminate the iframe wrapping and directly modify the specified target element within the page. The default (iframe) mode is designed to protect the content in the editor from the surrounding page - for instance, when editing on a CMS with a separate admin interface where you want to avoid applying admin-ui styles to the content.

It appears that inline mode may be more suitable for your scenario.

Answer №2

Big thanks to @dandavis for providing the solution.

It seems like the editor is generating multiple elements, including an iframe, which causes issues with CSS selectors used by the main application.

My strategy involves cloning the essential elements from TinyMCE and creating a new CSS file exclusively for the editor. This custom CSS will be integrated using the content_css argument, as shown below:

 /*custom CSS for TinyMCE content*/
 content_css : "visual/css/base.css",

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

How can I retrieve objects using the JSON function?

I need to design a function that returns objects like the following: function customFunction(){ new somewhere.api({ var fullAddress = ''; (process address using API) (return JSON data) })open(); } <input type= ...

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

Experiencing an excessive number of re-renders can be a common issue in React as it has limitations set in place to prevent infinite loops. This

I have integrated React context to access the login function and error from the context provider file for logging into the firebase database. I am trying to display any thrown errors in the app during the login process. However, I encountered an issue whe ...

Break down and simplify the code into individual components

<input type='button' class="myButton" onclick="document.body.style.cssText+=';background-image: url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';" value="S ...

Simple steps to dynamically alter CSS styles according to the current URL

I am working on a website where I want users to be able to change the background image and other CSS elements. Currently, my approach is to have multiple HTML pages that users can switch between using a dropdown menu and reload the page. For example: hre ...

Utilizing array iteration to display images

I am having trouble getting the images to display on my card component. The description appears fine, but the images are not rendering properly even though I have the image data in an array. Here is the Card Component code: export const Card = (props) =&g ...

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

I am attempting to expand an array of objects divided into two distinct inputs within a React component

There is an array of objects named estimate, with keys 'cost' and 'service'. By clicking 'Add', a new index (i) can be added to the array. The problem arises on the first cycle where {'cost': 2500, 'service&apos ...

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

I have a group of five bootstrap navigation tabs that are evenly spaced and visually appealing on desktop screens. However, when viewed on a mobile device, the text within the tabs becomes cramped together. How can I make the tabs stack vertically on mobil ...

The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11. Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CS ...

Leverage JSON data within an AngularJS controller

I have a JSON list in Angular that looks like this: vm.allnews = actualNews; After checking it with console.log, I can see that it's working fine and I am able to retrieve all news from the array list. Each news item has a title which I can display ...

Navigating through pages using Jquery's show and hide functionality

How come my item is not returning? I used the .show() method on the item. <div id="back">< back</div> <div class="item">item</div> <div class="content">My content</div> $(function(){ $('.item').on(&apo ...

Executing a jQuery AJAX function when the timeout occurs

My goal is to dynamically reload my jQuery DataTables without having to refresh the entire page in order to fetch new data. Here's the initial function I have set up to kick off the process: $(document).ready(function() { $.ajax({ url:&apo ...

Creating a fixed-size set in React with randomly ordered elements

I am currently working on a project where I need to retrieve a random array from a .json file using React. My goal is to create 16 cards, each displaying a number that appears twice. To ensure uniqueness, I am utilizing a Set, but I am facing an issue with ...

Retrieve the parent element of the selected tag within an iframe

I have an embed iframe that displays an HTML page. Now I am trying to retrieve the class of the parent item that was clicked. <iframe src="//example.com" id="frame" ></iframe> This is the CSS styling for the iframe: #frame{ width:380px; he ...

Executing javascript code within the success function of the $ajax method in jQuery: A step-by-step guide

The code snippet below includes a comment before the actual code that is not running as expected. $(document).on('click', '#disable_url', function (e) { e.preventDefault(); var items = new Array(); $("input:checked:no ...

I have a task of extracting information from a live Google map and generating a static Google map using API V3

I am working on a project that involves allowing users to create maps using Google Maps and then save the image. My current workaround uses both the Google Maps API V3 and the Static Maps API. The user can interact with the dynamic Google map by scrolling ...

What is the best way to showcase navigation and footer on every page using AngularJS?

I'm in the process of building a Single Page Application. I've decided to create separate components for Navigation, Section, and Footer. The Navigation and Footer should be displayed on every page, while only the Section content changes when nav ...

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

When writing CSS in our global file, we often define variables and styles like this: :root{ --orange:#e67e22; --black:#333; --light-color:#777; --border:.1rem solid rgba(0,0,0,.2); --box-shadow:0 .5rem 1rem rgba(0,0,0,.1); } *{ mar ...