谷歌字体和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

回答

相关问题