GrapeJs – Post tanpa setting remote

Kalau anda masih menggunakan TinyMCE atau CKEditor, bolehlah jenguk-jenguk GrapeJs. Kelebihan GrapeJs adalah, drag & drop. Jadi mudah untuk buat layout. Terutamanya jika anda ingin membuat newsletter template.

Satu sahaja kekurangan GrapeJs yang menyesakkan hidup saya, iaitu ia menggunakan canvas. Tidak seperti TinyMCE atau CKEditor yang boleh diumpukkan kepada textarea. Dengan sedikit pengetahuan mengenai JavaScript, perkara ini boleh diatasi.

Bagaimana mahu “load” GrapeJs? Untuk tulisan kali ini, saya ingin menunjukkan penggunaan plugin Newsletter untuk GrapeJS. Jadi kita perlu load dua perkara untuk stylesheet, grape.min.css dan juga grapejs-preset-newsletter.css.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.16.22/css/grapes.min.css ">  
<link href="https://unpkg.com/grapesjs-preset-newsletter@0.2.20/dist/grapesjs-preset-newsletter.css" rel="stylesheet">

Ini pula merupakan form saya.

<form method="post" accept-charset="utf-8" id="formTemplate" role="form" action="">            
   <fieldset>
     <legend>Add Template</legend>
     <label>Tajuk</label>
     <input type="text" name="tajuk" id="tajuk"/>
     <input type="hidden" name="content" id="html"/>
     <input type="hidden" name="stylesheet" id="css"/>               
     <div id="gjs" style="height:0px; overflow:hidden"></div>
   </fieldset>
   <button id="btnSubmit" type="submit" class="btn btn-secondary">Submit</button>            
</form>

Sekarang kita tambah pula bahagian javascriptnya. Pastikan kita load library ini di hujung html kita.

<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.16.22/grapes.min.js"></script>
<script src="https://unpkg.com/grapesjs-preset-newsletter@0.2.20/dist/grapesjs-preset-newsletter.min.js"></script>
<script type="text/javascript">
    var geditor = grapesjs.init({
        container : '#gjs',
        noticeOnUnload: false,
        storageManager: false,
        plugins: ['gjs-preset-newsletter'],
        pluginsOpts: {
            'gjs-preset-newsletter': {
              modalTitleImport: 'Import template',
              
            }
        }
    });
</script>

Ini sudah memadai sekiranya anda sekadar mahu buat template kemudian copy and paste source html yang dijanakan oleh GrapeJs. Tapi tidak cukup sekiranya anda ingin menyimpannya kedalam pangkalan data. Untuk kes saya, saya mahu juga simpan tajuk ke dalam pangkalan data.

Oleh itu saya tambah kod Jquery bagi mengumpukkan nilai kedalam hidden field sebaik sahaja butang submit ditekan. Rerkara pertama kita perlu load library Jquery. Jadi script kita akan kelihatan sebegini.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.16.22/grapes.min.js"></script>
<script src="https://unpkg.com/grapesjs-preset-newsletter@0.2.20/dist/grapesjs-preset-newsletter.min.js"></script>
<script type="text/javascript">
    var geditor = grapesjs.init({
        container : '#gjs',
        noticeOnUnload: false,
        storageManager: false,
        plugins: ['gjs-preset-newsletter'],
        pluginsOpts: {
            'gjs-preset-newsletter': {
              modalTitleImport: 'Import template',
              
            }
        }
    });
</script>

Langkah seterusnya, kita perlu dapatkan kod yang dijana oleh GrapeJs. Ada 2 fungsi yang kita perlu gunakan. Gunakan getHtml() bagi mendapatkan kod html dan getCss() bagi mendapatkan stylesheet yang dijana. Kemudian kita akan umpukkan nilai-nilai yang diperolehi ke dalam hidden field content dan stylesheet.

$("#formTemplate").submit( function(e) {
    const html = geditor.getHtml();
    const css = geditor.getCss();
       
    $("#html").val(html);
    $("#css").val(css);
  
});

Sepatutnya script kita akan kelihatan sebegini.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.16.22/grapes.min.js"></script>
<script src="https://unpkg.com/grapesjs-preset-newsletter@0.2.20/dist/grapesjs-preset-newsletter.min.js"></script>
<script type="text/javascript">
    var geditor = grapesjs.init({
        container : '#gjs',
        noticeOnUnload: false,
        storageManager: false,
        plugins: ['gjs-preset-newsletter'],
        pluginsOpts: {
            'gjs-preset-newsletter': {
              modalTitleImport: 'Import template',
              
            }
        }
    });
    $("#formTemplate").submit( function(e) {
        const html = geditor.getHtml();
        const css = geditor.getCss();
       
        $("#html").val(html);
        $("#css").val(css);
  
    });
</script>

Selamat mencuba!