web-dev-qa-db-ja.com

HTMLエディタにクイックタグボタンを追加する

WordpressでHTMLエディタを変更する方法を見つけようとしています。下の画像では、エディタのスクリーンショットと上部のボタンを見ることができます。新しいボタンを追加することは可能ですか？タグといくつかのカスタムショートコードタグを挿入するボタンを追加したいと思います。それは不可能ではないことを私は知っていますが、誰もがそれを行う方法を知っていますか？

enter image description here

editorhtml-editor
5
JasonDavis

HTML Editor Reloaded Pluginをダウンロードしてインストールし、設定ページに移動すると、独自の新しいボタンを追加できます。

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

1
Mohit Bumb

それが難しすぎて複雑になった場合は、jQueryを使用して新しいボタンを追加するだけです。既存のものを複製するか新しいボタンを作成して、それをエディタのツールバーに追加するだけです。 JavaScriptをphp関数でラップして、管理フッターなどで実行することができます。

あるいは、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（以上）では、クイックタグの追加が変更されています。しかし、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に追加されているかどうかはわかりません。そのため、コードのコメント部分に必須パラメータを追加しました。

8
emrahgunduz

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 ) {
3
Aram Kocharyan

これは誰かにも役に立つかもしれません...

http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html

2
luckykind

これがボタン＆＆をエディタテキストwpに追加する方法の私の例です。

このコードをfunctions.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' );
1
Said Erraoudy

エディタにボタンを追加するには、tinymce apiを使用する必要があります http://codex.wordpress.org/TinyMCE_Custom_Buttons

0
hacksy

編集

ああ、待ってください：HTMLエディターを使用しています。以下のフィルターは、ボタンをVisualエディターに追加するためのものです。

見つけることができるほぼすべての参照はquicktags.jsを編集するように指示します（実際、私は以前使っていました）が、do notコアファイルの編集をお勧めします。 この（完全にテストされていない）プラグイン は、HTMLエディターのクイックタグボタンの変更/追加を許可すると主張しています。

元の回答

行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タグ名だけでなく、ボタンマークアップを配列に渡す必要があります。

0
Chip Bennett