谷歌字體和TinyMCE

6

是的，這是可能的，我將介紹兩種方法來實現這一點。

路＃1：例子：谷歌使用的字體Cantarell油田自己的插件

爲了使其工作，你需要write your own tinymce plugin，並把這個代碼到TinyMCE的I幀頭部。在你自己的插件中使用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; }

路＃2：示例：使用字體face聲明

谷歌字體Cantarell油田您可以download the font直接從谷歌的字體。

將字體文件（即Cantarell-Regular.ttf）放在服務器上的某處（注意IE（Internet Explorer）通常需要eot-files）。現在，所有你需要做的就是在你的content_css

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

使用的@ font-face聲明，並將其應用到CSS元素。例如：

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

來源

2010-11-17 08:32:37 Thariama

16

還有一個，可能是最簡單的方法來將谷歌字體插入到tinyMCE。

在tinyMCE.init指定如下：

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

然後在tinymce_stylesheet.css你可以使用你從谷歌導入的任何字體。

一個提示：而不是從頭編寫新的樣式表的，複製的文件：

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

...並更改字體的家人在那裏。

來源

2012-11-20 22:15:25 kogitoja

+1

這裏是最好的答案 – 2015-08-14 16:31:20

+0

只是一個快速的片段，以防有人試圖讓Wordpress在Wordpress中工作。在你的functions.php中添加這個：'add_filter（'tiny_mce_before_init'，'add_tinymce_font'）; function add_tinymce_font（$ options）{options}''content_css'] = get_template_directory_uri（）。「/editor-style.css,http://fonts.googleapis.com/css?family=Sanchez」; return $ options; }'。對不起，評論中的代碼格式。 – eleven59 2017-08-21 16:15:59

-3

更新後的WordPress 3.9更容易。你不需要觸摸WordPress的核心文件。只需使用下面的代碼在你的文章編輯器中包含新的字體。

從這裏閱讀更詳細的教程。

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

來源

2014-05-21 04:56:43 varadha

4

我終於解決了我的問題。經過兩個多小時的搜索並沒有解決方案。

我只是在TinyMCE CSS中添加字體。

這樣做：

1 - 下載您的谷歌的字體和過去它在你的字體文件夾（你想要的任何路徑） 2 - 轉到TinyMCE的\ JS \ TinyMCE的\皮膚\淺灰色和開放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找到了！享受它並分享這個解決方案。

來源

2014-09-06 20:37:57

+0

這應該被標記爲正確的答案，非常感謝 – Networker 2017-11-04 18:46:42

1

我意識到這是一個老問題，但我的建議，特別是如果你希望在你的內容與TinyMCE的編輯使用超過1個Web字體，那麼你可以：

添加的字體選擇氟里昂Google WebFonts （或其他字體提供者 - 使用@font-face本）
在樣式表中定義選擇類
添加類作爲custom format selectors在TinyMCE的配置（例如.font-1）。

您還可以指定真正到style_formats_merge TinyMCE的配置選項，這將增加你的自定義樣式TinyMCE的默認值，而不是覆蓋它們。

這裏是它的外觀上的CMS我已經developped（這裏我只加了龍蝦兩個字體，但如果需要的話可以增加有效的多字體）的例子：

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'; }

來源

2015-03-14 10:45:08 Nicolas

3

更容易使TinyMCE的iframe來加載谷歌字體，包括不同風格或重量與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將忽略編碼的逗號並加載字體就好了。

來源

2017-05-15 15:28:13

谷歌字體和TinyMCE

回答

相關問題