当前位置：文江博客话题详情

CSS Fonts TinyMCE

Google 字体和 TinyMCE

发布于 2024-10-02 20:08:09 字数 32 浏览 4 评论 0 原文

谷歌字体可以与tinyMCE一起使用吗？这怎么办？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋竹姑娘 2024-10-09 20:08:09

还有一种可能是将 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

...并更改其中的字体系列。

There is also one more, probably the easiest way to insert google fonts into tinyMCE.

In tinyMCE.init specify as follows:

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

And then in tinymce_stylesheet.css you can use any font you imported from Google.

One more tip: Instead of writing new stylesheet from scratch, duplicate the file:

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

...And change the font-family there.

回复收藏 0 原文

这个俗人 2024-10-09 20:08:09

是的，这是可能的，我将描述实现此目的的两种方法。

方法#1：示例：使用自己的插件的谷歌字体 Cantarell

为了使其工作，您需要编写您自己的tinymce插件并将此代码放入tinymce iframes标头中。使用您自己的插件中的 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 初始化参数 content_css。您需要指定如下内容：

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

方式 #2: 示例：使用 font-face 声明的 google font Cantarell

您可以直接从 google fonts 下载字体。

将字体文件（即 Cantarell-Regular.ttf）放置在服务器上的某个位置（请注意，IE (Internet Explorer) 通常需要 eot 文件）。现在您需要做的就是在 content_css< 中使用 @font-face 声明/a>

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

Yes, this is possible, I will describe two ways to achieve this.

Way #1: Example: google font Cantarell using own plugin

In order to make it work you will need to write your own tinymce plugin and place this code into the tinymce iframes header. Use the onInit event in your own plugin to add it.

This will look like:

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

Additionally you will have to add the desired font to your css in order to apply it. You may use the tinmyce init parameter content_css. There you need to specify something like:

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

Way #2: Example: google font Cantarell using font-face declaration

You can download the font directly from google fonts.

Place the font file (i.e. Cantarell-Regular.ttf) somewhere on your server (be aware that IE (Internet Explorer) usually needs eot-files). Now all you need to do is to use a @font-face declaration in your content_css

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

and apply it to a css element. Example:

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

回复收藏 0 原文

始终不够爱げ你 2024-10-09 20:08:09

我终于解决了我的问题。搜索了两个多小时也没有解决。

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

执行以下操作：

1 - 下载您的谷歌字体并将其粘贴到您的字体文件夹中（您想要的任何路径）
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.............

，我们就在这里！！！！你明白了，简单但很难找到！享受它并分享这个解决方案。

I finally solved my problem. After search more than two hour and no solution.

I just add font-face in TinyMCE CSS.

Do this:

1 - Download your google font and past it on your font folder ( Any path you want )
2 - Go to tinymce\js\tinymce\skins\lightgray and open content.min.css

add

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

in first line before "body".

that's going to be like that

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

and here we are!!!! You got it, simple but HARRRRRRRRD to find! Enjoy it and share this solution.

回复收藏 0 原文

攒眉千度 2024-10-09 20:08:09

让tinymce iframe加载包含不同样式或粗细的Google字体更简单的方法是将逗号替换为url编码版本%2C，

因此改为如下所示：

tinyMCE.init({ 选择器：'文本区域'， content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

会是这样的：

tinyMCE.init({ 选择器：'文本区域'， content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce 将忽略编码的逗号并加载字体。

回复收藏 0 原文

水波映月 2024-10-09 20:08:09

我意识到这是一个老问题，但我的建议是，特别是如果您希望在使用 TinyMCE 编辑的内容中使用超过 1 种 Web 字体，那么您可以：

添加从 Google WebFonts（或其他字体提供商 - 为此使用 @font-face）
在样式表中定义选择器类（例如.font-1)
将类添加为自定义格式选择器< /a> 在您的 TinyMCE 配置中。

您还可以将 true 指定为 style_formats_merge TinyMCE 配置选项，这会将您的自定义样式添加到 TinyMCE 默认值中，而不是覆盖它们。

下面是我开发的 CMS 上的示例（这里我只添加了 Lobster Two 字体，但如果需要，可以添加许多字体）：

使用 Google Web Fonts 的 TinyMCE 自定义格式的 Sesame Web 预览

因此，在 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'; }

I realise this is an old question, but my suggestion, especially if you wish to use more than 1 web font in your content edited with TinyMCE, then you could:

Add the fonts selected fron Google WebFonts (or other font provider - use @font-face for this)
Define selector classes in your stylesheet (eg. .font-1)
Add the classes as custom format selectors in your TinyMCE configuration.

You can also specify true to the style_formats_merge TinyMCE config option, which will add your custom styles to the TinyMCE defaults, rather then overwrite them.

Here is an example of how it looks on a CMS I have developped (here I only added the Lobster Two font, but effectively many fonts could be added if needed):

Sesame Web preview of TinyMCE custom format using Google Web Fonts

So in Javascript, part of my configuration looks something like:

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... */
      ]
    }]
  }]
};

and in my website's style (or theme), I added:

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

回复收藏 0 原文

入怼 2024-10-09 20:08:09

WordPress 3.9 更新后，现在更容易了。您不需要接触 WordPress 的核心文件。只需使用以下代码即可在帖子编辑器中包含新字体。

从这里阅读更详细的教程。

http://kvcodes.com/ 2014/05/如何将 google-webfonts-添加到-wordpress-tinymce-editor/

Its more easy now after the update of WordPress 3.9. You dont need to touch the core files of WordPress. Just use the following code to include new fonts on your post editor.