CODEWITHSUNDEEP
csstinymce
Sachin
Sachin

Reputation: 1698

Proper way of applying custom CSS to TinyMCE editor

I integrated a TinyMCE ver 4.9.9 instance to my textarea of ID #mytextarea. It is being applied and here's the screenshot given by:

enter image description here

The code used to initialize the editor is:

tinymce.init({
    selector: "#mytextarea",
    height: 300,
    statusbar: false,
    menubar: false,
    plugins: "link lists placeholder",
    toolbar: "undo redo | bold italic underline | bullist numlist | link"
});

HTML:

<form method="post" action="form.php">
    <table align="center" border="0" width="50%">
        <tr>
            <th><label for="mytextarea">Content:</label></th>
            <td><textarea name="mytextarea" id="mytextarea"></textarea></td>
        </tr>
    </table>
</form>

Now I want to change the appearance of this editor e.g. remove box-shadow and applying border color of my own choice so that it can blend with my site's theme and color scheme.

I don't know exactly how to do it property according to their official docs. To achieve my requirements, I added content_css: "css/style.css" to tinymce.init({...});. My code becomes:

tinymce.init({
    selector: "#mytextarea",
    height: 300,
    statusbar: false,
    menubar: false,
    plugins: "link lists placeholder",
    toolbar: "undo redo | bold italic underline | bullist numlist | link",
    content_css: "css/style.css"
});

But I don't know what to do in my style.css. Whether should I have to apply my custom CSS to TinyMCE editor classes like this

.mce-tinymce {
    box-shadow:none;
}

But even after applying above, nothing happened. The box-shadow didn't remove from editor.

So I went to my main file in which I wrote TinyMCE code above and wrote my custom CSS as:

<style type="text/css">
.mce-tinymce {
    box-shadow:none !important;
}
</style>

and it did work for me.

You can see the box-shadow is gone away now.

enter image description here

So can anyone please suggest me what is proper and accurate way of applying custom CSS to TinyMCE editor instance? Is my second approach right or wrong? If it is wrong then how to catch editor's classes, apply our own CSS and where to write them?

Upvotes: 0

Views: 3315

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13726

In order to answer your question we first need to know how TinyMCE itself gets rendered to the page and what content_css actually impacts.

If you use your browser's dev tools to inspect the page after TinyMCE appears you will see that TinyMCE renders itself as a series of div elements and a single iframe.

The menubar, toolbar(s), and statusbar are all rendered as a nested group of div elements on the page where you invoke TinyMCE. The rectangle where you actually type in content is an iframe.

If you want to inject CSS into the iframe so that it impacts the content you see in TinyMCE you need to use the content_css setting. This injects the CSS you provide into the iframe.

By default, the look and feel of the editor itself (e.g. menubar, toolbar(s), and statusbar) is handled by the TinyMCE skin. If you want to impact the look and feel of the editor's menubar, toolbar(s), and statusbar you can either (a) modify your skin's skin.css file or (b) do what you did and add your own CSS to the main page to override the settings in skin.css. Neither is right or wrong and they both will get to the end result you want to accomplish.

Upvotes: 1

Related Questions