it-swarm.com.de

Wie füge ich der tinyMCE-Symbolleiste eine benutzerdefinierte Schaltfläche hinzu?

Ich möchte der tinyMCE-Symbolleiste im Bildschirm "Neuen Beitrag hinzufügen" eine benutzerdefinierte Schaltfläche hinzufügen, die beim Klicken Text in den neuen Beitrag einfügt.

Ich habe versucht, diesen Code zu verwenden (von http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php ):

wp_admin_css('thickbox');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('post');
wp_print_scripts('editor');
add_thickbox();
wp_print_scripts('media-upload');
setup : function(ed)
{
    // Add a custom button
    ed.addButton('mybutton', 
    {
        title : 'My button',
        image : 'img/example.gif',
        onclick : function() 
        {
        // Add you own code to execute something on click
        ed.focus();
        ed.selection.setContent('Hello world!');
        }
    });
}

aber es kann nicht kompiliert werden. Es ist ein Fehler in der Zeile mit ' setup: function (ed) '

Schlägt dies fehl, weil ich auf tinyMCE.js verweisen muss? Ich konnte diese Datei unter meiner WordPress-Installation auf dem Server nicht finden.

gibt es eine bessere Möglichkeit, die Schaltfläche zu erstellen?

2
Techboy

Ich glaube, Ihr Problem sind die Zeilen, die den Warteschlangen und Druckskripten folgen. Sie mischen Javascript mit PHP.

Javascript wird in den HTML-Abschnitt einer PHP -Datei oder in eine Echo-Anweisung eingefügt.

Diese Seite des Codex gibt ein Beispiel für das Hinzufügen einer Schaltfläche zu TinyMCE in WordPress.

Der Codex-Eintrag ist jedoch möglicherweise etwas veraltet, sodass bei Problemen mit dem Code hier einige alternative Codebeispiele aufgeführt sind, anhand derer gearbeitet werden kann.

http://brettterpstra.com/adding-a-tinymce-button/
https://stackoverflow.com/questions/4413470/wie-zu-addieren-a-mailzu-knopf-zu-inymce

RE: Code Probleme

In einer PHP -Datei bewegt sich HTML wie folgt zwischen den End- und Startblöcken PHP.

?>

<div>example</div>

<?php

Oder alternativ in einer Echo-Anweisung.

echo '<div>example</div>';

Javascript sollte auf die gleiche Weise wie HTML behandelt werden, daher sollte der obige Code (der JS-Teil) entweder so aussehen.

?>
<script type="text/javascript">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
<?php

Oder..

echo "
<script type=\"text/javascript\">
setup : function(ed)
{
     // Add a custom button
     ed.addButton('mybutton', 
     {
          title : 'My button',
          image : 'img/example.gif',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent('Hello world!');
     }
});
</script>
";

Ersteres ist meiner Meinung nach der einfachere Ansatz.

Ich hoffe, das beantwortet Ihre Frage und wenn Sie Hilfe beim Verstehen von etwas brauchen, lassen Sie es mich wissen.

5
t31os

Dies hier ist der Code, den ich im Swift-Theme verwende:

(function() {
    tinymce.create('tinymce.plugins.tinyplugin', {

        init : function(ed, url){
            ed.addButton('note', {
            title : 'Insert a note',
                onclick : function() {
            var sel = ed.selection.getContent();
                    ed.execCommand(
                    'mceInsertContent',
                    false,
                    Swift_notice(sel)
                    );
                },
                image: url + "/note.png"
            });
}

function Swift_notice(seldata) {
    return '<p class="note"><span class="bg"> </span>'+ seldata + '</p>';
}
2
Satish Gandham