在TinyMCE中更改默认字体大小并删除不需要的字体大小

时间:2017-08-29 作者:Topy

我使用TinyMCE高级插件。我在插件的支持论坛上发布了一个问题,但作者现在似乎并没有提供任何支持。如图所示,字体大小12pt是默认字体大小。每次打开TinyMCE Advance编辑器时,12pt的大小都会以默认状态显示。如何将默认大小更改为14pt并删除8pt、10pt、12pt大小?

我做了一些研究,建议我去:

wp-includes/js/tinymce/skin/wordpress/wp-content.css
并在中更改大小

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 */
}
在这种情况下,我将其更改为18pt,但它不起作用。问题是默认的12pt大小仍然存在。只有当我在文本编辑器区域内单击时,它才会更改;它将从12pt(默认显示)更改为14pt。但实际上,当我键入文本并发布时,结果是发布的文本仍然显示12磅大小,而不是14磅大小。因此,这意味着我必须在下拉列表中选择一个字体大小为14pt的字体,以获得14pt的大小。

enter image description here

3 个回复
最合适的回答,由SO网友:Howdy_McGee 整理而成

这有点像是两个部分。前半部分将向您展示如何在编辑时更改TinyMCE中的样式。下半部分将向您展示如何从工具栏中删除内容。

Style TinyMCE WordPress为我们提供了一个简洁的小函数,名为add_editor_style() 它通过URL或相对路径接受样式表数组。WordPress默认主题通常利用此功能,可以在最新的TwentySeventeen theme. 首先,让我们创建一个样式表。名字不重要,但位置重要。

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}
为了简单起见,我们将其称为editor-style.css 并将其保存在主题中:

/assets/css/editor-style.css
接下来,我们需要告诉WordPress使用我们的样式表,以便打开主题functions.php 文件和加载项:

/**
 * 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\' );
一些插件可能会干扰这一点,比如页面生成器,如果他们实现自己的TinyMCE。

修改工具栏接下来,我们可以使用tiny_mce_before_init filter hook 修改TinyMCE。在这种情况下,如果覆盖字体大小,我们所需要做的就是。您可以将以下函数添加到functions.php 文件:

/**
 * 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 数组有一个索引,该索引接受由空格分隔的字体大小列表。你可以把这些换成你想要的,px, em, rem 没关系,只是列表用空格分隔,并且是有效的font-size 价值

SO网友:Topy

我只用这个。这对我有用。此代码与您的代码有什么不同?

// 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\' );

SO网友:Tony Ngo

这就是答案,对我来说很有用:

查找functions.php 在主题目录的根目录中/wp-content/themes/yourtheme/, 打开它并在后面添加一行php 标签

添加\\u editor\\u style(\'custom-editor-style.css\');

在同一目录中,创建一个名为custom-editor-style.css 包含以下行

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: \'Open Sans\', sans-serif, Arial, Helvetica;}
继续,清除浏览器缓存,这就是您将看到的内容。

参考链接:https://blog.phi9.com/wordpress-editor-and-its-font/

结束

相关推荐

将项目添加到自定义TinyMCE菜单

我已经创建了一个自定义菜单,它显示在我的TinyMCE工具栏上,但我想在插件其他地方的单独功能中向该菜单添加另一项(取决于其他功能是否处于活动状态)。我曾希望addMenuItem能成功,但我无法实现。我怀疑这可能与我的“上下文”理解错误有关。有人能告诉我这是否可能吗?以下是添加自定义菜单的功能:(function() { tinymce.PluginManager.add(\'nto_shortcode_button1\', function( editor, url ) {