本文为《 WordPress之代码样式更改 》提供方法四,主要讲述WordPress自定义按钮
适用于目前最新版的WordPress 5.2.2
方法四设置方法:在当前使用的主题根目录下的 funtions.php
加入下面代码,再在该目录下新增一个名为 editor.js
的文件,内容如下 editor.js
。设置完后经典编辑下就有“code代码”和“TAB”按钮,实现插入代码和插入制表符的功能了。
functions.php1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| add_action( 'admin_init', 'my_tinymce_button' );
function my_tinymce_button() { if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) { add_filter( 'mce_buttons', 'my_register_tinymce_button' ); add_filter( 'mce_external_plugins', 'my_add_tinymce_button' ); } }
function my_register_tinymce_button( $buttons ) { array_push( $buttons, "button_eek", "button_green" ); return $buttons; }
function my_add_tinymce_button( $plugin_array ) { $plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/editor.js"; return $plugin_array; }
|
editor.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
| (function() { tinymce.create('tinymce.plugins.MyButtons', { init : function(ed, url) {
ed.addButton( 'button_eek', { text: 'code代码', type: 'menubutton', menu: [{ text: '非html代码', onclick: function() { ed.windowManager.open({ title: '插入非HTML语言代码', body: [{ type: 'textbox', name: 'textboxName', label: '语言', value: 'python' }, { type: 'textbox', name: 'textboxCode', label: '代码', multiline: true, minWidth: 500, minHeight: 100, spellcheck: false }], onsubmit: function(e) { ed.insertContent( '<pre class="line-numbers"><code class="language-' + e.data.textboxName + '">' + ed.dom.encode(e.data.textboxCode) + '</code></pre>'); } }) } }, { text: 'html代码', onclick: function() { ed.windowManager.open({ title: '插入HTML代码', body: [{ type: 'textbox', name: 'textboxCode', multiline: true, minWidth: 500, minHeight: 100, spellcheck: false }], onsubmit: function(e) { ed.insertContent( '<pre class="line-numbers"><code class="language-markup">' + ed.dom.encode(e.data.textboxCode) + '</code></pre>'); } }) } }] });
ed.addButton( 'button_green', { text : 'TAB', title : '插入制表符', onclick: function() { ed.selection.setContent('\t'); }, }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons ); })();
|
效果图
功能实现介绍
PHP代码 - 声明新的MCE插件
php代码中,主要是更改 function my_register_tinymce_button( $buttons )
函数中的 array_push( $buttons, "button_1", "button_2" );
。其中button_1、 button_2为按钮名,可自定义,多个按钮名用“,”隔开。
JS代码 - 添加MCE按钮
插入短语
button_1为PHP中自定义对应的按钮名,text是按钮显示的名字,title是鼠标悬停在按钮的注释。点击时调用函数 function(){...}
。ed.selection.setContent('');
在当前插入引号中的内容。
1 2 3 4 5 6 7
| ed.addButton( 'button_1', { text : 'Insert shortcode', title : 'Insert shortcode', onclick : function() { ed.selection.setContent('[myshortcode]'); } });
|
选定内容更改样式
cmd调用 button_green_cmd
对应的函数; ed.selection.getContent()
获取当前选中的内容; return_text
为替换成的内容,更改不同的标签实现不同的样式更改。
1 2 3 4 5 6 7 8 9 10 11
| ed.addButton( 'button_1', { text : 'Add span', title : 'Add span', cmd: 'button_green_cmd' }); ed.addCommand( 'button_green_cmd', function() { var selected_text = ed.selection.getContent(); var return_text = ''; return_text = '<h1>' + selected_text + '</h1>'; ed.execCommand('mceInsertContent', 0, return_text); });
|
添加一个按钮子菜单
type为menubutton菜单类型,menu为菜单内容,每一项用text属性命名,onclick点击调用函数,editor.insertContent('');
也是插入函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| 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('WP is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WP is awesome!'); } }] }, { text: 'Item 2', menu: [{ text: 'Sub Item 1', onclick: function() { editor.insertContent('WP is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WP is awesome!'); } }] }] });
|
添加弹出窗口
ed.windowManager.open({})
为弹出窗口函数,title为窗口名称,body是窗体内容。type为输入框类型;name为属性名,在onsubmit函数中可用 e.data.属性名
获取输入框内容;label为显示的标签名,不需要可去掉;textbox类型中,可选属性mutiline,true表示多行文本框,false表示单行文本框,默认false;value为预设值,为数组时表示下拉选框,如 'value': [ {text: 'Option 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ]
,其中text是选框显示内容,value为对应的值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| ed.addButton( 'button_1', { text: '非html代码', onclick: function() { ed.windowManager.open({ title: '插入非HTML语言代码', body: [{ type: 'textbox', name: 'textboxName', label: '语言', value: 'python' }, { type: 'textbox', name: 'textboxCode', label: '代码', multiline: true, minWidth: 500, minHeight: 100, spellcheck: false }], onsubmit: function(e) { ed.insertContent( '<pre class="line-numbers"><code class="language-' + e.data.textboxName + '">' + ed.dom.encode(e.data.textboxCode) + '</code></pre>'); } }) } }
|
以上的方法可以嵌套使用,可以根据自己的需求或者风格来编写自己的按钮。
主要参考链接以及代码来源