Google шрифты и TinyMCE - PullRequest
       19

Google шрифты и TinyMCE

14 голосов
/ 17 ноября 2010

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

Ответы [ 6 ]

17 голосов
/ 21 ноября 2012

Существует также еще один, возможно, самый простой способ вставить шрифты 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

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

6 голосов
/ 17 ноября 2010

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

Способ № 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 content_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; }
4 голосов
/ 07 сентября 2014

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

Я просто добавляю font-face в TinyMCE CSS.

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

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

добавить

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

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

это будет так

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

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

3 голосов
/ 15 мая 2017

Еще проще сделать tinymce 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 проигнорирует закодированную запятую и прекрасно загрузит шрифт.

1 голос
/ 14 марта 2015

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

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

Вы также можете указать true для параметра конфигурации style_formats_merge TinyMCE, который добавит ваши пользовательские стили к значениям по умолчанию 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'; }
0 голосов
/ 21 мая 2014

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

     

Более подробное руководство читайте здесь.

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

...