Изменить тип / размер шрифта по умолчанию в TinyMCE

Question

Как изменить тип и размер шрифта по умолчанию в TinyMCE?

Я использую расширенный скин и изменил стиль body, td, pre в default / content.css, но он по-прежнему не меняется.

Answer 1

Ну, есть несколько content.css , и только один из них используется для стилизации вашего редактора в зависимости от ваших настроек конфигурации .

Вы должны использовать опцию конфигурации content_css и назвать собственный файл CSS, в котором вы можете перезаписать значения по умолчанию для редакторов ( content.css , которые вы недавно искали). В вашей функции инициализации используйте что-то вроде

content_css: "http://localhost/css/my_tiny_styles.css",

и в my_tiny_styles.css или любом другом файле, который вы выбираете, вы используете

font-family: myfont1, myfont2, sans-serif;

Answer 2

Вот еще один способ решить эту проблему.

Добавляя свои собственные стили в наш файл CSS, определяя идентификатор tinymce.

#tinymce .mceContentBody p {
   font-family: your_font_name !important; 
}

Answer 3

Если вы хотите изменить значение по умолчанию для выпадающих окон, а не только для отображения css, то для tinyMCE 4 это теперь:

setup : function(ed) {
 ed.on('init', function(ed) {
  ed.target.editorCommands.execCommand("fontName", false, "Calibri");
  ed.target.editorCommands.execCommand("fontSize", false, "11pt");
 });
}

EDIT: это опция настройки функции init, как описано здесь: https://www.tinymce.com/docs/configure/integration-and-setup/#setup

Answer 4

Для людей, испытывающих затруднения при добавлении таблицы стилей из-за проблем с путями или по любой другой причине, это должно сделать это довольно просто:

setup : function(ed) {
     ed.on('init', function(){
         $(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
     });
}

Примечание. Я использовал jQuery, но, конечно, можно и без него.

Answer 5

Вот как это сделать, не касаясь CSS или любых других кодов.

1. Используйте плагин 'TinyMCE Advanced'
2. Активируйте его в настройках.

Более подробные инструкции здесь .