admin管理员组

文章数量:1122846

I use TinyMCE Advance plugin. I've posted a question in the support forum of the the plugin but it seems that the author doesn't provide any support now. As you can see in the picture, the font size 12pt is the default font size. Every time I open the TinyMCE Advance editor, the size 12pt displays in the default state. How can I change the default size to 14pt and remove the size 8pt, 10pt,12pt?

I've done some research and it's was recommended that I go to:

wp-includes/js/tinymce/skin/wordpress/wp-content.css

and change the size in

body {
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 9px 10px;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Old syntax */
}

In this case, I've changed it to 18pt, but it doesn't work. The thing is that the default 12pt size is still there. It just changes only when I click inside the text editor area; it will change from the 12pt (that displays as default) to 14pt. But actually when I type a text and publish, the result is the published text still displays 12pt size, not 14pt. So that means I have to select a font size 14pt in the drop-down list anyway in order to get the size 14pt.

I use TinyMCE Advance plugin. I've posted a question in the support forum of the the plugin but it seems that the author doesn't provide any support now. As you can see in the picture, the font size 12pt is the default font size. Every time I open the TinyMCE Advance editor, the size 12pt displays in the default state. How can I change the default size to 14pt and remove the size 8pt, 10pt,12pt?

I've done some research and it's was recommended that I go to:

wp-includes/js/tinymce/skin/wordpress/wp-content.css

and change the size in

body {
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 9px 10px;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Old syntax */
}

In this case, I've changed it to 18pt, but it doesn't work. The thing is that the default 12pt size is still there. It just changes only when I click inside the text editor area; it will change from the 12pt (that displays as default) to 14pt. But actually when I type a text and publish, the result is the published text still displays 12pt size, not 14pt. So that means I have to select a font size 14pt in the drop-down list anyway in order to get the size 14pt.

• tinymce
• visual-editor
• wp-editor
• fonts

Share Improve this question edited Mar 6, 2018 at 17:43 Howdy_McGee♦ 20.8k2424 gold badges9191 silver badges175175 bronze badges asked Aug 29, 2017 at 8:34 TopyTopy 16322 gold badges33 silver badges1313 bronze badges 7

• the values for thsi dropdown are created by this file wordpress\wp-includes\js\tinymce\tinymce.min.js . Therefore the best approach I can think of if to create a js file to change those values and hook it after the admin loads. – vagelis Commented Aug 30, 2017 at 10:27
• No easy way to remove the unwanted sizes there directly in the tinymce.min.js? – Topy Commented Aug 30, 2017 at 11:34
• You can edit the file and remove them, but you have to do that every time to Wordpress Core updates. The optimal solution is to create a plugin to include everything we speak of. – vagelis Commented Aug 30, 2017 at 11:47
• I see. But I cannot create that plugin. If you don't mind helping me with that. Supposed if I wish to remove them direct from there, which one I have to remove? – Topy Commented Aug 30, 2017 at 12:14
• The one you don't want to be displayed in the dropdown – vagelis Commented Aug 30, 2017 at 13:17

 |  Show 2 more comments

4 Answers 4

Sorted by: Reset to default 2

This is kind of a 2-parter. The first half will show you how to change the style inside TinyMCE when editing. The second half will show you how to remove things from the toolbar.

Style TinyMCE

WordPress give us a neat little function called add_editor_style() which accepts an array of stylesheets, either by URL or relative paths. WordPress default themes usually take advantage of this function and can be seen in the latest TwentySeventeen theme. First let's create a stylesheet. The name doesn't matter but the location does.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

For simplicity we'll call this editor-style.css and save it in the theme:

/assets/css/editor-style.css

Next we need to tell WordPress to use our stylesheet so we'll open the themes functions.php file and add in:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {

    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Some plugins could interfere with this such as page builders if they implement their own TinyMCE.

---

Modify Toolbar

Next, we can use the tiny_mce_before_init filter hook to modify the TinyMCE. In this case, all we need to do if override the font sizes. You can add the following function into your functions.php file:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {

    $args['fontsize_formats'] = "14pt 18pt 24pt 36pt";

    return $args;

}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

The $args array has an index that accepts a list of font sizes separated by spaces. You can change these to whatever you want, px, em, rem it doesn't matter, just that the list is separated by a space and is a valid font-size value.

I use only this one. It Works for me. What is the different between this code and your code?

// Customize TinyMCE editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
    function wpex_mce_text_sizes( $initArray ){
        $initArray['fontsize_formats'] = "14pt 18pt 24pt 36pt";
        return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

This is the Answer, It work for me:

1. Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.

   add_editor_style('custom-editor-style.css');

2. In the same directory, create a file called custom-editor-style.css with below lines in it

   @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
   * { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}
   

Go ahead, clear your browsers cache and this is what you’ll see.

Refer link: https://blog.phi9.com/wordpress-editor-and-its-font/

To change WordPress (WooCommerce) visual editor default font family and size, you should:

1. Create a CSS file and put the following code in it. E.g. in "theme directory/assets/css/" and name it "tinymce_custom_editor.css"

    body#tinymce.wp-editor {
        font-family: CalibriFont, sans-serif;
        font-size: 14pt;
    }

2. add the following code at the end of the theme function.php

    // Wordpress editor default font
    function my_theme_add_editor_styles() {
        add_editor_style( 'assets/css/tinymce_custom_editor.css' );
    }
    add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

I've made a video tutorial for this.

本文标签： visual editorChange Default Font Size and Remove Unwanted Font Sizes in TinyMCE