Skip Loading

[CKEditor] Menggunakan Plugin Save

Apabila anda menggunakan CKEditor, maka secara default akan ada add-on "Save".  Bila menggunakan toolbar standard, maka akan ada icon dengan gambar disk. Mengaju pada dokumentasi CKEditor, maka add-on save ini hanya akan bekerja pada editor yang ada didalam tag <form>. Menurut dokumentasi tersebut, bila anda mengklik tombol save pada toolbar, maka CKEdtor akan melakukan submit form.

Namun bagaimana bila kita memerlukan pengecekan terlebih dahulu sebelum malakukan submit form? Misalnya kita perlu mengecek apakah edtor tidak kosong, atau ada field-field lain yang tidak boleh kosong. Untuk CKEditor versi 4, caranya adalah sebagai berikut:

Kita harus memasukkan fungsi callback on save pada config CKEditor, misalnya kita menggunakan variabel ckconfig:

var ckconfig = {
    pasteFromWordRemoveStyles: true,
    pasteFromWordRemoveFontStyles: true,
    pasteFromWordNumberedHeadingToList: true,
    removePlugins: 'about,print,lang,flash,a11yhelp',
    height: '300px',
    entities: false,
    autoGrow_maxHeight: '300px',
    allowedContent: true,
    on: {
        save: function (evt)
        {
            // tulis kode untuk save di sini, misalnya :
            var content = CKEDITOR.instances.content.getData();
            if  (content!=""){
                        //kode untuk post dengan ajax
                       $.ajax({
                            type: "POST",
                           url: $("#form).attr("action"),
                          data: $("#form).serialize(),
                          dataType: "json",
                          success: function (response) {
                                   alert("sukses")
                           }
                       });
            }
            return false; // penting! agar form tidak di submit..
        }
    }
}

 CKEDITOR.replace('content', ckconfig);

Html

<form id="form" name="form" method="post" "action=""htt://www.yourdomain.com/post.php">
<input type="text" name="title" id="title"/><br/>     
<textarea id="content" name="content"></textarea>
</form>

Dengan kode diatas kita dapat membuat add-on save CKEditor menjadi lebih powefull. Selamat mencoba...

www.paulussetyo.com

Related Posts
Comments ( 0 )
Add Comment

Your email address will not be published. Required fields are marked *