WordPress 3.9+ TinyMCE 4调整：添加样式，按钮，字体，下拉菜单和弹出窗口

WordPress 3.9+ TinyMCE 4调整：添加样式，按钮，字体，下拉菜单和弹出窗口

我在WordPress 3.9中最喜欢的更新之一是使TinyMCE版本4.0成为核心。新的TinyMCE看起来更干净（确实与WP仪表板匹配），并且具有一些非常好的附加功能。我的许多旧主题和插件都必须进行更新才能与新的TinyMCE配合使用，因此我花了一些时间进行深入研究 API 并找出一些很酷的东西。下面，我将为您提供一些示例，说明如何扩展TinyMCE的功能。我不会逐步介绍所有步骤或代码的确切含​​义（适用于开发人员），但将为您提供可以复制/粘贴到主题或插件中，然后进行相应调整的确切代码。.


添加字体大小和字体系列选择

默认情况下，“自定义字体”和“字体大小”不会添加到TinyMCE编辑器中。下面的函数会将这两个下拉列表添加到第二行编辑器的最左侧。如果您想在另一行中简单地更改“ mce_buttons_2”的位置（例如，在第三行中使用“ mce_buttons_3”）.

//在编辑器中启用字体大小和字体系列选择
如果（！function_exists（'wpex_mce_buttons'））{
函数wpex_mce_buttons（$ buttons）{
array_unshift（$ buttons，'fontselect'）; //添加字体选择
array_unshift（$ buttons，'fontsizeselect'）; //添加字体大小选择
返回$ buttons;
}
}
add_filter（'mce_buttons_2'，'wpex_mce_buttons'）;

添加自定义字体大小

默认情况下，字体大小设置为pt值，但并不总是理想的。我更喜欢使用像素值（12px，13px，14px，16px..etc），并提供更多的选项，以实现更大的灵活性。以下功能将更改下拉选择器中的默认字体大小选项.

//自定义mce编辑器字体大小
如果（！function_exists（'wpex_mce_text_sizes'））{
函数wpex_mce_text_sizes（$ initArray）{
$ initArray ['fontsize_formats'] =“ 9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px”;
返回$ initArray;
}
}
add_filter（'tiny_mce_before_init'，'wpex_mce_text_sizes'）;

添加自定义字体

默认情况下，字体系列选择器中的默认字体选项均为“网络安全”字体，但是如果您想向选择器中添加更多字体呢？也许一些Google字体？我们来看下面的例子真的很容易.

//将自定义字体添加到“字体”列表中
如果（！function_exists（'wpex_mce_google_fonts_array'））{
函数wpex_mce_google_fonts_array（$ initArray）{
$ initArray ['font_formats'] ='拉托=拉托；安达莱·莫诺=阿黛尔·莫勒斯，时代；阿里亚尔=阿里亚尔，黑维特卡，无衬线；阿里亚尔·布莱克=阿里亚尔黑，前卫；书Antiqua =本书antiqua，palatino；科米·桑斯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';
返回$ initArray;
}
}
add_filter（'tiny_mce_before_init'，'wpex_mce_google_fonts_array'）;

请注意，我如何在上面的代码中将“ Lato”添加到列表中？就这么简单！在我的WordPress总主题中，我实际上遍历了主题面板中定义的网站上使用的任何自定义字体，并将它们添加到选择框中，以便在编辑帖子/页面（甜）时也可以使用它们。但是该代码仅将字体族广告到下拉菜单中，因此不会神奇地加载脚本，因此，当您在编辑器中更改文本时，您实际上可以看到对其应用了自定义字体……这就是下面的代码!

//添加Google脚本以供编辑器使用
如果（！function_exists（'wpex_mce_google_fonts_styles'））{
函数wpex_mce_google_fonts_styles（）{
$ font_url ='http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style（str_replace（'，'，'％2C'，$ font_url））;
}
}
add_action（'init'，'wpex_mce_google_fonts_styles'）;

启用格式（样式）下拉菜单并添加新样式

还记得WP 3.8中的“样式”下拉列表吗？太酷了！您可以使用它添加一些很酷的类以在帖子编辑器中使用（我实际上在WPExplorer上将其用于按钮，彩色跨度，框等）。在WP 3.9中，您仍然可以添加样式，但是，在新的TinyMCE 4.0中已将其重命名为“格式”，因此它的工作方式略有不同。以下是如何启用“格式”下拉菜单以及如何向其中添加一些新项目的示例.

WordPress TInyMCE格式下拉菜单

启用格式下拉菜单

实际上是在WP 3.9之前以相同的方式完成的，但是如果您不知道该怎么做，我是在分享.

//将格式下拉菜单添加到MCE
如果（！function_exists（'wpex_style_select'））{
函数wpex_style_select（$ buttons）{
array_push（$ buttons，'styleselect'）;
返回$ buttons;
}
}
add_filter（'mce_buttons'，'wpex_style_select'）;

将新项目添加到格式

添加新项目非常容易。请注意我如何添加“ $ settings [‘style_formats_merge’] = true;”在下面的代码中，这确保您的编辑内容与其他所有内容一起添加到了格式下拉菜单中-不要覆盖整个内容（也许其他插件也希望使用它）.

//在TinyMCE“格式”菜单下拉菜单中添加新样式
如果（！function_exists（'wpex_styles_dropdown'））{
函数wpex_styles_dropdown（$ settings）{

//创建新样式的数组
$ new_styles =数组（
数组（
'标题'=> __（'自定义样式'，'wpex'）,
'items'=>数组（
数组（
'标题'=> __（'主题按钮'，'wpex'）,
'选择器'=>'a',
'classes'=>'theme-button'
）,
数组（
'title'=> __（'Highlight'，'wpex'）,
'内联'=>'跨度',
'classes'=>'text-highlight',
）,
）,
）,
）;

//合并新旧样式
$ settings ['style_formats_merge'] = true;

//添加新样式
$ settings ['style_formats'] = json_encode（$ new_styles）;

//返回新设置
返回$ settings;

}
}
add_filter（'tiny_mce_before_init'，'wpex_styles_dropdown'）;

添加一个简单的MCE按钮

将新按钮添加到TinyMCE编辑器对于短代码特别有用，因为作为用户，您不必记住任何短代码，您只需单击按钮即可将其插入。我并不是说要为您的所有短代码添加100个按钮到TinyMCE（我讨厌开发人员这样做时，这是一种不好的做法，看起来很可怕），但是如果您添加1个或几个按钮，我会让它通过��如果您要添加一个束，那么您应该按照以下部分中的说明创建一个子菜单.

WordPress MCE新建按钮

PHP代码–在WP中声明新的MCE插件

这段代码将声明您的新MCE插件。请务必更改javascript文件“ mce-button.js”的位置，以与您文件的位置相匹配（在下一节中，我还将为您提供代码）显然是将前缀“ my”重命名为更独特的名称!

//将函数连接到正确的过滤器中
函数my_add_mce_button（）{
//检查用户权限
如果（！current_user_can（'edit_posts'）&&！current_user_can（'edit_pages'））{
返回;
}
//检查是否启用了所见即所得
如果（'true'== get_user_option（'rich_editing'））{
add_filter（'mce_external_plugins'，'my_add_tinymce_plugin'）;
add_filter（'mce_buttons'，'my_register_mce_button'）;
}
}
add_action（'admin_head'，'my_add_mce_button'）;

//声明新按钮的脚本
函数my_add_tinymce_plugin（$ plugin_array）{
$ plugin_array ['my_mce_button'] = get_template_directory_uri（）。'/ js / mce-button.js';
返回$ plugin_array;
}

//在编辑器中注册新按钮
函数my_register_mce_button（$ buttons）{
array_push（$ buttons，'my_mce_button'）;
返回$ buttons;
}

JS代码–将按钮添加到MCE

此js代码进入“ symple_shortcodes_add_tinymce_plugin”函数中上面代码段中注册的js文件中。这应该在编辑器中添加一个新文本按钮，显示“ New Button”，单击该按钮将插入文本“ WPExplorer.com太棒了！” （当然）.

（function（）{
tinymce.PluginManager.add（'my_mce_button'，function（editor，url）{
editor.addButton（'my_mce_button'，{
文字：“新按钮”,
图标：错误,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
}）;
}）;
}）（）;

将自定义图标添加到新的MCE按钮

上面我向您展示了如何添加一个新按钮，该按钮在编辑器中将显示为“ New Button”，这有点la脚…因此，更改后的代码将向您展示如何添加自己的自定义图标.

用CSS加载样式表

使用此功能加载新的样式表以供您在管理面板中使用-一些插件/主题可能已经添加了样式表，因此，如果您的主题/插件正在执行此操作，请跳过此步骤，仅添加自定义CSS并调整js（如下所示）.

函数my_shortcodes_mce_css（）{
wp_enqueue_style（'symple_shortcodes-tc'，plugins_url（'/ css / my-mce-style.css'，__FILE__））;
}
add_action（'admin_enqueue_scripts'，'my_shortcodes_mce_css'）;

您的自定义CSS

这是添加以前加载的样式表的CSS.

i.my-mce-icon {
背景图片：url（'您的图标URL'）;
}

调整您的Javascript

现在，简单地调整您之前添加的javascript以删除text参数，而不是将图标设置为false即可为其自定义类名.

（function（）{
tinymce.PluginManager.add（'my_mce_button'，function（editor，url）{
editor.addButton（'my_mce_button'，{
图标：“ my-mce-icon”,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
}）;
}）;
}）（）;

使用子菜单添加按钮

MCE按钮子菜单

之前我提到过，在TinyMCE栏中添加大量新图标是个坏主意，所以请查看下面的代码以查看如何编辑javascript以显示自定义按钮的子菜单。如果您想查看它的运行情况，请查看我的 简码视频.

（function（）{
tinymce.PluginManager.add（'my_mce_button'，function（editor，url）{
editor.addButton（'my_mce_button'，{
文字：“样本下拉列表”,
图标：错误,
类型：“菜单按钮”,
菜单：[
{
文字：“第1项”,
菜单：[
{
文字：“子项目1”,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
},
{
文字：“子项目2”,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
}
]
},
{
文字：“第2项”,
菜单：[
{
文字：“子项目1”,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
},
{
文字：“子项目2”,
onclick：function（）{
editor.insertContent（'WPExplorer.com很棒！'）;
}
}
]
}
]
}）;
}）;
}）（）;

单击时将弹出窗口添加到您的按钮

在上面的示例中，您可能会注意到，每个按钮仅插入文本“ WPExplorer.com太棒了！”这很酷，但是如何创建一个弹出窗口，用户可以在其中更改要插入文本的弹出窗口呢？现在那太好了！这是我在Symple简码1.6版中添加的内容，使该插件更加人性化.

WordPress MCE弹出窗口

（function（）{
tinymce.PluginManager.add（'my_mce_button'，function（editor，url）{
editor.addButton（'my_mce_button'，{
文字：“样本下拉列表”,
图标：错误,
类型：“菜单按钮”,
菜单：[
{
文字：“第1项”,
菜单：[
{
文字：“弹出式”,
onclick：function（）{
editor.windowManager.open（{
标题：“插入随机简码”,
身体： [
{
类型：“文本框”,
名称：“ textboxName”,
标签：“文本框”,
值：“ 30”
},
{
类型：“文本框”,
名称：“ multilineName”,
标签：“多行文本框”,
价值：“您可以在这里说很多话”,
多行：true,
minWidth：300,
minHeight：100
},
{
类型：“列表框”,
名称：“ listboxName”,
标签：“列表框”,
“值”：[
{text：“选项1”，值：“ 1”},
{text：“选项2”，值：“ 2”},
{text：“选项3”，值：“ 3”}
]
}
],
onsubmit：function（e）{
editor.insertContent（'[random_shortcode textbox =“'+ e.data.textboxName +'” multiline =“'+ e.data.multilineName +'” listbox =“'+ e.data.listboxName +'”]'）;;
}
}）;
}
}
]
}
]
}）;
}）;
}）（）;

太酷了…现在?

好问题！现在是时候进行这些令人敬畏的调整，创建一些史诗般的内容或更新您的插件/主题，使其与WordPress 3.9中的新TinyMCE兼容。在下面的评论中让我知道您的想法!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector