Adding border-radius to TinyMCE textarea

问题:

Is it possible to add a border-radius to TinyMCE'd textareas? It's kinda killing me that I have rounded corners on my input fields etc, but I can't get it working on my textarea.. Probably because TinyMCE is turning it into an IFRAME? Is there any way around this? Thanks a lot!

回答1:

One solution is to use the editor_css setting. This css gets applied after the default tinymce css is loaded thus overwrite the default one.

I created a file called editor.css containing the following

.defaultSkin table.mceLayout {border:1px solid black}

and set the tinymce parameter using editor_css

editor_css : 'path_to_css'.'/editor.css',

This creates a nice thin black line around the editor.

回答2:

In order to add a border radius to a tinyMCE text area you will have to add the following css rules at the bottom of to the file: /themes/advanced/skins/default/ui.css. Note: If your are using a custom skin you will have to add these rules inside the css file you created for that skin.

#article_tbl, #article_ifr{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

$article_tbl{
  border: 1px solid silver;
}

#article_ifr{
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;    
}

#article_tbl{
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */    
}

.mceToolbar{         
  -webkit-border-top-left-radius: 12px;
  -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.defaultSkin table.mceLayout tr.mceLast td {
  border-bottom: 1px solid silver;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

回答3:

Another way is to programmatically add classes to TinyMCE container on init:

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

CSS:

.with-border {
    border: 1px solid black;
}

See Integration and Setup | TinyMCE documentation

The setup option allows you to specify an event that will be executed before the TinyMCE editor instance is rendered.