TinyMCE 4 theme_advanced_fonts答案

【问题标题】：TinyMCE 4 theme_advanced_fontsTinyMCE 4 theme_advanced_fonts
【发布时间】：2013-05-11 01:54:09
【问题描述】：

我正在尝试在 TinyMCE 编辑器 4.0b1 版中添加自定义字体系列并一直失败。
显示所有默认字体，未显示“Century Gothic”或“Gill Sans MT”等自定义字体。 theme_advanced_fonts 在 TinyMCE 4 中不起作用吗？我找不到任何 TinyMCE 4 文档。

tinymce.init({
  selector: "textarea",
  plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
  ],
  toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontselect fontsizeselect | forecolor backcolor",
  convert_urls: false,
  content_css: 'http://www.mydomain.com/css/fonts.css',
  theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
  theme_advanced_fonts : "Andale Mono=andale mono,times;"+
                         "Arial=arial,helvetica,sans-serif;"+
                         "Arial Black=arial black,avant garde;"+
                         "Book Antiqua=book antiqua,palatino;"+
                         "Comic Sans MS=comic sans ms,sans-serif;"+
                         "Courier New=courier new,courier;"+
                         "Century Gothic=century_gothic;"+
                         "Georgia=georgia,palatino;"+
                         "Gill Sans MT=gill_sans_mt;"+
                         "Gill Sans MT Bold=gill_sans_mt_bold;"+
                         "Gill Sans MT BoldItalic=gill_sans_mt_bold_italic;"+
                         "Gill Sans MT Italic=gill_sans_mt_italic;"+
                         "Helvetica=helvetica;"+
                         "Impact=impact,chicago;"+
                         "Iskola Pota=iskoola_pota;"+
                         "Iskola Pota Bold=iskoola_pota_bold;"+
                         "Symbol=symbol;"+
                         "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                         "Terminal=terminal,monaco;"+
                         "Times New Roman=times new roman,times;"+
                         "Trebuchet MS=trebuchet ms,geneva;"+
                         "Verdana=verdana,geneva;"+
                         "Webdings=webdings;"+
                         "Wingdings=wingdings,zapf dingbats"
});

【问题讨论】：

concrete5.org/community/forums/usage/font-family

标签： tinymce tinymce-4

【解决方案1】：

看起来 TinyMCE 4 已经更新，自定义字体现在可以使用了。

查看此链接以获取 CSS 字体源： http://www.tinymce.com/wiki.php/Configuration:content_css

查看此链接以获取自定义字体设置： https://www.tinymce.com/docs/configure/content-formatting/#font_formats

奇怪的是，有些字体有效（自定义字体列表名称上的字体样式正确 - 绿色），有些则无效（列出了自定义字体，但样式不是假定的字体样式 - 红色）

【讨论】：

【解决方案2】：

看起来 theme_advanced_fonts 有问题并且尚未修复。我正在使用带有 style_formats 的替代解决方案来定义字体

tinymce.init({
        ...
        toolbar: "styleselect",
        style_formats: [
            {title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
            {title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
            {title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
            {title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
            {title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
            {title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
            {title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
            {title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
            {title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
            {title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
            {title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
            {title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
            {title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
        ],
        ...
});

结果：

【讨论】：

我尝试使用我的自定义字体 font-family，但它不起作用。出现自定义字体名称，但未检测到字体样式。我将字体 css 放在 TinyMCE init 和页面 CSS 中。
哦，我正在尝试将我的文本作为电子邮件发送。据说如果我使用“theme_advanced_fonts”，自定义字体会出现在邮件中，因为它检测到我的 CSS 源，“style_formats”也可以工作吗？

【解决方案3】：

tinymce.init({ ... 字体格式： "默认='myFontFace', Arial, Helvetica, Tahoma, Verdana, sans-serif;"+ "Arial=arial,helvetica,sans-serif", ... });

【讨论】：

很好的答案附有代码示例，并为未来的读者提供了解释。虽然问这个问题的人可能理解你的答案，但解释你是如何得出这个问题的将帮助无数其他人。

【解决方案4】：

在 tinymce 4 中，theme_advanced_fonts 已重命名为 font_formats。

您可以从以下位置找到详细信息 https://www.tinymce.com/docs/configure/content-formatting/#font_formats

【讨论】：

【解决方案5】：

从 tinyMCE 4 中删除了“高级”和“简单”主题。添加的新主题称为“现代”。

http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

【讨论】：

+1 有没有办法恢复旧的用户界面？