谷歌字体和TinyMCE

6 回答

• 6

  还有一种，可能是将谷歌字体插入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
  

  ...并在那里更改字体系列 .

  回复于 2024-04-27T19:59:24+08:00
• 17

  是的，这是可能的，我将描述实现这一目标的两种方法 .

  Way #1: 示例：google font Cantarell使用自己的插件

  为了使其工作，您需要write your own tinymce plugin并将此代码放入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 init parameter content_css . 在那里你需要指定类似的东西：

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

  Way #2: 示例：google font Cantarell使用font-face声明

  您可以直接从谷歌字体download the font .

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

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

  回复于 2024-04-27T19:59:24+08:00
• 3

  我终于解决了我的问题 . 搜索超过两个小时后，没有解决方案 .

  我只是在TinyMCE CSS中添加了font-face .

  做这个：

  1 - 下载你的谷歌文字并将其翻过你的字体文件夹（你想要的任何路径）2 - 转到tinymce \ js \ tinymce \ skins \ 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找到！享受它并分享这个解决方案 .

  回复于 2024-04-27T19:59:24+08:00
• -3

  更容易制作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将忽略编码的逗号并加载字体就好了 .

  回复于 2024-04-27T19:59:24+08:00
• 4

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

  • 添加所选字体fron Google WebFonts（或其他字体提供者 - 为此使用 @font-face ）

  • 在样式表中定义选择器类（例如 .font-1 ）

  • 在TinyMCE配置中将类添加为custom format selectors .

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

  下面是一个示例，说明它在我开发的CMS上的外观（这里我只添加了Lobster 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'; }
  

  回复于 2024-04-27T19:59:24+08:00
• 1

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

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

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

  回复于 2024-04-27T19:59:24+08:00