Google шрифты и TinyMCE

Можно ли использовать шрифты Google с tinyMCE? как это можно сделать?

Ответы

Ответ 1

Существует еще один, возможно, самый простой способ вставить шрифты google в tinyMCE.

В tinyMCE.init укажите следующее:

content_css : "/tinymce_stylesheet.css,http://fonts.googleapis.com/css?family=Sanchez"

И затем в tinymce_stylesheet.css вы можете использовать любой шрифт, который вы импортировали из Google.

Еще один совет: вместо того, чтобы писать новую таблицу стилей с нуля, дублируйте файл:

tiny_mce/themes/advanced/skins/default/content.css

... И измените там семейство шрифтов.

Ответ 2

Да, это возможно, я опишу два способа добиться этого.

Способ # 1: Пример: шрифт google Cantarell с использованием собственного плагина

Чтобы сделать это, вам нужно написать свой собственный плагин tinymce и поместить этот код в заголовок iframes tinymce. Используйте событие onInit в своем собственном плагине, чтобы добавить его.

Это будет выглядеть так:

  ed.onInit.add(function(){
    with(document.getElementById(iframe_id).contentWindow)
    {           
        var h=document.getElementsByTagName("head");
        var newStyleSheet=document.createElement("link");
        newStyleSheet.rel="stylesheet";
        newStyleSheet.href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin";
        h[0].appendChild(newStyleSheet);
    }
  });

Кроме того, вам нужно будет добавить нужный шрифт в ваш css, чтобы применить его. Вы можете использовать параметр tinmyce init_css. Там вам нужно указать что-то вроде:

p { font-family: 'Cantarell', arial, serif; }

Путь № 2: Пример: шрифт google Cantarell с использованием объявления font-face

Вы можете загрузить шрифт непосредственно из шрифтов Google.

Поместите файл шрифта (т.е. Cantarell-Regular.ttf) где-нибудь на вашем сервере (имейте в виду, что IE (Internet Explorer) обычно нуждается в eot файлах). Теперь все, что вам нужно сделать, это использовать объявление @font-face в content_css

@font-face {font-family: "my_own_family"; src: url("http://mydomain.com/fonts/Cantarell-Regular.ttf");}

и примените его к элементу css. Пример:

p { font-family: 'my_own_family', helvetica, arial, serif; }

Ответ 3

Я, наконец, решил свою проблему. После поиска более двух часов и без решения.

Я просто добавляю шрифт в TinyMCE CSS.

Сделайте это:

1 - Загрузите свой шрифт Google и пропустите его в папке с шрифтом (любой желаемый путь) 2 - Перейдите в tinymce\js\tinymce\skins\lightgray и откройте content.min.css

добавить

 @font-face {
    font-family: Questrial;
    src: url("fontfolder/yourfont.ttf");
}

в первой строке перед "телом".

что будет похоже на

@font-face {
    font-family: Questrial;
    src: url("../../../../../../font/questrial.ttf");
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s.............

и вот мы!!!! Вы получили это, просто, но HARRRRRRRRD, чтобы найти! Наслаждайтесь этим и делитесь этим решением.

Ответ 4

Еще проще сделать timymce iframe для загрузки шрифта Google, включая разные стили или веса, - заменить запятую кодированной версией URL %2C

так что-то вроде этого:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

будет примерно таким:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce будет игнорировать закодированную запятую и загрузить шрифт очень хорошо.

Ответ 5

Я понимаю, что это старый вопрос, но мое предложение, особенно если вы хотите использовать более одного веб-шрифта в своем контенте, отредактированном с помощью TinyMCE, вы могли бы:

  • Добавить выбранные шрифты fron Google WebFonts (или другой поставщик шрифтов - используйте @font-face для этого)
  • Определите классы селекторов в таблице стилей (например, .font-1)
  • Добавьте в класс TinyMCE классы селектора настраиваемых форматов.

Вы также можете указать true параметр конфигурации TinyMCE стиля style_formats_merge, который добавит ваши пользовательские стили к значениям по умолчанию TinyMCE, а не перезаписывает их.

Вот пример того, как он выглядит на CMS, который я разработал (здесь я только добавил шрифт Lobster Two, но при необходимости можно было добавить много шрифтов):

Sesame Web preview of TinyMCE custom format using Google Web Fonts

Итак, в Javascript часть моей конфигурации выглядит примерно так:

tinymce_options = {
  style_formats_merge: true,
  style_formats = [{
    title: "Theme",
    items: [{
      title: "Fonts",
      items: [
        { title: "1. Lobster Two", inline: "span", classes: "font-1"}
      ]
    }, {
      title: "Styles",
      items: [
        /* here add further theme styles if needed... */
      ]
    }]
  }]
};

и в моем стиле веб-сайта (или темы) я добавил:

.font-1 { font-family:'Lobster Two'; }

Ответ 6

Теперь его стало проще после обновления WordPress 3.9. Вам не нужно прикасаться к основным файлам WordPress. Просто используйте следующий код, чтобы включить новые шрифты в свой редактор сообщений.

Подробнее читайте здесь.

http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/