Tips for styling custom buttons within the active editor popup of tinyMCE using CSS

Looking to enhance my tinyMCE active editor popup with custom CSS. Check out the screenshot provided for reference https://i.sstatic.net/vdVDF.png.

Below you can find the code snippet used as a reference:

tinymce.activeEditor.windowManager.open({
    title: 'Browse Image Gallery',
    file: "data/get_images_tiny.php",
    width: 500,
    height: 305,
    resizable: "no",
    inline: "yes",
    close_previous: "no",
    buttons: [{
        text: 'Upload Image from your PC',
        onclick: function () {
            //do something               
        }
    }, {
        text: 'Close',
        onclick: 'close'
    }]
});
javascriptcsstinymce-4

Answer №1

To effectively customize the style, it is recommended to override existing styles by creating a custom CSS file.

Configure Tinymce Initialization

editor_css : 'custom-editor.css'

Afterwards

.defaultSkin span.mce_upload {some_css: new_css_value}

Answer №2

To customize the appearance of all buttons with the .mce-btn button selector, you can use custom styles.

This styling information can be found in the skin.min.css

Additionally, there are other selectors within it, such as .mce-primary button

The CSS file is located at 

[path/to/tinymce/]tinymce/js/tinymce/skins/lightgray

Here, 'lightgray' represents the theme name.

You have the option to override these styles by creating your own editor.css

UPDATE

If you want to apply custom CSS to your popups, you can do so using the following method (reference):

tinyMCE.init({
    ...
    popup_css : "/mypopup.css"
});

Answer №3

This is one way to implement it:

When using tinyMCE, you can open the window manager by calling the following function:
    
tinyMCE.activeEditor.windowManager.open({
    file : "data/retrieve_images_tiny.php",
    title : 'Select Image from Gallery',
    width: 500,
    height: 305,
    resizable: "no",
    inline: "yes",
    close_previous: "no",
    buttons: [{
          text: 'Insert',
          classes: 'widget btn primary first abs-layout-item',
          onclick: 'close',
          id: 'insertButton'
      }, {
          text: 'Close',
          onclick: 'close',
      }]
});

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

Bulma's Grid System Spans Columns Across the Entire Viewport

Utilizing the Bulma CSS framework. In my attempt to arrange some elements, I am puzzled as to why, in a desktop view, the items do not transition to the next row once they exceed the viewport. Below is a snippet of code along with a link to a JS Bin exam ...

htmlcssbulma

Tips for concealing a div using an article until it is activated by hovering over it

I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...

javascriptcsshtml

Node.js used to create animated gif with unique background image

As I navigate my way through the world of node.js and tools like express and canvas, I acknowledge that there might be errors in my code and it may take me some time to grasp certain concepts or solutions. My current project involves customizing a variati ...

javascriptnode.jscanvas

Having trouble accessing dynamically generated elements using Selenium

I've been attempting to change the router's SSIDs using a Selenium script, but I'm encountering difficulty accessing any JS elements generated by the router page. I've tried various Expected Conditions and methods without success. Here ...

javascriptpythonseleniumweb-scrapingdom

Transforming JSON object to an array of arrays using JavaScript

Attempting to extract specific values from a JSON object and store them in an array can be quite tricky. Below is an example of what this process might look like: Example: var obj = { "1":{"class":2,"percent":0.99,"box":[0.2,0.3,0.4,0.5]}, "2 ...

javascriptnode.jsjsonmultidimensional-arrayjavascript-objects

How to resolve undefined callback when passing it to a custom hook in React Native

I'm facing an issue with passing a callback to my custom hook: export default function useScreenshotDetection(onScreenshot) { useEffect(() => { ... onScreenshot(); ... }, []); } Strangely, the callback is not being detected ...

javascriptreactjsreact-native

AngularJS ng-show will not function properly with newly added DOM elements

I am encountering an issue with ng-show directives on dynamically added DOM elements in AngularJS. The directives work fine when the page initially loads, but new elements that are added later do not have their expressions evaluated. Is there a way to prom ...

javascriptangularjsng-show

Execute JavaScript function after the window has finished loading, regardless of any asynchronous downloads

In my app, there is an initialise function that I want to execute only when two conditions are met: first, the window has finished loading ($(window).load()), and second, Typekit has loaded. $(window).load(function() { try { Typekit.load({ act ...

javascriptloadwebfonts

Searching and selecting columns in React using Material-UI

Currently, I am using Material-UI data tables and have implemented a search functionality similar to this Codesandbox example, which only searches the Name/Food column. This is my existing code snippet: const [filterFn, setFilterFn] = useState({ fn: items ...

javascriptreactjsmaterial-ui

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

javascripthtmlnode.jswebpack

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

I'm facing difficulties trying to figure out why I can't register my effects with NgRx version 7.4.0. Despite simplifying my effects class in search of a solution, I keep encountering the following error: main.79a79285b0ad5f8b4e8a.js:33529 Uncau ...

javascriptangulartypescriptreduxngrx

Learn how to implement the PATCH method specifically for the scenario when the user clicks on the "forgot password"

After clicking on the forgot password link, I want to display the password change form. However, I'm facing issues with calling the API to update the user's password. Below are the files I'm utilizing to develop the API, trigger events, mana ...

javascriptjqueryajaxajaxformforgot-password

Aligning a navigation bar with a hamburger menu in the center

I recently implemented a hamburger menu with some cool animations into my site for mobile devices. Now, I am facing the challenge of centering the menu on desktop screens and it's proving to be tricky. The positioning is off, and traditional methods l ...

javascripthtmlcssresponsive-design

Fetching data from a collection using Mongoose in Node JS

Currently working with MVC architecture. Seeking guidance on using the findOne({}) method in my loginController. I need to retrieve data from an existing collection, which already contains some information. My goal is simply to extract data from it. Apolo ...

javascriptnode.jsmongodbmongoose

Is it possible to bundle Live using Angular 2 and SystemJS-builder, even when attempting to load modules from node_modules?

I'm having a bit of trouble transitioning my angular 2 application into production. It seems to be searching for scripts within the node_modules directory. I'm fairly new to angular 2 and despite spending half a day looking for a solution, I can ...

javascriptangularjssystemjs-builder

Using the HTTP DELETE method in Node.js

Is there a specific configuration required before sending DELETE requests to a node.js application? I am able to send GET, POST, and PUT requests successfully, but for some reason DELETE requests are not functioning. When I try DELETE http://localhost:80 ...

javascriptnode.jshttprestexpress

Leveraging two AJAX requests within a single function

I am working on creating an ajax function to post data that I've retrieved using another ajax function. While I have figured out how to use a callback function, I am struggling with passing the data from one function to the other. Here is what I have ...

javascriptjqueryajaxcallback

Learn the process of dynamically expanding a specific Bootstrap menu item using jQuery!

To create a left vertical (sidebar) navigation menu, I will be referencing the "Example" located at https://getbootstrap.com/docs/5.0/components/accordion/. Assuming there are three HTML buttons: <button onclick="myFunction1()">Button 1< ...

htmljquerycssbootstrap-5

generating a dynamic tree structure with JSON by leveraging a database

It was brought to my attention that I am facing a unique challenge: I am trying to generate a JSON tree using Java/JavaScript with data sourced from a MySQL Database. I have not been able to locate the appropriate documentation for this task Any assistan ...

javascriptjavajsondynamic

The primary content division is trapped behind the side navigation bar

Why is my sidebar fixed on the left of the screen overlapping with the main content? I want the main content to be displayed next to the navbar and scroll up and down while keeping the nav bar in place, but no matter what styling I apply, it doesn't w ...

cssreactjs