我正在试图找出如何在wordpress中修改HTML编辑器;在下图中,您可以看到编辑器的屏幕截图和顶部的按钮。是否可以添加新按钮?我想添加一个按钮,可以插入“”标记和一些自定义短代码标记。我知道这不是不可能的,但有人知道怎么做吗?
将快速标记按钮添加到HTML编辑器
下载并安装HTML编辑器重新加载的插件,然后转到设置页面,您可以添加自己的新按钮。
如果变得太难和复杂,可以使用jQuery简单地添加新按钮。只需克隆现有按钮或创建新按钮,并将其附加到编辑器工具栏。您可以使用php函数包装javascript,并在管理页脚或其他地方运行它。
也可以使用edButton功能。下面是一个添加p和pre按钮的脏而快速的示例。
// Add buttons to html editor
add_action(\'admin_print_footer_scripts\',\'eg_quicktags\');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
buttonA = edButtons.length;
edButtons[edButtons.length] = new edButton(\'ed_paragraph\',\'p\',\'<p>\',\'</p><br />\',\'p\');
buttonB = edButtons.length;
edButtons[edButtons.length] = new edButton(\'ed_pre\',\'pre\',\'<pre lang="php">\',\'</pre>\',\'r\');
jQuery(document).ready(function($){
jQuery("#ed_toolbar").append(\'<input type="button" value="p" id="ed_paragraph" class="ed_button" onclick="edInsertTag(edCanvas, buttonA);" title="p" />\');
jQuery("#ed_toolbar").append(\'<input type="button" value="pre" id="ed_pre" class="ed_button" onclick="edInsertTag(edCanvas, buttonB);" title="pre" />\');
});
</script>
<?php
}
编辑:在Wordpress 3.3(及以上版本)中,quicktag添加被更改。然而,edButton懒惰解决方案在某种程度上是可行的,一些插件可能会取消它。向html编辑器中添加新按钮的新方法和正确方法如下:
// Add buttons to html editor
add_action(\'admin_print_footer_scripts\',\'eg_quicktags\');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
/* Adding Quicktag buttons to the editor Wordpress ver. 3.3 and above
* - Button HTML ID (required)
* - Button display, value="" attribute (required)
* - Opening Tag (required)
* - Closing Tag (required)
* - Access key, accesskey="" attribute for the button (optional)
* - Title, title="" attribute (optional)
* - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)
*/
QTags.addButton( \'eg_paragraph\', \'p\', \'<p>\', \'</p>\', \'p\' );
QTags.addButton( \'eg_pre\', \'pre\',\'<pre lang="php">\', \'</pre>\', \'q\' );
</script>
<?php
}
我不知道QTags是否已经添加到Wordpress Codex中,所以我在代码的注释部分添加了必需的参数。请参见中的以下内容wp-includes/js/quicktags.dev.js
/**
* Main API function for adding a button to Quicktags
*
* Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
* To be able to add button(s) to Quicktags, your script should be enqueued as dependent
* on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
* use add_action( \'admin_print_footer_scripts\', \'output_my_js\', 100 ) or add_action( \'wp_footer\', \'output_my_js\', 100 )
*
* Minimum required to add a button that calls an external function:
* QTags.addButton( \'my_id\', \'my button\', my_callback );
* function my_callback() { alert(\'yeah!\'); }
*
* Minimum required to add a button that inserts a tag:
* QTags.addButton( \'my_id\', \'my button\', \'<span>\', \'</span>\' );
* QTags.addButton( \'my_id2\', \'my button\', \'<br />\' );
*
* @param id string required Button HTML ID
* @param display string required Button\'s value="..."
* @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
* @param arg2 string optional Ending tag like "</span>"
* @param access_key string optional Access key for the button.
* @param title string optional Button\'s title="..."
* @param priority int optional Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
* @param instance string optional Limit the button to a specifric instance of Quicktags, add to all instances if not present.
* @return mixed null or the button object that is needed for back-compat.
*/
qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
下面是如何添加按钮的示例&;编辑文本wp
将此代码添加到函数。php并在检查编辑器文本后保存文件
我希望能帮助你^^
/*-----------------------------------------------*/
/* Add Text Editor Buttons
/*-----------------------------------------------*/
function urban_add_quicktags() {
//check to see if the \'quicktags\' script is in use to avoid errors
if (wp_script_is(\'quicktags\')){
?>
<script type="text/javascript">
QTags.addButton( \'h4-subheader\', \'SubHeader4\', \'<h4>\', \'</h4>\', \'4\', \'Sub Header\', 1 );
QTags.addButton( \'h3-subheader\', \'SubHeader3\', \'<h3>\', \'</h3>\', \'3\', \'Sub Header\', 2 );
QTags.addButton( \'bold\', \'<b>\', \'<b>\', \'</b>\', \'3\', \'Paraphraph\', 3 );
</script>
<?php
}
}
//Print to admin footer
add_action( \'admin_print_footer_scripts\', \'urban_add_quicktags\' );
您需要使用tinymce api在编辑器上添加按钮http://codex.wordpress.org/TinyMCE_Custom_Buttons
EDIT
哦,等等:你正在使用HTML编辑器。下面的过滤器用于向可视化编辑器添加按钮。几乎我能找到的每个参考都指示编辑quicktags.js
(事实上这是我过去常做的事),但我do not 建议编辑核心文件。我确实找到了this (completely untested) Plugin 它旨在允许修改/添加HTML编辑器quicktag按钮。
ORIGINAL ANSWER
您可以将按钮添加到第1行、第2行或第3行。以下是如何将按钮添加到第3行的示例:
function mytheme_mce_buttons_row_3( $buttons ) {
$buttons[] = \'fontselect\';
$buttons[] = \'fontsizeselect\';
$buttons[] = \'code\';
$buttons[] = \'sup\';
$buttons[] = \'sub\';
$buttons[] = \'backcolor\';
$buttons[] = \'separator\';
$buttons[] = \'hr\';
$buttons[] = \'wp_page\';
return $buttons;
}
add_filter( \'mce_buttons_3\', \'mytheme_mce_buttons_row_3\' );
显然,你会使用\'mce_buttons_1\'
将按钮添加到第1行,以及\'mce_buttons_2\'
将按钮添加到第2行。如果要添加自己的任意按钮,需要将按钮标记传递给数组,而不仅仅是HTML标记名。