6

CKEditor ツールバーの [保存] ボタンを使用して AJAX 経由で保存するように CKEditor を設定する方法の例を教えてください。

CKEditor AJAX 保存ページの作成に興味がありますが、サイトに例がありません。

ありがとう！

4

10 に答える 10

8

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以降、 cancel()メソッドで保存イベントを使用できます。

CKEDITOR.instances[id].on('save', function (event) {
    event.cancel();
    $(form).submit();
});
于 2012-03-15T23:56:09.870 に答える
5

_source/plugins/save/plugin.js から直接コピーして、必要に応じて変更してみてください。/path/to/ckeditor/plugins に新しいプラグインを作成します (つまり、/path/to/ckeditor/_source/plugins にはありません)。たとえば、/path/to/ckeditor/plugins に新しいディレクトリ "AjaxSave" を作成し、そのディレクトリにファイル "plugin.js" を作成します。次に、そのファイルで次のようなことを行います（ソースフォルダーの通常の「保存」プラグインから適応）：

(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"; も追加する必要があります。構成に。

于 2010-01-10T16:14:55.243 に答える
4

これは私が使用する方法で、プラグインは必要ありません。

シンプルで信頼性が高く、保存ボタンに組み込まれている CKEditors を使用します。

非表示の送信ボタン (display:none) を CKEditor と同じフォームに追加し、その ID と名前を「submit」に設定すると、入力の onclick とフォームの onsubmit の両方が、CKEditor の標準の保存ボタンが押されたときに実行されます。クリックしました。イベント ハンドラーをインラインまたは jquery.bind() またはその他の方法で接続できます。次に、フォームの onsubmit イベントにアタッチされた関数を追加して、フォームをシリアル化し、フォームの 'action' 属性に設定された URL に ajax で投稿します。フォームが投稿されないようにするには、イベント ハンドラーから「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() 関数を呼び出すため、機能します (すべてのブラウザーの標準動作)。これは「送信」ボタンであるため、フォームの「onsubmit」イベントが発生します。これは通常、form.submit() を直接呼び出した場合には発生しません。そのため、プラグインや CKEditor API を使用せずに、保存イベントの信頼性の高い疎結合インターセプトを取得できます。ajax 保存以外にも使用できます。必要な事前保存処理に最適です。

于 2013-02-09T05:45:04.253 に答える
3

すでに多くの回答がありますが、私のソリューションはこれまでのすべてよりも簡単でクリーンだと思います。これにより、既存の保存ボタンの機能が、ckeditor 4 で指定した JavaScript で上書きされます。

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>
于 2013-11-08T21:27:56.573 に答える
3

最も単純な ajax 保存プラグインをここに投稿 しました jquery 1.4.x を使用した CKEDITOR 3.x 用の Ajax 保存プラグイン

于 2010-06-26T13:48:36.720 に答える
1

追記: 独自のアイコンを作成したくない場合は、

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

に

{ 
            label : editor.lang.save, 
            command : pluginName, 
            className: 'cke_button_save'
         });
于 2012-01-12T05:45:37.227 に答える
0

要素の周りに 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>
于 2016-05-18T10:22:37.480 に答える
0

jQuery から AJAX を使用した、もう 1 つのソリューション バリエーション。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);
于 2013-02-17T14:22:28.010 に答える