web-dev-qa-db-ja.com

TinyMCEエディタでテキストを挿入するためのボタンを追加

クリックしたときにTinyMCEエディタにカスタムボタンを追加してビジュアルエディタにテキストを挿入する方法を探しています。

たとえば、ボタンをクリックしたときに「こんにちは」というボタンが挿入されたときエディタに挿入"Hello I'm <B>Mark</b>!"

出来ますか？そしてどうやって？

wp-admintinymcevisual-editor
3
Pepozzo

これをあなたのプラグインファイルまたはテーマディレクトリのfunctions.phpファイルに追加してください 

add_action( 'admin_enqueue_scripts', 'wpse_141344_admin_enqueue_scripts' );
add_action( 'admin_head', 'wpse_141344_add_mce_button' );

function wpse_141344_admin_enqueue_scripts() {
    wp_enqueue_script( 'wpse_141344-tinymce-scipt', 'url/to/your/custom-tinymce.js' );
}

function wpse_141344_add_mce_button() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    add_filter( 'mce_external_plugins', 'wpse_141344_add_tinymce_plugin' );
    add_filter( 'mce_buttons', 'wpse_141344_register_mce_button' );
}

function wpse_141344_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['wpse_141344_tinymce_button'] = 'url/to/your/custom-tinymce.js';
    return $plugin_array;
}

function wpse_141344_register_mce_button( $buttons ) {
    array_Push( $buttons, 'wpse_141344_tinymce_button' );
    return $buttons;
}

これがあなたのcustom-tinymce.jsファイルです 

(function() {
    tinymce.PluginManager.add('wpse_141344_tinymce_button', function( editor, url ) {
        editor.addButton( 'wpse_141344_tinymce_button', {
            // image : 'url/to/an/icon', // optional
            text : 'Hi',
            title : 'Hi',
            onclick: function() {
                editor.insertContent('Hello I\'m <B>Mark</b>!');
            }

        });
    });
})();
4
mukto90

ボタンを最初から作成したい場合は、次のコードを使用してみてください。

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'menubutton',
            text: 'My button',
            icon: false,
            menu: [
                {text: 'Hi', onclick: function() {editor.insertContent('Hello I am <B>Mark</b>');}},
                {text: 'Insert text item 2', onclick: function() {editor.insertContent('It is a beautiful day');}}
            ]
        });
    }
});
</script>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>

コーディングしないでドロップダウン付きのカスタムボタンをすばやく追加したい場合は、この スニペットプラグイン （electricg/tinymce-snippet-plugin）が便利です。

興味があれば、プラグインの中を見て高レベルのシステムを作ることもできます。

2
a4jp.com

これを試して ：

このコードをfunctions.phpファイルに追加してください。

add_action( 'init', 'droid_buttons' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( 'mce_buttons', 'droid_register_buttons' );
}

function droid_add_buttons( $plugin_array ) {
    $plugin_array['droid'] = get_template_directory_uri() . '/text-button.js';
    echo get_template_directory_uri();
    return $plugin_array;
}

function droid_register_buttons( $buttons ) {
    array_Push( $buttons, 'droid_title'); // droid_title
    return $buttons;
}

.jsファイルを作成し、以下のコードでjsファイルのパス/場所を置き換えます。

    (function() {
    tinymce.create('tinymce.plugins.Droid', {
    init : function(ed, url) {
    ed.addButton('droid_title', {
    title : 'Droid Title',
    cmd : 'droid_title',
    image : ''
    });

    ed.addCommand('droid_title', function() {
    var selected_text = ed.selection.getContent();
    var return_text = "";
    return_text = '<span class="droid_title">Hello I\'m <B>Mark</b>!</span>'; 
    ed.execCommand('mceInsertContent', 0, return_text);
    });

    },

    });

    // Register plugin
    tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid );
})();
0
Bindiya Patoliya