後臺文章編輯器的可視區域添加自定義功能按鈕
阿新 • • 發佈：2018-05-11
nload rac IT 樣式 admin lte size gist !=
有時候我們需要自定義一些樣式或者功能，要麽就是直接在Text區域直接寫html代碼，
還有一種方法就是直接將自定義一些樣式或者功能添加到後臺文章編輯器的
可視區域。具體實現方式如下：
首先在對應的主題的functions.php下添加如下代碼：
// 向文章編輯器的Visual區添加自定義按鈕，js文件存放在wp-content/themes/drivereasy/js/文件夾下 from Ryan 2018/05/02
add_action(‘admin_head‘, ‘my_custom_mce_button_2‘);
function my_custom_mce_button_2() {
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_custom_tinymce_plugin_2‘ );
add_filter( ‘mce_buttons‘, ‘my_register_mce_button_2‘ );
}
}
function my_custom_tinymce_plugin_2( $plugin_array ) {
$plugin_array[‘my_mce_button_2‘] = get_template_directory_uri() . ‘/js/mce-button.js‘;
return $plugin_array;
}
function my_register_mce_button_2( $buttons ) {
array_push( $buttons, ‘my_mce_button_2‘ );
return $buttons;
}
這裏需要註意 $plugin_array[‘my_mce_button_2‘] 裏面的my_mce_button_2必須與mce-button.js文件中的 editor.addButton(‘my_mce_button_2‘, object) 第一個參數保持一致。 mce-button.js代碼如下：
(function() {
tinymce.PluginManager.add(‘my_mce_button‘, function( editor, url ) {
editor.addButton( ‘my_mce_button‘, {
icon: ‘wp_code‘,
type: ‘menubutton‘,
menu: [
{
text: ‘H‘,
onclick: function() {
editor.windowManager.open( {
title: ‘H‘,
minWidth : 700,
body: [
{
type: ‘listbox‘,
name: ‘titlewrap‘,
label: ‘Choose a H type‘,
values: [
{text: ‘h2‘, value: ‘h2‘},
{text: ‘h3‘, value: ‘h3‘},
{text: ‘h4‘, value: ‘h4‘},
{text: ‘h5‘, value: ‘h5‘},
{text: ‘h6‘, value: ‘h6‘}
]
},
{
type: ‘textbox‘,
name: ‘titlecontent‘,
label: ‘Enter the content‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘textbox‘,
name: ‘title_description‘,
label: ‘Enter the description‘,
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var title_description = e.data.title_description.replace(/\r\n/gmi, ‘\n‘);
var titlecontent = e.data.titlecontent.replace(/\r\n/gmi, ‘\n‘);
titlecontent = tinymce.html.Entities.encodeAllRaw(titlecontent);
title_description = tinymce.html.Entities.encodeAllRaw(title_description);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<‘ + e.data.titlewrap + ‘ data-animal-type=‘+ title_description +‘ >‘ + e.data.titlecontent + ‘</‘+e.data.titlewrap+‘>‘ );
}
});
}
},
{
text: ‘Note type‘,
onclick: function() {
editor.windowManager.open( {
title: ‘Note type‘,
minWidth : 700,
body: [
{
type: ‘listbox‘,
name: ‘titlewrap‘,
label: ‘Choose a type‘,
values: [
{text: ‘Infomation‘, value: ‘note info‘},
{text: ‘Question‘, value: ‘note question‘},
{text: ‘Notification‘, value: ‘note notification‘},
{text: ‘Warning‘, value: ‘note warning‘},
{text: ‘Error‘, value: ‘note error‘},
{text: ‘Success‘, value: ‘note success‘}
]
},
{
type: ‘textbox‘,
name: ‘titlecontent‘,
label: ‘Enter the content‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var titlecontent = e.data.titlecontent.replace(/\r\n/gmi, ‘\n‘),
titlecontent = tinymce.html.Entities.encodeAllRaw(titlecontent);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<div class="‘+ e.data.titlewrap +‘"><span>‘ + e.data.titlecontent + ‘</span></div>‘ + sp + ‘<p></p>‘ );
}
});
}
},
{
text: ‘Download URL‘,
onclick: function() {
editor.windowManager.open( {
title: ‘Download URL‘,
minWidth : 700,
body: [
{
type: ‘textbox‘,
name: ‘links‘,
label: ‘Link address‘,
value: ‘https://www.drivereasy.com/DriverEasy_Setup.exe‘
},
{
type: ‘textbox‘,
name: ‘custom_js_code‘,
label: ‘Google tracking code‘,
value: ‘‘,
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘textbox‘,
name: ‘code‘,
label: ‘Link text‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var code = e.data.code.replace(/\r\n/gmi, ‘\n‘),
code = tinymce.html.Entities.encodeAllRaw(code);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<a href="‘ + e.data.links +‘" onclick="ga(\‘send\‘, \‘event\‘, \‘download\‘, \‘click\‘, \‘kbde-dedownload-‘+e.data.custom_js_code+‘\‘, 1.00, {\‘nonInteraction\‘:1});" rel="nofollow">‘ + code + ‘</a>‘);
}
});
}
},
{
text: ‘Buy URL‘,
onclick: function() {
editor.windowManager.open( {
title: ‘Buy URL‘,
minWidth : 700,
body: [
{
type: ‘textbox‘,
name: ‘links‘,
label: ‘Link address‘,
value: ‘https://www.drivereasy.com/buy.php?comeid=kbde‘
},
{
type: ‘textbox‘,
name: ‘custom_js_code‘,
label: ‘Google tracking code‘,
value: ‘‘,
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘textbox‘,
name: ‘code‘,
label: ‘Link text‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var code = e.data.code.replace(/\r\n/gmi, ‘\n‘),
code = tinymce.html.Entities.encodeAllRaw(code);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<a href="‘ + e.data.links +‘" onclick="ga(\‘send\‘, \‘event\‘, \‘link\‘, \‘click\‘, \‘kbde-debuy-‘ + e.data.custom_js_code + ‘\‘, 1.00, {\‘nonInteraction\‘:1});" rel="nofollow">‘ + code + ‘</a>‘);
}
});
}
},
{
text: ‘External URL‘,
onclick: function() {
editor.windowManager.open( {
title: ‘External URL‘,
minWidth : 700,
body: [
{
type: ‘textbox‘,
name: ‘links‘,
label: ‘Link address‘,
value: ‘https://‘
},
{
type: ‘textbox‘,
name: ‘custom_js_code‘,
label: ‘Google tracking code‘,
value: ‘‘,
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘textbox‘,
name: ‘code‘,
label: ‘Link text‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var code = e.data.code.replace(/\r\n/gmi, ‘\n‘),
code = tinymce.html.Entities.encodeAllRaw(code);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<a href="‘ + e.data.links +‘" onclick="ga(\‘send\‘, \‘event\‘, \‘link\‘, \‘click\‘, \‘kbde-externalurl-‘ + e.data.custom_js_code + ‘\‘, 1.00, {\‘nonInteraction\‘:1});" rel="nofollow noopener" target="_blank">‘ + code + ‘</a>‘);
}
});
}
},
{
text: ‘Internal URL‘,
onclick: function() {
editor.windowManager.open( {
title: ‘Internal URL‘,
minWidth : 700,
body: [
{
type: ‘textbox‘,
name: ‘links‘,
label: ‘Link address‘,
value: ‘https://www.drivereasy.com/‘
},
{
type: ‘textbox‘,
name: ‘custom_js_code‘,
label: ‘Google tracking code‘,
value: ‘‘,
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘textbox‘,
name: ‘code‘,
label: ‘Link text‘,
value: tinyMCE.activeEditor.selection.getContent({format : ‘text‘}), //??????
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
var code = e.data.code.replace(/\r\n/gmi, ‘\n‘),
code = tinymce.html.Entities.encodeAllRaw(code);
var sp = (e.data.addspaces ? ‘ ‘ : ‘‘);
editor.insertContent(sp + ‘<a href="‘ + e.data.links +‘" onclick="ga(\‘send\‘, \‘event\‘, \‘link\‘, \‘click\‘, \‘kbde-linkde-‘ + e.data.custom_js_code + ‘\‘, 1.00, {\‘nonInteraction\‘:1});" rel="noopener" target="_blank">‘ + code + ‘</a>‘);
}
});
}
},
{
text: ‘Dividing Line Style‘,
onclick: function() {
var hr_text = tinyMCE.activeEditor.selection.getContent({format : ‘text‘}).replace(/\r\n/gmi, ‘\n‘),
hr_text = tinymce.html.Entities.encodeAllRaw(hr_text);
editor.insertContent(‘<hr class="hr-text" data-content="‘ + hr_text + ‘" >‘);
}
},
{
text: ‘Text Alignment Left Style‘,
onclick: function() {
var hr_text = tinyMCE.activeEditor.selection.getContent({format : ‘text‘}).replace(/\r\n/gmi, ‘\n‘),
hr_text = tinymce.html.Entities.encodeAllRaw(hr_text);
if (hr_text != null && hr_text != "") {
editor.insertContent(‘<p class="super_indentation_left">‘ + hr_text + ‘</p>‘);
}
}
},
{
text: ‘Text Alignment Center Style‘,
onclick: function() {
var hr_text = tinyMCE.activeEditor.selection.getContent({format : ‘text‘}).replace(/\r\n/gmi, ‘\n‘),
hr_text = tinymce.html.Entities.encodeAllRaw(hr_text);
if (hr_text != null && hr_text != "") {
editor.insertContent(‘<p class="super_indentation_center">‘ + hr_text + ‘</p>‘);
}
}
},
{
text: ‘Text Alignment Right Style‘,
onclick: function() {
var hr_text = tinyMCE.activeEditor.selection.getContent({format : ‘text‘}).replace(/\r\n/gmi, ‘\n‘),
hr_text = tinymce.html.Entities.encodeAllRaw(hr_text);
if (hr_text != null && hr_text != "") {
editor.insertContent(‘<p class="super_indentation_right">‘ + hr_text + ‘</p>‘);
}
}
}
]
});
editor.addButton(‘my_mce_button_align_left‘, {
// text: ‘WDM‘,
image: ‘https://www.supereasy.com/wp-content/themes/rt_notio/images/align-cell-content-left.png‘,
tooltip: "Align Left",
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent(‘[wdm_shortcode]‘);
}
});
editor.addButton(‘my_mce_button_align_center‘, {
// text: ‘WDM‘,
image: ‘https://www.supereasy.com/wp-content/themes/rt_notio/images/align-cell-content-left.png‘,
tooltip: "Align Center",
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent(‘[wdm_shortcode]‘);
}
});
editor.addButton(‘my_mce_button_align_right‘, {
// text: ‘WDM‘,
image: ‘https://www.supereasy.com/wp-content/themes/rt_notio/images/align-cell-content-left.png‘,
tooltip: "Align Right",
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent(‘[wdm_shortcode]‘);
}
});
});
})();
後臺文章編輯器的可視區域添加自定義功能按鈕