Eu uso o CKEditor num gerador CRUD que eu desenvolvi em PHP, para gerar o painel de controle do site automaticamente através da modelagem do banco de dados. Ontem um cliente pediu um botão no CKEditor para salvar o texto sem dar refresh na página. Não encontrei nada pronto na Internet e resolvi desenvolver este plugin, o Ajax Save. O plugin adiciona um botão similar ao botão Salvar já existente no CKEditor, porém envia os dados via AJAX, ao contrário do primeiro, que somente submete o formulário onde o editor está contido. Let's work!
Baixe o CKEditor e extraia numa pasta de sua preferência.
Baixe o jQuery.
Dentro da pasta "plugins" do CKEditor crie uma pasta chamada "ajaxsave". Dentro da pasta "ajaxsave", crie um arquivo chamado "plugin.js", com o seguinte conteúdo:
(function(){
var saveCmd ={
modes : { wysiwyg:1, source:1 },
exec : function( editor ){
var $form = editor.element.$.form;
if ( $form ){
try{
editor.updateElement();
content = editor.getData();
jQuery.ajax({
type: "POST",
url: "ckeditor/plugins/ajaxsave/save.php",
data: "texto=" + content,
success: function(msg){
alert( "Dados recebidos: " + msg );
}
});
}
catch ( e ) {
//alert(e);
}
}
}
}
var pluginName = 'ajaxsave';
CKEDITOR.plugins.add( pluginName,{
init : function( editor ){
var command = editor.addCommand( pluginName, saveCmd );
command.modes = { wysiwyg : !!( editor.element.$.form ) };
editor.ui.addButton( 'AjaxSave',{
label : editor.lang.save,
command : pluginName,
icon: "plugins/ajaxsave/ajaxsave.png"
});
}
});
})();
Dentro desta mesma pasta ficará a página PHP que receberá os dados. Então, crie um arquivo chamado "save.php", com o seguinte conteúdo:
echo $_POST['texto'];
Nesta mesma pasta deve ter a imagem que será usada no botão. Eu coloquei essa aqui: 
. O nome dela deve ser "ajaxsave.png".
O plugin já está instalado. Agora vamos configurar o CKEditor para utilizar o plugin. Na pasta raíz do CKEditor existe um arquivo chamado "config.js". Este arquivo é utilizado para definir as configurações globais do CKEditor. O conteúdo do meu está assim:
CKEDITOR.editorConfig = function( config ){
config.extraPlugins = "ajaxsave";
config.toolbar = [
['AjaxSave', 'Preview'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['Font','FontSize'],
['TextColor','BGColor', '-', 'Source']
];
};
Agora é só testar. Crie um arquivo chamado "index.html" dentro da pasta do CKEditor com o seguinte conteúdo:
<body>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"><script>
</head>
<body>
<form method="post">
<textarea name="editor"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</form>
</body>
</html>
Nesta página tem um demo da solução.
Abra o index.html, digite alguma coisa no editor e clique no botão do canto esquerdo superior. Um alerta deverá ser mostrado, com o conteúdo enviado via AJAX.
Download dos arquivos
CKEditor, com jQuery 1.4.2 e plugin já integrado
Abraço e até a próxima!
Ae Jonas, ficou legal o plugin :) Poderia fazer um post ensinando como configurar o upload de arquivos com o novo CKeditor, seria interessante pra muita gente. Abraço.
Que bom que gostou, Ítalo. Se sobrar um tempinho amanhã sai o post, pode deixar. Abraço
plugin que ajuda bastante, vlw pela informação.
Seu eu insiro meu nome assim [b]Tylër[/b] gera um erro e não exibe o "e" com "trema".
Já tentei usar addslashes, utf_decode e encode, mas não vai ~~
Muito bom o plugin, mas eu percebi que ele só salva se o botão for clicado não é ? como fazer para ativá-lo sem precisar clicar como um autosave ?
@João
Você poderia modificar o plugin para usar a função [b]setInterval()[/b] para salvar automaticamente em um dado intervalo de tempo
Muito bom esta dia brigadão por ensinar ajuda muito essas coisas, só que eu percebi se eu escreve na caixa formatação ele só vai retorna formata ele da um problemas com os caracteres especiais, ja tentei usar utf8_encode addslashes mais nao rolou
como posso fazer com isto???
Olá muito bom plugin, mas tenho um problema aqui.
Quero fazer um ajax e nesse ajax será retornado um select no dialog é possível? A maior dificuldade está no retorno do ajax pois preciso colocar o retorno parecido com
elements :
[
{
id : 'width',
type : 'text',
label : 'Largura',
width : '40'
},
]
So que no caso retornando dois selects...
Abraço