如何使用加载GIF添加AJAX保存按钮CKEDITOR 4.2.1。 [工作样本插件] [英] How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
问题描述
我张贴这一点，因为这可能是人谁不知道如何显示一个图标，保存在正常和内嵌编辑模式CKEDITOR有帮助的。我正在寻找一个简单的保存插件，但无法找到一个正在用的CKEditor 4.2.1。我决定把我自己的。在我的答案，你会发现code的插件，以及谷歌的驱动下载链接。该下载内容包含保存图标，以及装载GIF图标。
该插件将添加一个保存按钮工具栏。点击这个按钮会触发一个异步POST请求到服务器。在请求的保存按钮，将显示一个动画的AJAX加载程序。
下载工作插件： <一href="https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1">https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1
此插件使用jQuery的，但你可以使用纯JavaScript很容易把它改写！请确保包括之前的CKEditor包括jQuery的到您的网页的
首先注册插件在config.js文件（就在你的config.js文件的末尾添加这些行）
config.extraPlugins ='savebtn'; // savebtn是插件的名字
config.saveSubmitURL =HTTP：//服务器/连接/到/后/'; //链接到服务器端脚本来处理后
现在，我们已经准备好了插件添加到CKEditor的。下载插件（见上谷歌驱动下载链接），并提取您ckeditors插件文件夹中的zip文件。（下载包含下面的脚本一起使用的图标）
就是这样。该插件现在应该努力！
有关引用我包含在源（plugin.js）在这个底部 回答。我建议你阅读的意见，如果你不知道发生了什么事情。从这个答案的code的意见，从实际插件文件的意见略有不同。大多数最新的意见可以在这里找到。业务逻辑是完全一样的。
plugin.js
CKEDITOR.plugins.add（savebtn'，{
图标：savebtn，
初始化：函数（编辑）{
//添加一个新的命令编辑器。
//我们给命令的名称savecontent，
//所以我们可以在以后引用它。
editor.addCommand（'savecontent'，{
//这是我们的'savecontent'命令的业务逻辑。
//这个函数获取点击按钮时执行。
//你可以改变/替换该功能的逻辑
//根据你自己的需要。
EXEC：函数（编辑）{
//得到ckeditor的，你要保存的文本
VAR数据= editor.getData（）;
//获取当前URL（可选）
VAR页= document.URL;
//路径ajaxloader的gif
loading_icon = CKEDITOR.basePath +'插件/ savebtn /图标/ loader.gif;
//设置标准的保存图标css样式。
//我们需要这个请求时完成。
normal_icon = $（'。cke_button__savebtn_icon），CSS（背景图片）。
//与ajaxloader图标替换标准的保存图标。
//我们这样做是利用CSS。
$（'。cke_button__savebtn_icon）的CSS（背景图片，URL（+ loading_icon +））。
//现在我们已经准备好发布到服务器...
$阿贾克斯（{
网址：editor.config.saveSubmitURL，//网址张贴在...配置config.js
键入：POST，
数据：{正文：数据，ID：editor.name，页：页} // editor.name包含当前可编辑HTML标签的ID
}）
.done（函数（响应）{
的console.log（成功）;
警报（'ID：'+ editor.name +\ nurl：'+网页+\ NTEXT：'+数据）;
}）
.fail（函数（）{
的console.log（错误）;
}）
。总是（函数（）{
的console.log（完成）;
//设置按钮图标回到原始
$（'。cke_button__savebtn_icon）的CSS（背景图片，normal_icon）。
}）;
}
}）;
//添加保存按钮工具栏。注意，我们宣布命令：savecontent。
//这样的CKEditor知道点击按钮时该怎么办。
editor.ui.addButton（'savebtn'，{
标签：保存，
命令：savecontent
//工具栏：插入
}）;
}
}）;
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.
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.
Download working plugin: https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1
This plugin uses jquery but you could easily rewrite it using pure javascript! Be sure you included jquery to your pages before including ckeditor
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
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!
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.
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'
});
}
});
这篇关于如何使用加载GIF添加AJAX保存按钮CKEDITOR 4.2.1。 [工作样本插件]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
