CKEditor, AJAX Сохранить - PullRequest
       23

CKEditor, AJAX Сохранить

6 голосов
/ 24 декабря 2009

Можете ли вы привести пример настройки CKEditor для сохранения с помощью AJAX с помощью кнопки Сохранить на панели инструментов CKEditor?

Я заинтересован в создании страницы сохранения CKEditor AJAX, но не вижу примеров на их сайте.

Спасибо!

Ответы [ 10 ]

5 голосов
/ 16 марта 2012

Вы можете использовать beforeCommandExec событие & cancel () метод:

<script type="text/javascript">
$(document).ready(function () {

    $('.ckeditoriz').ckeditor(/* config */);

    $('.ckeditoriz').each(function () {
        var id = $(this).attr('id'),
            form = this.form;

        CKEDITOR.instances[id].on('beforeCommandExec', function (event) {
            if (event.data.name === 'save') {
                event.cancel();
                $(form).submit();
            }
        });

    });

    $('.ajaxForm').submit(function (event) {
        event.preventDefault();
        var $this = $(this);
        $.ajax({
            type: $this.attr('method'),
            url: $this.attr('action'),
            data: $this.serialize()
        });
    });

});
</script>

<form action="url" method="post" class="ajaxForm">
  <!-- Your textarea must have an ID! -->
  <textarea id="textarea1" name="textarea1" class="ckeditoriz"></textarea>
</form>

Обновление:

Это не работает в версиях CKEditor 4.0 , 4.1 , 4.2 , однако снова работает с версии 4.3 .

Начиная с версии CKEditor 4.2 вы можете использовать событие save с методом cancel () :

CKEDITOR.instances[id].on('save', function (event) {
    event.cancel();
    $(form).submit();
});
5 голосов
/ 10 января 2010

Попробуйте скопировать прямо из _source / plugins / save / plugin.js и при необходимости изменить. Создайте свой новый плагин в / path / to / ckeditor / plugins (т.е. не в / path / to / ckeditor / _source / plugins). Например, в / path / to / ckeditor / plugins создайте новый каталог «AjaxSave», затем в этом каталоге создайте файл «plugin.js». Затем в этом файле сделайте что-то вроде этого (адаптировано из обычного плагина «save» в исходной папке):

(function()
{
  var saveCmd =
  {
    modes : { wysiwyg:1, source:1 },
    exec : function( editor )
    {
      var $form = editor.element.$.form;
      if ( $form )
      {
          try
          {
            editor.updateElement();
//Here is where you put your ajax submit function. For example... if you are using
// jQuery and the ajaxform plugin, do something like this:
            $($form).ajaxSubmit({
               success: function(response){
                 //do something with the response
               }
            });
          } 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: "/img/save.png"
         });
     }
   });
})();

Затем в конфигурации, где вы определяете свою панель инструментов, измените «AjaxSave» на «Сохранить».

РЕДАКТИРОВАТЬ: вы также должны добавить config.extraPlugins = "ajaxsave"; в конфиг.

4 голосов
/ 09 февраля 2013

Это метод, который я использую, плагины не требуются:

Это просто и надежно и использует встроенную кнопку сохранения CKEditors.

Добавьте невидимую кнопку отправки (display: none) в ту же форму, где находится CKEditor, и установите для ее идентификатора и имени значение «submit», тогда как onclick входа, так и onsubmit формы будут выполнены, когда стандарт CKEditor нажата кнопка сохранения. вы можете подключить ваши обработчики событий встроенными или с помощью jquery.bind () или любым другим способом. Затем добавьте функцию, прикрепленную к событию onsubmit формы, чтобы сериализовать форму и отправьте ее по адресу, указанному в атрибуте action. Просто верните False из обработчика событий, чтобы убедиться, что форма не публикуется. Теперь любой код или кнопка (включая кнопку сохранения ckeditor), которая отправляет форму, запустит ваш обработчик. Никаких плагинов CKeditor или конфигурации CKeditor не требуется. Вот упрощенный пример (предполагает JQuery).

<form id="myform" name="myform" action="" method="post" onsubmit="alert('form.onsubmit()');return false;">
<input type="submit" id="submit" name="submit" style="display:none" onclick="SaveText(this);"/>
<textarea id="ckeditor1"></textarea>
</form>

<script>
function SaveText (eventargs){
   var form = $(eventargs).closest("form");
   var data = form.serialize();
   var url = form.attr('action');
$.post(url, data);
return false;
}
</script>

Более реалистичный подход может использовать JQuery.Bind (), и скрипт будет во внешнем файле JS и т. Д., Но конечный результат тот же. Это работает, потому что ввод скрывает функцию отправки формы, поэтому любой вызов form.submit () вместо этого вызывает функцию onclick () кнопки отправки (поведение std для всех браузеров). Поскольку это кнопка «submit», она вызывает событие onsubmit формы, которое обычно не происходит, если вы вызываете form.submit () напрямую. Таким образом, вы получаете надежный слабо связанный перехват события сохранения без плагинов или использования CKEditor API. Вы также можете использовать его не только для сохранения AJAX, но и для любой обработки перед сохранением, которую вам нужно сделать.

3 голосов
/ 09 ноября 2013

