How Do I Set TinyMCE Border Radius?

Question

I am trying to set the border radius for the TinyMCE editor that I am using in my project. I've researched this a couple of times and can't seem to find an answer that works. I found a similar question here, but it doesn't seem to work...Adding border-radius to TinyMCE textarea

In my code, I have a TinyMCE directory with a Custom JS file, and it is using the parameters as I would expect...similar to...

tinymce.init({
  selector: 'textarea.tinymce',
  height: 300,
  width: '80%',
});

But I can't figure out how to incorporate a border-radius so that the entire editor has rounded corners. I've tried to set CSS around the editor but that doesn't seem to work either. I've got a great handle on border-radius, but for some reason it appears that TinyMCE requires some kind of special trick to get it to work.

Thanks in advance for any thoughts on this.

score 0 · Answer 1 · answered Aug 12 '19 at 14:33

0

The look of the editor is managed via the skin so if you want to change the look you will need to look at the CSS files of the lightgray (default) skin.

I would note that some aspects of the editor's design won't do well with rounded corners (e.g. the resize element in the lower right of the status bar).

answered Aug 12 '19 at 14:33

Michael Fromin

13,131
2
20
31

Thanks for the response. I've tried editing the lightgray skin, but no luck as of yet. – Steve Smith Aug 13 '19 at 17:00

score 0 · Answer 2 · answered Aug 14 '19 at 17:47

I finally figured it out. I was struggling because I had specified menubar: false...this was preventing the normal border radius setting from getting applied to my view. I ultimately used this setting in the init...

setup:function(ed) {        
    ed.on('init', function() {
        ed.getContainer().className += ' with-border';
    });
}

And then I modified the editor via CSS by inspecting the elements and modifying them via CSS. This is ultimately what helped me get the display I was after.

How Do I Set TinyMCE Border Radius?

2 Answers2