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){
					console.log(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:

<?php
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>

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

Plugin Ajax Save

CKEditor, com jQuery 1.4.2 e plugin já integrado

Abraço e até a próxima!