Freitag, April 10, 2020

So fügen Sie ein ajax-button speichern mit laden von gif zu CKeditor 4.2.1. [Funktionierende Beispiel-Plugin]

Ich bin dieses posting, weil dies hilfreich sein kann für Leute, die nicht wissen, wie die Anzeige ein Symbol „speichern“ auf ckeditor in normal-und inline-editing-Modus. Ich war auf der Suche für ein einfaches speichern plugin, aber konnte Sie nicht finden, eine, die arbeitete mit ckeditor 4.2.1. Ich entschied mich zu meinem eigenen zu machen. In meiner Antwort findest du den code für das plugin sowie eine google drive-download-link. Dieser download enthält das Symbol speichern sowie das laden von gif-Symbol.

Das Plug-in hinzufügen Schaltfläche speichern auf der Symbolleiste. Ein Klick auf diese Schaltfläche wird das Feuer eines asynchronen post-Requests an den server. Während der Anfrage auf die Schaltfläche speichern zeigt ein animierter ajax loader.

1 Kommentar

  1. 11

    Download arbeiten-plugin:
    https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1

    Dieses plugin jquery verwendet, aber Sie könnte leicht umschreiben, dass es mit reinem javascript! Werden Sie sicher, dass Sie jquery in Ihre Seiten vor, einschließlich ckeditor

    ersten registrieren des plugins im config.js Datei (nur fügen Sie diese Zeilen am Ende Ihrer config.js Datei)

    config.extraPlugins = 'savebtn';//savebtn is the plugin's name
    config.saveSubmitURL = 'http://server/link/to/post/';//link to serverside script to handle the post

    Jetzt sind wir bereit, fügen Sie das plugin ckeditor. Downloaden Sie das plugin (siehe google drive-download-link oben) und entpacken Sie die zip-Datei in Ihrem ckeditors plugin-Ordner. (der download enthält die Skripte weiter unten zusammen mit der verwendeten Symbole)

    Das ist es. Das plugin sollte nun funktionieren!

    Referenz der Quelle (plugin.js) an der Unterseite der diese
    Antwort. Ich schlage vor, Sie Lesen Sie die Kommentare, wenn Sie nicht wissen, was Los ist. Die Kommentare in den code von dieser Antwort unterscheidet sich etwas von den Kommentaren in der aktuellen plugin-Datei. Aktuellste Kommentare können hier gefunden werden. Die business Logik ist genau die gleiche.

    plugin.js

    CKEDITOR.plugins.add( 'savebtn', {
        icons: 'savebtn',
        init: function( editor ) {
            //add a new command to the editor. 
            //We give the command a name 'savecontent', 
            //so we can  reference it later. 
            editor.addCommand( 'savecontent', {
                //this is the business logic of our 'savecontent' command. 
                //this function gets executed when clicking the button.
                //you can change/replace the logic of this function  
                //according to your own needs.
                exec : function(editor){
    
                    //get the text from ckeditor you want to save
                    var data = editor.getData();
    
                    //get the current url (optional)
                    var page = document.URL;
    
                    //path to the ajaxloader gif
                    loading_icon=CKEDITOR.basePath+'plugins/savebtn/icons/loader.gif';
    
                    //css style for setting the standard save icon. 
                    //We need this when the request is completed.
                    normal_icon=$('.cke_button__savebtn_icon').css('background-image');
    
                    //replace the standard save icon with the ajaxloader icon. 
                    //We do this with css.
                    $('.cke_button__savebtn_icon').css("background-image", "url("+loading_icon+")");
    
                    //Now we are ready to post to the server...
                    $.ajax({
                        url: editor.config.saveSubmitURL,//the url to post at... configured in config.js
                        type: 'POST', 
                        data: {text: data, id: editor.name, page: page},//editor.name contains the id of the current editable html tag
                    })
                    .done(function(response) {
                        console.log("success");
                        alert('id: '+editor.name+' \nurl: '+page+' \ntext: '+data);
    
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                        //set the button icon back to the original
                        $('.cke_button__savebtn_icon').css("background-image", normal_icon);
                    });
    
    
                } 
        });
    
    
    //add the save button to the toolbar. Mind that we declare command: 'savecontent'. 
    //This way ckeditor knows what to do when clicking the button.
    
            editor.ui.addButton( 'savebtn', {
                label: 'Save',
                command: 'savecontent'
               //toolbar: 'insert'
            });
    
    
        }
    });
    • Das ist sehr schön und ist eigentlich ein nettes workaround für eine ähnliche Frage hatte ich auch. Sie haben einen Fehler obwohl. Weil Ihre ursprüngliche Symbol genommen wird, als einfach die aktuelle das Symbol auf der Taste, das bedeutet, dass durch klicken auf die Taste zweimal in schneller Folge dauert das laden-Symbol, wie das reguläre Symbol, damit die Wiederherstellung der es um das laden-Symbol auf fertig stellen. Das Ergebnis wird sein, dass die Rettung gelungen, aber es wird sich zeigen, laden ewig. Wenn Sie bereits wissen, den Pfad der original-icon, denn du bist derjenige, der es definiert, warum gehst du nicht einfach wiederherstellen, in der strikt festgelegten original-icon?

Kostenlose Online-Tests