为 TinyMCE Advanced 添加字体大小

Question

我正在使用 Wordpress 4.9.8 和 TinyMCE Advanced 4.8.0

我似乎没有在任何地方找到这个问题的答案所以如果我遗漏了什么请提前道歉...

我想在编辑器的下拉菜单中添加额外的字体大小。我设法通过在插件设置中选择 'Font sizes' 选项并将选项添加到我需要的尺寸来做到这一点 '/wp-content/plugins/tinymce-advanced/tinymce-advanced.php'文件如下：

private $fontsize_formats = '8px 10px 12px 13px 14px 16px 20px 24px 28px 32px 36px';

效果很好，但已将默认字体大小更改为 16px（应为 12px）

还有其他方法吗？

谢谢

Answer 1

查看我之前在 WordPress Stack Exchange 上的回答。为了透明起见，我将把它移植到这里。

这是一种二人组。上半部分将向您展示如何在编辑时更改 TinyMCE 内部的样式。下半部分将向您展示如何从工具栏中删除内容。

样式 TinyMCE

WordPress 为我们提供了一个简洁的小函数，称为 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。首先让我们创建一个样式表。名字不重要，位置重要。

body,
button,
input,
select,
textarea {
    font-size: 16px;
}

为简单起见，我们将其称为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'] = "8px 10px 12px 13px 14px 16px 20px 24px 28px 32px 36px";

    return $args;

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

$args 数组有一个索引，该索引接受由 space 分隔的字体大小列表。您可以将这些更改为您想要的任何内容，px、em、rem 没关系，只是列表由 space 分隔并且是有效的 font-size值。

为 TinyMCE Advanced 添加字体大小

Adding font sizes to TinyMCE Advanced

wordpress

tinymce

font-size

样式 TinyMCE

修改工具栏