Множество ответов уже есть, но я думаю, что мое решение намного проще и чище, чем все, что здесь до сих пор. Это просто переопределит функциональность существующей кнопки сохранения с помощью javascript, который вы укажете с помощью ckeditor 4:

HTML:

<textarea id="CKEditor1"></textarea>

JavaScript:

<script>
    // Need to wait for the ckeditor instance to finish initialization
    // because CKEDITOR.instances.editor.commands is an empty object
    // if you try to use it immediately after CKEDITOR.replace('editor');
    CKEDITOR.on('instanceReady', function (ev) {

        // Create a new command with the desired exec function
        var overridecmd = new CKEDITOR.command(editor, {
            exec: function(editor){
                // Replace this with your desired save button code
                alert(editor.document.getBody().getHtml());
            }
        });

        // Replace the old save's exec function with the new one
        ev.editor.commands.save.exec = overridecmd.exec;
    });

    CKEDITOR.replace('CKEditor1');

</script>
3 голосов
/ 26 июня 2010

Я разместил простейший плагин сохранения AJAX здесь Плагин сохранения Ajax для CKEDITOR 3.x с jquery 1.4.x

1 голос
/ 01 августа 2013

Я попробовал метод Корикулума на CKEditor 4, но он публикует форму дважды, поэтому я придумал это:

$(function () {
    setTimeout(function () {
        CKEDITOR.instances.MyEditor.on('beforeCommandExec', function (event) {
            if (event.data.name === 'save') {
                event.cancel();//this does not seem to prevent the form post
                $(MyEditor).val(CKEDITOR.instances.MyEditor.getData());//copy data from the editor to the textarea
                $.ajax({
                    type: $(editorForm).attr('method'),
                    url: $(editorForm).attr('action'),
                    data: $(editorForm).serialize(),
                    success: function (data) {
                        alert(data.message);
                    }
                });
            }
        });
    }, 100);//CKEditor is heavy and needs time to initialize

    editorForm.submit = function (e) {//this is needed to prevent the 2nd post
        return false;
    };
});

MyEditor - идентификатор текстовой области с классом ckeditor

editorForm - это идентификатор формы, которая переносит текстовую область

CKEditor переопределяет функцию form.submit (), когда она инициализируется внутри формы, а event.cancel () не препятствует публикации формы. Поэтому мне пришлось переопределить функцию с помощью функции, которая просто возвращает false.

РЕДАКТИРОВАТЬ: я забыл скопировать недавно отредактированные данные в текстовую область, чтобы они могли быть отправлены вместе с остальной частью формы.

1 голос
/ 12 января 2012

Дополнительное примечание: если вы не хотите создавать свой собственный значок, измените

{ 
            label : editor.lang.save, 
        command : pluginName, 
        icon: "/img/save.png" 
     });

до

{ 
            label : editor.lang.save, 
            command : pluginName, 
            className: 'cke_button_save'
         });
0 голосов
/ 18 мая 2016

Если у вас нет html-формы вокруг элемента, вы можете заметить, что изначально кнопка отключена , это поведение, к сожалению, жестко запрограммировано. Чтобы включить его, вы должны изменить состояние кнопки.

Это мой код:

<script>
    function editor(domElement, callback){
        var editor = CKEDITOR.replace(domElement);
        // save-command currently unavailable because we have no form.
        editor.on('instanceReady',function(){
            // find the save-command
            var command = editor.getCommand('save');
            // set the initail state to enabled/unpressed
            command.setState(CKEDITOR.TRISTATE_OFF);
            // overwrite the exec-command
            command.exec = function (){
                var newHtml = editor.getData();
                callback(newHtml);
                editor.destroy();
            }
        });
    }
</script>
0 голосов
/ 14 мая 2016
 <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>

 <button id="save" onclick="save()"></button>

 <script type="text/javascript">
         function save() {

             var question = CKEDITOR.instances.editor1.getData();
             alert(question);

             $.ajax({
                type: 'POST',
                data: {file: question},
                url: "aiq_save.php?xyz="+question+"",
                success: function (html) {
                    alert('may be saved');
                    $("#show").html(html);
                }
            });
            return false;
 </script> 

 <div id="show"></div>

Создать новую страницу aiq_save.php, затем:

<?php
    ECHO  $_GET['xyz'];

    ECHO $_POST['file'];//post method
?>

И ты это сделал.

0 голосов
/ 17 февраля 2013

Еще один вариант решения с использованием AJAX от jQuery. 1) объявить функцию CKEDITOR.ajaxSAVE; 2) вызвать его для сохранения обновленного HTML-текста.

 CKEDITOR.ajaxSAVE = function ( editor ) {
    editor.updateElement();
    var htm = editor.getData();
    var otherParameter = '...';
    if (htm) $.ajax({
        type: "POST",
        url: "saveHtmFromCKEditor.php",
        data: { content: htm, other: otherParameter }
      }).done(function( msg ) { // string or JSON object
        if (!parseInt(msg)>0) alert( "ERROR WHEN SAVING: " + msg );
      });
    else 
      alert('EMPTY HTM. NOT SAVED');
 };

Затем для звонка в любое время используйте

 var oEditor = parent.main.CKEDITOR.instances['YourTextAreaID'];
 CKEDITOR.ajaxSAVE(oEditor);  
...