jquery - 如何向 CKeditor 4.2.1 添加带有加载 gif 的 ajax 保存按钮。 [工作示例插件]

Question

我发布此内容是因为这对于那些不知道如何在正常和内联编辑模式下向 ckeditor 显示保存图标的人可能会有所帮助。我正在寻找一个简单的保存插件，但找不到与 ckeditor 4.2.1 一起使用的插件。我决定自己做。在我的回答中，您将找到该插件的代码以及谷歌驱动器下载链接。此下载包含保存图标以及加载 gif 图标。

该插件将在工具栏上添加一个保存按钮。单击此按钮将向服务器发起异步 POST 请求。在请求期间，保存按钮将显示一个动画 ajax 加载程序。

Answer 1

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

这个插件使用jquery，但你可以轻松地使用纯javascript重写它!确保在包含 ckeditor 之前将 jquery 包含到页面中

首先在 config.js 文件中注册插件(只需在 config.js 文件末尾添加这些行即可)

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

现在我们准备将插件添加到 ckeditor 中。下载插件(请参阅上面的 Google Drive 下载链接)并将 zip 文件解压到您的 ckeditors 插件文件夹中。(下载内容包含以下脚本以及使用的图标)

就是这样。该插件现在应该可以工作了!

For reference I included the source (plugin.js) at the bottom of this answer. I suggest you read the comments if you don't know what's going on. The comments in the code from this answer differs slightly from the comments in the actual plugin file. Most up to date comments can be found here. The business logic is exactly the same.

插件.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'
        });


    }
});