如何在 CKeditor 4.2.1 中添加带有加载 gif 的 ajax 保存按钮.[工作示例插件]

How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin](如何在 CKeditor 4.2.1 中添加带有加载 gif 的 ajax 保存按钮.[工作示例插件])

问题描述

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

I'm posting this because this may be helpful for people who do not know how to display a save icon to ckeditor in normal and inline-editing mode. I was searching for a simple save plugin but couldn't find one that was working with ckeditor 4.2.1. I decided to make my own. In my answer you'll find the code for the plugin as well as a google drive download link. This download contains the save icon as well as the loading gif icon.

插件会在工具栏上添加一个保存按钮.单击此按钮将向服务器触发异步发布请求.在请求期间，保存按钮将显示一个动画 ajax 加载器.

The plugin will add a save button to the toolbar. Clicking this button will fire an asynchronous post request to the server. During the request the save button will display an animated ajax loader.

推荐答案

下载工作插件:https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1

此插件使用 jquery，但您可以使用纯 javascript 轻松重写它！确保在包含 ckeditor 之前将 jquery 包含到您的页面中

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

first register the plugin in the config.js file (just add these lines at the end of your config.js file)

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 下载链接)并在您的 ckeditors 插件文件夹中解压缩 zip 文件.(下载包含以下脚本以及使用的图标)

Now we are ready to add the plugin to ckeditor. Download the plugin (see google drive download link above) and extract the zip file in your ckeditors plugin folder. (the download contains the scripts below together with the used icons)

就是这样.该插件现在应该可以工作了！

That's it. The plugin should work now!

作为参考，我在底部包含了源代码(plugin.js)回答.如果您不知道发生了什么，我建议您阅读评论.此答案的代码中的注释与实际插件文件中的注释略有不同.最新的评论可以在这里找到.业务逻辑完全相同.

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+' 
url: '+page+' 
text: '+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'
        });


    }
});

这篇关于如何在 CKeditor 4.2.1 中添加带有加载 gif 的 ajax 保存按钮.[工作示例插件]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！