Google fonts и TinyMCE

Question

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

Answer 1

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

Way # 1: Пример: Google шрифт Cantarell используя собственный плагин

Для того, чтобы сделать его работу вы должны write your own tinymce plugin и поместить этот код в 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 parameter content_css. Там вам нужно указать что-то вроде:

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

Way # 2: Пример: Google шрифт Cantarell с использованием декларации шрифта лица

Вы можете download the font непосредственно из шрифтов Google.

Разместите файл шрифта (т. Е. Cantarell-Regular.ttf) где-нибудь на своем сервере (имейте в виду, что IE (Internet Explorer) обычно нуждается в eot-файлах). Теперь все, что вам нужно сделать, это использовать @ декларацию шрифта лицо в вашем 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; } 

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

ли это:

1 - Скачать шрифт Google и мимо него на папку шрифтов (Любой путь, который вы хотите) 2 - Перейти к TinyMCE \ JS \ TinyMCE \ шкурки \ 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, чтобы найти! Наслаждайтесь этим и делитесь этим решением.

Answer 5

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

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

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

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

Таким образом, в 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'; } 

Answer 6

Еще проще сделать TinyMCE IFrame, чтобы загрузить Google Font, включая различные стили или вес, чтобы заменить запятую с кодировкой 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 будет игнорировать закодированную запятую и загрузить шрифт просто отлично.