将快速标记按钮添加到HTML编辑器

时间:2011-09-28 作者:JasonDavis

我正在试图找出如何在wordpress中修改HTML编辑器;在下图中,您可以看到编辑器的屏幕截图和顶部的按钮。是否可以添加新按钮?我想添加一个按钮,可以插入“”标记和一些自定义短代码标记。我知道这不是不可能的,但有人知道怎么做吗?

enter image description here

7 个回复
最合适的回答,由SO网友:Mohit Bumb 整理而成

下载并安装HTML编辑器重新加载的插件,然后转到设置页面,您可以添加自己的新按钮。

http://wordpress.org/extend/plugins/html-editor-reloaded/

SO网友:emrahgunduz

如果变得太难和复杂,可以使用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中,所以我在代码的注释部分添加了必需的参数。

SO网友:Aram Kocharyan

请参见中的以下内容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 ) {

SO网友:luckykind
SO网友:Said Erraoudy

下面是如何添加按钮的示例&;编辑文本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\' );

SO网友:hacksy

您需要使用tinymce api在编辑器上添加按钮http://codex.wordpress.org/TinyMCE_Custom_Buttons

SO网友:Chip Bennett

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标记名。

结束

相关推荐

无需大量重写即可复制_EDITOR(媒体栏、TinyMCE、可视/HTML选项卡)功能

关于在post/page/cpt编辑器之外实现\\u编辑器功能,并在不重写大量内容的情况下保留该功能的外观和感觉,我一直在苦苦思索一段时间。我遇到的问题都是WP核心中的问题。\\u编辑器及其周围的JS脚本可以拉入TinyMCE,处理视觉/HTML选项卡,以及媒体栏,这些脚本不会被多次使用。此外,\\u编辑器不是自包含的,这意味着您必须在页眉/页脚中加载许多样式和脚本才能启用功能。我的问题是,是否有人看到或构建了一个自包含的编辑器函数,该函数标准化了插件使用的类编辑器实现?我雇佣了一名开发人员来编写脚本,他