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

Я успешно изменил шрифт по умолчанию внутри редактора, используя документацию здесь но это оставляет меня с проблемой. Исходный шрифт по умолчанию больше не работает в раскрывающемся списке шрифт.

исходное значение по умолчанию: Verdana
Новое значение по умолчанию: MyCustomFont

когда я набираю в редакторе, я вижу мой шрифт MyCustomFont по умолчанию. Если я попытаюсь изменить это на Verdana (исходное значение по умолчанию), ничего не произойдет. Я могу изменить на любой шрифт, кроме шрифт Verdana. Я также заметил, что когда я выбираю MyCustomFont в раскрывающемся списке, содержимое окружается промежутком со встроенными стилями. Это не происходит с оригинальным шрифтом по умолчанию (поэтому ничего не происходит).

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

Я немного погуглил, но результатов не было. Все остальные, похоже, соглашаются на вышеупомянутую документацию. Я единственный, у кого есть эта проблема? Если нет, пожалуйста, помогите! :)

обратите внимание, что ответы этой вопрос не отвечайте на мой вопрос.

13
css font-face fonts javascript tinymce

9 ответов

может быть, слишком поздно, но...

$('.tinymce').tinymce({
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.execCommand("fontName", false, "Arial");
            ed.execCommand("fontSize", false, "2");
        });
    }
});

редактировать

для TinyMCE 4, как утверждает @jason-tolliver и @georg, синтаксис:

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});
24
// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});
16

для тех, кто init timymce с tinymce.init({ и не может реализовать Кунторо Радиус ответ напрямую.

мой init выглядит как

tinymce.init({
            selector: '#editor',
            menubar: false,
            plugins: ['bbcode'],
            toolbar: 'undo redo | bold italic underline',    
            setup : function(ed)
            {
                ed.on('init', function() 
                {
                    this.getDoc().body.style.fontSize = '12';
                    this.getDoc().body.style.fontFamily = 'Arial';
                });
            },
        });
5

для TinyMCE 4.6.3 это, кажется, путь:

tinymce.init({
    setup: function (ed) {
        ed.on('init', function (e) {
            ed.execCommand("fontName", false, "Verdana");
        });
    }
});
2

некоторые из вас будут работать в пределах TinyMCE EditorManager, который предлагает два события: AddEditor и RemoveEditor. Когда новый экземпляр TinyMCE порождается и AddEditor запускается, редактор фактически не инициализируется и поэтому вызывает getDoc() возвращают значение null.

что вам нужно сделать, это создать init слушатель в течение.

tinyMCE.EditorManager.on('AddEditor', function (event) {
    ... other code ...

    event.editor.on('init', function() {
      this.activeEditor.getDoc().body.style.fontSize = '12px';
      this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman';
    });

    ... other code ...
  }
});

это по крайней мере правда в версии 4.3.8

1

как см. веб-сайт TinyMce, вы можете встроить таблицу стилей в свою функцию init следующим образом:

tinymce.init({
    content_css : 'path/to/style/sheet',
    body_class: 'define-class-name-without-dot-at-the-first'
});

это работает, и вам не нужно ничего настраивать. проверьте это на веб-странице tinyMCE

1

у меня были трудности со всеми решениями здесь, в tinymce 4.икс Я не мог изменить ни fontsize, ни fontname. После долгих попыток я нашел решение. Прежде всего, я могу подтвердить ответ Джареда, спасибо за это! Эти две команды не будут работать по умолчанию:

tinymce.EditorManager.execCommand("fontName", false, "12px");
tinymce.EditorManager.execCommand("fonSize", false, "Arial");

размер шрифта по умолчанию - "pt", а не " px."Так что либо определить размер шрифта отображается как "Военторга" по [fontsize_formats][1] или просто передачи нужного размера с "ПТ". С в TinyMCE.EditorManager.execCommand tinymce также не доволен. Вы должны передать все семейство шрифтов, как "arial, helvetica, sans-serif". Эти команды работали на моем сайте:

tinymce.EditorManager.execCommand("fontName", false, "12pt");
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif");
0

Это ответ, он работает для меня:

Шаг # 1:

искать функции.php в корневом каталоге ваших тем внутри /wp-content/themes/yourtheme/ откройте его и добавьте одну строку после тега php.

add_editor_style (заказ-редактор-стиль.css');

Шаг 2:

в том же каталоге создайте файл с именем custom-editor-style.css с нижними строками в нем

@import url (https://fonts.googleapis.com/css?family=Open+Sans: 400,700); * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;} Идти вперед, очистите кэш браузеров и это то, что вы увидите.

ссылка:https://blog.phi9.com/wordpress-editor-and-its-font/

Тони НПО

0

вот ответ. Это работает для меня:

Шаг # 1:

искать функции.php в корневом каталоге ваших тем внутри /wp-content/themes/yourtheme/ откройте его и добавьте одну строку после тега php.

add_editor_style (заказ-редактор-стиль.css');

Шаг 2:

в том же каталоге создайте файл с именем custom-editor-style.css с нижними строками в нем

@import url (https://fonts.googleapis.com/css?family=Open+Sans: 400,700); * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;} Идти вперед, очистите кэш браузеров и это то, что вы увидите.

Тони НПО

-1