Change default font type/size in TinyMCE
How do you change the default font type and font size in TinyMCE?
I'm using the advanced skin and I've changed the body, td, pre
style in default/content.css but it 开发者_高级运维still doesn't change.
Well, there are several content.css and only one is used to style your editor depending on your configuration settings.
You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like
content_css: "http://localhost/css/my_tiny_styles.css",
and in my_tiny_styles.css
or whatever file you choose you use
font-family: myfont1, myfont2, sans-serif;
Here's another way to resolve this problem.
By adding your own custom styles into our CSS file by defining tinymce id.
#tinymce .mceContentBody p {
font-family: your_font_name !important;
}
If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
EDIT: this is the setup option of the init function as explained here: https://www.tinymce.com/docs/configure/integration-and-setup/#setup
For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:
setup : function(ed) {
ed.on('init', function(){
$(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
});
}
Note I used jQuery, but can of course be done without it as well.
Here's how to do it without touching CSS or any other codes.
- Use the plugin 'TinyMCE Advanced'
- Activate it in settings.
More detailed instructions here.
精彩评论