首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何添加ajax保存按钮,并将gif加载到CKeditor 4.2.1。[工作样例插件]

如何添加ajax保存按钮,并将gif加载到CKeditor 4.2.1。[工作样例插件]
EN

Stack Overflow用户
提问于 2013-09-23 09:48:27
回答 1查看 8.7K关注 0票数 5

我张贴这是因为这可能有助于那些不知道如何在正常和内联编辑模式下向ckeditor显示保存图标的人。我在寻找一个简单的保存插件,但找不到一个与ckeditor 4.2.1一起工作的插件。我决定自己做。在我的回答中,您可以找到插件的代码以及google驱动器下载链接。此下载包含保存图标和加载gif图标。

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-09-23 09:48:27

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

这个插件使用jquery,但是您可以使用纯javascript轻松地重写它!在包含ckeditor之前,一定要将jquery包含到页面中。

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

代码语言:javascript
运行
复制
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驱动器下载链接),并解压您的ckeditors插件文件夹中的zip文件。(下载包含下面的脚本和使用过的图标)

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

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

plugin.js

代码语言:javascript
运行
复制
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'
        });


    }
});
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18956257

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档