it-swarm.com.de

Schaltfläche "Hinzufügen" im TinyMCE-Editor zum Einfügen von Text

Ich suche nach einer Möglichkeit, dem TinyMCE-Editor eine benutzerdefinierte Schaltfläche hinzuzufügen, wenn in den visuellen Editor Text eingefügt wird.

Zum Beispiel: Schaltfläche mit dem Namen "Hi" beim Klicken in den Editor einfügen "Hello I'm <B>Mark</b>!"

Ist es möglich? Und wie?

3
Pepozzo

Füge dies deiner Plugin-Datei oder der functions.php-Datei im Theme-Verzeichnis hinzu

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;
}

Und das ist deine custom-tinymce.js Datei

(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

Wenn Sie eine Schaltfläche von Grund auf neu erstellen möchten, versuchen Sie, diesen Code zu verwenden:

<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>

Dieses Snippet-Plugin (electricg/tinymce-snippet-plugin) kann nützlich sein, wenn Sie nur schnell benutzerdefinierte Schaltflächen mit Dropdowns hinzufügen möchten, ohne so viel zu codieren.

Sie können auch in das Plugin schauen, um ein übergeordnetes System zu erstellen, wenn Sie interessiert sind.

2
a4jp.com

Versuche dies :

Fügen Sie diesen Code zur functions.php-Datei hinzu.

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;
}

Erstelle eine .js Datei und ersetze den Pfad/Speicherort der js Datei in folgendem Code:

    (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