如何向 TinyMCE Advanced 添加新字体

Question

我想添加例如字体“elef”，添加这种字体最简单的方法是什么？ 我使用 wordpress 3.9.1 和 TinyMCE Advanced vr。 4.0.2，如果这件事..

我更喜欢这个插件https://wordpress.org/plugins/tinymce-advanced/

Answer 1

这是使用 Google 字体的方法，如果您想使用 TTF 或类似内容，请遵循以下提示：Using True type fonts in web applications。

添加/替换下拉菜单中显示的字体：

add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
    //$initArray['font_formats'] = 'Lato=Lato;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;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;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';
    $theme_advanced_fonts = 'Aclonica=Aclonica;';
    $theme_advanced_fonts .= 'Lato=Lato;';
    $theme_advanced_fonts .= 'Michroma=Michroma;';
    $theme_advanced_fonts .= 'Paytone One=Paytone One';
    $initArray['font_formats'] = $theme_advanced_fonts;
    return $initArray;
}

在下拉列表中显示实时字体：

add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
   $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font1 ) );
   $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font2 ) );
   $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font3 ) );
   $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font4 ) );
}

在内容框上显示实时字体：

add_action('admin_head-post.php', function() {
    ?>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Aclonica);
    @import url(http://fonts.googleapis.com/css?family=Lato);
    @import url(http://fonts.googleapis.com/css?family=Michroma);
    @import url(http://fonts.googleapis.com/css?family=Paytone+One); 
    </style>
    <?php
});

基于：

• How to Add Google Web Fonts to Your TinyMCE Editor in WordPress
• WordPress 3.9+ TinyMCE 4 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups

Answer 2

1. 将字体添加到您的字体文件夹

2. 让你的字体在你的 css 中可用

   @font-face {
       font-family: 'Proxima Nova Regular';
       font-weight: 400;
       font-style: normal;
       src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot');
       src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot?#iefix') format('embedded-opentype'),   
            url('./assets/fonts/proxima-nova/proxima-nova-regular.woff')       format('woff'),  
            url('./assets/fonts/proxima-nova/proxima-nova-regular.ttf')        format('truetype'),  
            url('./assets/fonts/proxima-nova/proxima-nova-regular.otf')        format('opentype');
   }
   

3. 在functions.php中（随意添加/删除这些字体。这个列表是默认的，我添加了我的“Proxima Nova Regular”。

   add_filter( 'tiny_mce_before_init', 'mce_custom_fonts' );
   function mce_custom_fonts( $init ) {
       $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;" .
                               "Georgia=georgia,palatino;" .
                               "Helvetica=helvetica;" .
                               "Impact=impact,chicago;" .
                               "Proxima Nova Regular=Proxima Nova Regular;" . /* This is my custom font */
                               "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";
       $init['font_formats'] = $theme_advanced_fonts;
       return $init;
   }
   

Answer 3

如果你有本地字体，你可以在 css 上使用字体

tinymce 初始化

tinymce.init({
    font_formats: "Abel=abel,sans-serif;"+
    "Electrolize=electrolize,sans-serif;"+
    "Raleway=raleway,sans-serif;",
    fontsize_formats: "8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 36pt",
    height          : 240,
    width           : 980,
    selector        : "textarea",
    content_css     : "path/to/external_fonts.css",
    plugins         : "table image autolink charmap print preview searchreplace code textcolor media link charmap emoticons",

    //  convert strong tag to b tag 
    extended_valid_elements: "table[class=data head],b/strong",

    toolbar         : [ "undo redo | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | styleselect table | image link unlink emoticons ",
                        "bold italic underline strikethrough subscript superscript | forecolor backcolor | bullist numlist outdent indent | blockquote subscript superscript charmap searchreplace | code preview"
    ],
    menubar         : false,
    relative_urls   : false
});

external_fonts.css

@font-face {
    font-family : 'Raleway';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/raleway.woff2) format('woff2'), /*Chrome/Opera*/
                  url(path/to/font/raleway.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/raleway.eot);                   /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family : 'Electrolize';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/electrolize.woff2) format('woff2'), /*Chrome/Opera*/
                  url(path/to/font/electrolize.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/electrolize.eot);                   /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */                  
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family : 'Abel';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/abel.woff2) format('woff2'),  /*Chrome/Opera*/
                  url(path/to/font/abel.woff) format('woff'),    /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/abel.eot);                    /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */ 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Answer 4

我一直在寻找同样的东西，直到我遇到了这个插件：

https://wordpress.org/plugins/kv-tinymce-editor-fonts/

只需安装它（当然，在您已经拥有 TinyMCE Advanced 之后）并检查其代码文件（在插件 -> 编辑下）。

您所要做的就是将字体定义（名称）添加到指定代码中的字体列表（位于该插件的主 PHP 文件的末尾附近），并将列表项代码添加到代码（略低于第一个）。

就是这样！现在，您在编辑器的字体系列选择下拉列表中拥有了其他字体。