在Wordpress的可视化编辑器(TinyMCE)中,我想添加一个按钮,在单击时添加四个不间断的空格,如下所示:
我找到了一些插件,可以将按钮添加到HTML编辑器中,但不能添加到可视化编辑器中(this one 例如)。或者一般来说,最好知道是否有插件或可编码(但简单)的替代方法来向可视tinyMCE编辑器添加自定义按钮。
在Wordpress的可视化编辑器(TinyMCE)中,我想添加一个按钮,在单击时添加四个不间断的空格,如下所示:
我找到了一些插件,可以将按钮添加到HTML编辑器中,但不能添加到可视化编辑器中(this one 例如)。或者一般来说,最好知道是否有插件或可编码(但简单)的替代方法来向可视tinyMCE编辑器添加自定义按钮。
我已经演示了你如何在这方面取得这样的成就question 但我可以在这里再次解释你的要求。我已经在Wordpress 3.5中对此进行了测试,它运行得很好。为了避免这个答案是一篇论文的长度,我在所有代码中添加了注释,以帮助您理解每个函数的作用,我强烈建议您阅读并彻底理解它们。
首先,在主题文件夹中,添加一个名为admin
并在其中创建文件class.new_tinymce_btn.php
带代码:
<?php
//wpex_37798_christine_cooper
//class start
class add_new_tinymce_btn {
public $btn_arr;
public $js_file;
/*
* call the constructor and set class variables
* From the constructor call the functions via wordpress action/filter
*/
function __construct($seperator, $btn_name,$javascrip_location){
$this->btn_arr = array("Seperator"=>$seperator,"Name"=>$btn_name);
$this->js_file = $javascrip_location;
add_action(\'init\', array(&$this,\'add_tinymce_button\'));
add_filter( \'tiny_mce_version\', array(&$this,\'refresh_mce_version\'));
}
/*
* create the buttons only if the user has editing privs.
* If so we create the button and add it to the tinymce button array
*/
function add_tinymce_button() {
if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') )
return;
if ( get_user_option(\'rich_editing\') == \'true\') {
//the function that adds the javascript
add_filter(\'mce_external_plugins\', array(&$this,\'add_new_tinymce_plugin\'));
//adds the button to the tinymce button array
add_filter(\'mce_buttons\', array(&$this,\'register_new_button\'));
}
}
/*
* add the new button to the tinymce array
*/
function register_new_button($buttons) {
array_push($buttons, $this->btn_arr["Seperator"],$this->btn_arr["Name"]);
return $buttons;
}
/*
* Call the javascript file that loads the
* instructions for the new button
*/
function add_new_tinymce_plugin($plugin_array) {
$plugin_array[$this->btn_arr[\'Name\']] = $this->js_file;
return $plugin_array;
}
/*
* This function tricks tinymce in thinking
* it needs to refresh the buttons
*/
function refresh_mce_version($ver) {
$ver += 3;
return $ver;
}
}//class end
?>
此代码将向可视化编辑器添加自定义按钮。接下来,在主题文件夹中,创建这些文件夹adminjs/buttons
在里面,创建这个JS文件spacebutton.js
带代码:
(function() {
tinymce.create(\'tinymce.plugins.nextpage\', {
init : function(ed, url) {
ed.addButton(\'nextpage\', {
title : \'Space Button\',
image : url+\'/images/btn_spacebutton.png\',
onclick : function() {
var prompt_text = " ";
var caret = "caret_pos_holder";
var insert = "<p>" + prompt_text + " </p> <span id="+caret+"></span>";
ed.execCommand(\'mceInsertContent\', false, insert);
ed.selection.select(ed.dom.select(\'span#caret_pos_holder\')[0]); //select the span
ed.dom.remove(ed.dom.select(\'span#caret_pos_holder\')[0]); //remove the span
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add(\'nextpage\', tinymce.plugins.nextpage);
})();
您需要为按钮添加图像(/images/btn_spacebutton.png
). 上面的代码是一个非常简单的javascript函数,用于描述按下按钮时发生的情况。现在,您需要通过将其添加到函数文件来加载此按钮类:
//load custom buttons class
require_once (TEMPLATEPATH . \'/admin/class.new_tinymce_btn.php\');
//create an instance of the class
$t = new add_new_tinymce_btn(\'|\',\'nextpage\',get_bloginfo(\'template_url\').\'/adminjs/buttons/spacebutton.js\');
就是这样。您应该在可视化编辑器中找到新的自定义按钮。每当您想添加更多自定义按钮时,只需添加一个带有button函数的新JS文件并加载button类,如上所示。TL;博士,代码在底部。
好的,这应该对你有用,但这是测试版。它对我很有效,但我还没有做过任何严格的测试。有一点,它不会连续输出四个
实体;它会口吃
[space]
[space]
, 但至少在视觉和视觉之间来回切换时,它保持了原样;文本模式。它只在视觉模式下工作,我还没有花时间去弄清楚如何在文本模式下工作。
它有两个文件,根据您的需要命名。我用了富有想象力的名字:4Spaces:)TinyMCE按钮位于编辑器最右侧的第一行。对于不存在的图像,它将显示您的浏览器所显示的任何风格。这在4空间中很容易改变。js,第8行:
image : url + \'/\' + \'YOUR_IMAGE_HERE.png\'
在此处更改\'YOUR\\u IMAGE\\u\'。相对于这两个文件,png\'到您的图像文件,或使用如下绝对URI:image : \'/path/to/image/YOUR_IMAGE_HERE.png\'
或image : \'http://example.com/path/to/image/YOUR_IMAGE_HERE.png\'
我在整个PHP中都发表了评论和/或留下了一些现有的评论,JavaScript评论很少。您将在PHP标题部分看到PHP代码的来源,以及JavaScript的起源。PHP标题中列出了两个值得注意的学分:this WordPress.SE Answer 这提供了阻止TinyMCE(或WordPress,不确定是哪个)删除空格的代码,以及@Alexey在之前的回答中提供的链接,虽然这并不重要,但帮助我偶然发现了JS解决方案。
我无法在中生成代码that link 工作,但最终还是回来了,并找到了将这一切结合在一起的金块(当然还有一些调整)。
我想这就是一切的总结。代码如下:
<?php
/* Plugin Name: 4Spaces
* Version: 0.1.0
* Author: AK Ted
* Author URI: http://akted.com
* License: GPLv2 or later
*
*
* PHP code adapted & refined from the following two sources:
* WordPress Codex - http://codex.wordpress.org/TinyMCE_Custom_Buttons#Loading_a_TinyMCE__Plugin
*
* WordPress Answers (Stack Exchange) - https://wordpress.stackexchange.com/questions/54398/how-can-i-stop-tinymce-from-converting-my-html-entities-to-characters#answer-54480
*
*
* The JavaScript arose from a lot of trial-and-error, with code [beat into submission...er, I mean] inspired by both of the following sources:
* tinymce wiki - http://www.tinymce.com/wiki.php/Creating_a_plugin
* &
* brett terpstra - http://brettterpstra.com/2010/04/17/adding-a-tinymce-button/
*
*/
new akt_4spaces();
class akt_4spaces {
function __construct() {
add_action(\'admin_init\', array($this, \'init\'));
} // function __construct
// callback for init
// sets all the hooks only if user has capability & rich_editing is true
function init() {
// Don\'t bother doing this stuff if the current user lacks permissions
if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') ) {
return;
}
// Add only in Rich Editor mode
if ( get_user_option(\'rich_editing\') == \'true\') {
add_filter(\'mce_buttons\', array($this, \'add_button\'));
add_filter(\'mce_external_plugins\', array($this, \'add_tinymce_plugin\'));
add_filter(\'tiny_mce_before_init\', array($this, \'preserve_entities\'));
}
} // function init
// callback for mce_buttons filter
// adds button to TinyMCE
function add_button($buttons) {
array_push($buttons, \'separator\', \'four_spaces\');
return $buttons;
} // function add_button
// callback for mce_external_plugins filter
// attaches the JavaScript file to TinyMCE
function add_tinymce_plugin($plugin_array) {
$plugin_array[\'four_spaces\'] = plugins_url(\'/\', __FILE__) . \'4spaces.js\';
return $plugin_array;
} // function add_tinymce_plugin
// callback for tiny_mce_before_init
// stops TinyMCE (WordPress?) from automatically converting entities
function preserve_entities( $initArray ) {
// The odd entries are the entity *number*, the even entries are the entity *name*. If the entity has no name,
// use the number, prefixed with a hash (for example, the service mark is "8480,#8480").
$initArray[\'entities\'] = \'160,nbsp,\' . $initArray[\'entities\'];
return $initArray;
} // function preserve_entities
} // class akt_4spaces
(function() {
tinymce.create(\'tinymce.plugins.four_spaces\', {
init : function(ed, url) {
// Register four_spaces button
ed.addButton(\'four_spaces\', {
title : \'4Spaces\',
image : url + \'/\' + \'YOUR_IMAGE_HERE.png\',
onclick : function() {
ed.execCommand(
"mceInsertContent",
false,
" "
);
}
});
}
});
// Register plugin
tinymce.PluginManager.add(\'four_spaces\', tinymce.plugins.four_spaces);
})();
编辑:我忘了提一下,对于那些不知道的人,把这两个文件都放在/wp-content/plugins/
(默认路径)。它应该看起来像/wp-content/plugins/4spaces/或任何你决定叫它的名字,然后在Admin中激活它。P、 我对OOP比较陌生,所以欢迎任何人对我的回答提出批评和建议。
下面的函数在使用时创建一个按钮,如so[btn]按钮文本[/btn]function btn($atts, $content = null) { extract(shortcode_atts(array(\'link\' => \'#\'), $atts)); return \'<a class=\"btn\" href=\"\'.$link.\'\"><span>\' . do_shortcode($content) . \'</span&