"Enhance your text with stylish formatting using the

Here is the code snippet I'm currently using to style text:

    'formats': {
        'format_code': {
            'block': 'pre',
            'styles': {
                'color': '#000000',
                'backgroundColor': '#f0f0f0',
                'fontFamily': 'monaco,consolas,courier new,monospace',
                'fontSize': '1.0em',
                'width': '80%',
                'minHeight': '5.0em',
                'maxHeight': '15.0em',
                'overflow': 'auto',
                'border': '1px solid #999999',
                'padding': '1.0em'
            }
        }

I received this code snippet but now I want to modify it to use a CSS class.

Could someone guide me on how to achieve this? I have limited knowledge of tinyMCE.

csstinymce

Answer №1

The styling in CSS remains relatively consistent. CamelCase properties are converted to dash-separated in the CSS, and any fonts with spaces must be enclosed in quotation marks.

.customSelector {
    color:#000000;
    background-color:#f0f0f0;
    font-family:monaco,consolas,"courier new",monospace;
    font-size:1em;
    width:80%;
    min-height:5em;
    max-height:15em;
    overflow:auto;
    border:1px solid #999999;
    padding:1em;
}

Presumably, you'd like to include this style in the drop-down menu under Styles in TinyMCE. If you intend to add it to the Format dropdown, a different configuration setting will be necessary.

To introduce a new Style selection in the dropdown, ensure the CSS class rule above is stored in a separate .css file and then configure TinyMCE as shown below:

tinyMCE.init({
    theme:'advanced',
    content_css:'path/to/css/file',
    style_formats : [
        {title : 'Custom Style', block : 'div', classes : 'myClassSelector'}
    ]
});

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

The slideUp and slideDown functions are not functioning properly

Whenever a user clicks on image-exp, I want description-exp to slide down while other description-exp slides up. I am currently using a Bootstrap template available at this link. To demonstrate the issue, I created a JSFiddle that can be accessed here. H ...

jquerycsstwitter-bootstrap

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...

cssvariablesnext.jstailwind-css

Unable to create scrolling functionality for the div in Bootstrap

I'm working with a code that includes a text input for users to enter information, along with a panel above the text input that displays what the user has typed. I want the height of the panel above the text field to be set so that it becomes scrollab ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Implementing a toggle switch on your Odoo website the right way: a step-by

I am looking to implement a toggle switch in the header of my Odoo template. I came across this Bootstrap code snippet: <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" ...

htmlcsswebbootstrap-4odoo

Using CSS to add a resize handle and implement mouse events in Chrome

While experimenting with the resize property in CSS, I encountered an issue. I have a div that contains a canvas element. .resizable { resize: both; overflow: hidden; border: 1px solid black; } div { height: 300px; wi ...

css

Differentiating "anchor links" from standard links in CSS is crucial for effective styling

Trying to style "anchor links" differently in CSS compared to regular Links. Any suggestions on how to target Anchor Links specifically? Are there pseudo-elements or checks available to identify if a Link is an Anchor Link? I'm working on ...

htmlcss

Adjusting Text Color on Buttons

I am looking for a simple button with clear color and black text, but the default button has white text. I need a way to change the text color. Check out my current app <View style={styles.fastlog}> <Button style={styles.bouton} title= "Con ...

cssreactjsreact-native

Tips for adjusting border colors based on the current time

Trying to change the border color based on the opening hours. For example, green border from 10am to 9:29pm, yellow from 9:30pm to 9:44pm, and orange from 9:45pm until closing at 10pm. The issue is that the colors change at incorrect times beyond midnight. ...

javascripthtmlcss

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

What is the best way to achieve separation of concerns between HTML, CSS, and JS using this HTML structure? <nav role="navigation" class="site-nav js-site-nav"> <ul class="site-nav__list"> <li class="site-nav__item"><a href="#" ...

javascriptjqueryhtmlcssbem

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

javascriptjqueryhtmlcss

Modifying the color of an SVG shape with a checkbox toggle

Is there a way to dynamically change the fill color of an SVG shape by clicking on a checkbox? I have managed to achieve this functionality, but when I enclose the checkbox input in a div tag, it stops working. #circles { fill: #00ffff; } #circ-toggl ...

htmlcsssvgcheckbox

What is the best way to display just four boxes on a screen that has a scrolling element?

I have a container element with a specific width (while the height can vary) and a scrollbar. Inside this container, there are boxes. Each box has dimensions equal to half of the width/height of the container with the scrollbar. My goal is to display only ...

twitter-bootstrapcssflexboxbootstrap-4

Find the initial element using the class name to retrieve the CSS properties

.class + p:first-child{ } The code above isn't functioning properly, unless it's an element instead of a class, like p:first-child. <div class="wrap"> <h3></h3> <div style="clear:both"></div> <p></p> & ...

csscss-selectors

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

javascriptcsstwitter-bootstrapbootstrap-4

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

The content div sits atop the full-width image instead of being displaced downwards

Featuring a stunning full-width image: .image { background-image: url(http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg); background-position: center center; background-repeat: !important; position: absolute; ...

jqueryhtmlcssfullscreen

Having Trouble with Navbar Toggler Functionality in Bootstrap 5

I'm currently working on a responsive webpage using Bootstrap 5, and I've encountered an issue with the Navbar. The toggle button isn't functioning properly – nothing happens when clicked. I've tried looking through the official docu ...

csstwitter-bootstrapnavbarbootstrap-5

Showing information in a tree structure using HTML, CSS, and JQuery

Trying to figure out how to present a large amount of data in a tree structure. Each node could have multiple children and parents, requiring a dynamic representation. I've explored various JavaScript libraries like D3 and Raphael, but unfortunately, ...

javascriptjqueryhtmlcsstree

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

javascriptjqueryhtmlcss

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss