WordPress 3.9+ 以上的版本集成了 TinyMCE 4 可視化編輯器，今天倡萌就來分享下，如何增強定制 TinyMCE 4，比如添加樣式、按鈕、字體、下拉菜單和彈出式窗口。教程出自 wpexplorer 的 @AJ Clarke，倡萌簡單翻譯。
- 原文：AJ Clarke@wpexplorer http://www.wpexplorer.com/wordpress-tinymce-tweaks/
- 翻譯：倡萌@WordPress大學 http://www.ydqwiac.cn/wordpress-tinymce-4-tweaks.html
我最喜歡 WordPress 3.9 的更新是使用了 TinyMCE 4.0 編輯器。新的 TinyMCE 看起來看起來更整潔（真正匹配WP儀表板），它有一些非常不錯的附加功能。我的很多老主題和插件必須更新為新 TinyMCE 的工作，所以我花了一些時間研究 API 并找出一些很酷的東西。下面我給你介紹下如何可以拓展 TinyMCE 功能的例子。我不會指導您完成所有步驟，或者是什么的代碼意味著（這是為開發(fā)者），但會為您提供您的主題或插件可用的代碼，你可以復制完全相同的代碼，粘貼，然后相應地調整。
增加字體大小和字體選擇
默認情況下，自定義字體和字體大小都不會添加到 TinyMCE 編輯器。下面的函數可以將這兩個下拉菜單添加到編輯器第二行按鈕的最左邊。如果你想添加到一個不同的行，你只需修改“mce_buttons_2”（例如：使用“mce_buttons_3’為第3行）。
// 在編輯器中啟用字體和字體大小選擇
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
function wpex_mce_buttons( $buttons ) {
array_unshift( $buttons, 'fontselect' ); // 添加字體選擇
array_unshift( $buttons, 'fontsizeselect' ); // 添加字體大小選擇
return $buttons;
}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );
添加自定義字體大小
默認的字體大小設置為 pt 值，這并不總是理想的。我更喜歡使用像素值（12像素，13px，14px，16px 等等），并提供更靈活的選擇。下面的函數將改變在下拉選擇器的默認字體大小的選項。
// 自定義編輯器字體大小
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
function wpex_mce_text_sizes( $initArray ){
$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
添加自定義字體
在默認情況下，在字體選擇列表中，默認字體選項都是“網頁安全”字體，但如果你想添加更多的字體，或許一些谷歌的字體？非常簡單，看一下下面的例子。
// 添加自定義字體到字體列表
if ( ! function_exists( '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';
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
請注意我是如何在上面的代碼中加入“Lato”字體的？就這么簡單！在我的所有 WordPress主題，我通過遍歷所有在網站上使用的自定義字體定義在主題面板上，并把它們添加到選擇框，這樣也可以在編輯文章/頁面的時候使用它們（甜蜜）。但是它僅僅是添加字體到列表中，卻不會神奇地加載腳本，所以當你在編輯器中的更改字體，你不可以真正看到適用于它的自定義字體……這就是下面的代碼所要做的！
// 添加 google 字體腳本
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
function 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' );
啟用格式（樣式）下拉菜單和添加新樣式
還記得在 WP3.8 的“樣式”下拉列表嗎？這是很酷的！你可以用它來添加一些很酷的類，以便在文章編輯器中使用（我用它在 WPExplorer 實現按鈕，彩色跨度，盒子 等等）。在 WP3.9，你仍然可以添加自己的格式，但是，它已更名為新的 TinyMCE4.0“格式”，所以它的工作原理有一點點不同。下面的例子，就是如何在格式下拉列表中添加一些新的項目。
啟用格式下拉菜單
這在 WP3.9 以前的版本中，也是這樣做的。但我還是要分享一下，以防你不知道該怎么做。
// 添加格式下拉菜單到編輯器中
if ( ! function_exists( 'wpex_style_select' ) ) {
function wpex_style_select( $buttons ) {
array_push( $buttons, 'styleselect' );
return $buttons;
}
}
add_filter( 'mce_buttons', 'wpex_style_select' );
添加新項目到格式菜單
增加新的項目是超級容易。請注意我下面的代碼是如何添加“$settings[‘style_formats_merge’] = true;“ 的，這樣可以確保你添加格式下拉菜單到編輯器中，不會影響其他人 – 不要去覆蓋整個事情（也許其他的插件要使用它）。
// 添加新樣式到格式下拉菜單中
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
function wpex_styles_dropdown( $settings ) {
// 創(chuàng)建新樣式的數組
$new_styles = array(
array(
'title' => __( 'Custom Styles', 'wpex' ),
'items' => array(
array(
'title' => __('Theme Button','wpex'),
'selector' => 'a',
'classes' => 'theme-button'
),
array(
'title' => __('Highlight','wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);
// 合并新老樣式
$settings['style_formats_merge'] = true;
// 添加新樣式
$settings['style_formats'] = json_encode( $new_styles );
// 返回新設置
return $settings;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );
添加一個簡單的MCE按鈕
添加一個新按鈕到 TinyMCE 編輯器對于簡碼來說是特別有用的，因為作為一個用戶，您不必記住任何簡碼，你可以簡單地點擊一個按鈕，并將其插入。我不是說要為你的所有簡碼都添加按鈕到TinyMCE（我討厭開發(fā)者這樣做，它的這種不好的做法，看起來很可怕），但如果添加1個或幾個，我會同意的）如果你要添加一堆，那么你應該創(chuàng)建一個子菜單，在后面的章節(jié)將介紹。
PHP代碼 – 聲明新的MCE插件
此代碼將聲明新的MCE插件，請務必更改JavaScript文件“MCE-button.js”的位置，以匹配您的文件的位置（我會給你的代碼，以及在下一小節(jié)），以及將“my”這個前綴修改為其他更唯一的字符。
// 掛載函數到正確的鉤子
function my_add_mce_button() {
// 檢查用戶權限
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// 檢查是否啟用可視化編輯
if ( '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');
// 聲明新按鈕的腳本
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
return $plugin_array;
}
// 在編輯器上注冊新按鈕
function my_register_mce_button( $buttons ) {
array_push( $buttons, 'my_mce_button' );
return $buttons;
}
JS代碼 – 添加MCE按鈕
這個js代碼放在上面的“symple_shortcodes_add_tinymce_plugin”函數中所注冊的js文件。它可以在編輯器中添加一個新的文本按鈕，上面寫著“New Button”，點擊時，它會插入文本“WPExplorer.com is awesome! ”。
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton('my_mce_button', {
text: 'New Button',
icon: false,
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
});
});
})();
添加自定義圖標到新的MCE按鈕
上面我介紹了如何在編輯器中添加一個新的按鈕“New Button”，這有點不夠完美……下面將告訴你如何添加自己的自定義圖標。
加載你的CSS樣式表
使用此函數來加載一個新的樣式表到你的管理面板使用 – 一些插件/主題可能已經添加了樣式表，所以如果你的主題/插件這樣做，跳過這一點，只需添加自定義CSS和調整的JS（如下圖所示）。
function 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
i.my-mce-icon {
background-image: url('你的圖標地址');
}
調整你的js
現在，簡單的調整你以前添加的js，刪除文本參數，取而代之，添加一個css類名。
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
});
});
})();
添加一個按鈕子菜單
前面我提到，增加了大量的新圖標到 TinyMCE 是一個壞主意，所以來看看下面的代碼，看看如何可以編輯JavaScript來顯示一個子菜單的自定義按鈕。
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
text: 'Sample Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Item 1',
menu: [
{
text: 'Sub Item 1',
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
},
{
text: 'Sub Item 2',
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
}
]
},
{
text: 'Item 2',
menu: [
{
text: 'Sub Item 1',
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
},
{
text: 'Sub Item 2',
onclick: function() {
editor.insertContent('WPExplorer.com is awesome!');
}
}
]
}
]
});
});
})();
添加一個彈出窗口
在上面的例子中，你可能會注意到，每一個按鈕只需插入文本“WPExplorer.com is awesome!”這是很酷，但如果創(chuàng)建一個彈出窗口，用戶可以改變插入的文本，是不是更酷？馬上來實現吧！
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
text: 'Sample Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Item 1',
menu: [
{
text: 'Pop-Up',
onclick: function() {
editor.windowManager.open( {
title: 'Insert Random Shortcode',
body: [
{
type: 'textbox',
name: 'textboxName',
label: 'Text Box',
value: '30'
},
{
type: 'textbox',
name: 'multilineName',
label: 'Multiline Text Box',
value: 'You can say a lot of stuff in here',
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: 'listbox',
name: 'listboxName',
label: 'List Box',
'values': [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}
]
}
],
onsubmit: function( e ) {
editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
})();
很酷……接下來呢？
問得好！現在是時候讓你把這些非常棒的調整添加到您的插件或主題中，來兼容 WordPress 3.9 新的 TinyMCE 編輯器吧。
倡萌大大，wordpress4.7+這個還能用嗎？
怎么在導航菜單添加按鈕呢？比如一個以URL形式鏈接的登錄按鈕
4.1無用。。。。
我用的模板還是3.6
問個蠢問題，代碼要加在哪裡＠＠？
加在主題 functions.php中
高清無碼套圖每日更新 http://dahuawang.org
路過先評論~~~
學習了，我剛說要給我的博客加一個類似的呢。 ??
“添加一個彈出窗口”實際有什么用？或者說該是什么樣子的呢？
彈出窗口可以讓用戶很方便地添加某些要插入的內容，具體效果有圖了