Draggable Image with Summernote Text Editor

Introduction

Summernote adalah JavaScript library yang membantu kalian membuat editor WYSIWYG (What You See Is What You Get). Istilah WYSIWYG juga dapat diartikan sebagai kemampuan sebuah aplikasi dalam memberikan output atau keluaran yang sama seperti yang terlihat. Misalnya pada Microsoft Office Word. Apa yang kita ketik dan kita lihat pada layar monitor, baik itu kolom Header, Font, Paragraph, dan lain sebagainya, itulah yang kita dapatkan setelah dicetak dan sama persis seperti yang kita kelola sebelumnya.

Tampilan text editor Summernote 

Kenapa harus Summernote? Summernote memiliki beberapa fitur diantaranya adalah :

• Paste images from clipboard: ini adalah fitur yang menjadi pokok pada pembahasan ini, jadi user dapat memasukan sebuah gambar langsung dari local repository mereka dengan cara drag file local ke lokasi yang diinginkan pada text edit summernote.
• Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all: gambar yang dimasukan ke text editor akan otomatis di-generate / di-konversikan menjadi format base 64 yang nantinya dapat di storing ke DB dan ditampilkan dengan format image.
• Simple UI. berbeda dengan beberapa library text editor. Summernote memiliki tampilan yang sederhana dan mudah dioperasikan seperti halnya Microsoft Word, hanya featurenya ga sebanyak Microsoft Word.
• Interactive WYSIWYG editing: library ini memungkinkan kita membuat tampilan dengan menggunakan code view sepertinya halnya Blog jadi buat developer akan mudah dalam membuat tampilan yang diinginkan. 
• Handy integration with server: librari ini berguna saat diintegrasikan dengan server.
• Supports Bootstrap 3 and 4 integrities: library ini memiliki depedency dengan Bootstrap jadi library ini tidak akan jalan jika kita tidak menggunakan Bootstrap. dan library ini support untuk Bootstrap versi 3 dan 4
• Lots of plugins and connectors provided together: Banyak konektor dan plugin yang disediakan bersama

Installation and dependencies
Summernote memiliki depedency JQuery jadi JQuery yang digunakan harus support Summernote, untuk versi supportnya bisa di check di https://github.com/summernote/summernote/releases

Summernote memiliki beberapa cara untuk instalasinya, Summernote menyediakan CDN seperti dibawah ini :

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>

Summernote juga menyediakan support library untuk Angular JS. Silahkan check link ini https://github.com/summernote/angular-summernote . pada link tersebut terdapat cara untuk instalasi dan penggunaannya. Cara instalasi menggunakan bower dengan command dibawah ini :

$ bower install angular-summernote

Library Summernote pada AngularJS yang bernama angular-summernote memiliki depedency yaitu ui.bootstrap

Untuk Implementasi angular-summernote hanya tinggal memasukan code tersebut dalam list module di app.js seperti code dibawah ini :

angular.module('myApp', ['summernote']);

Setelah berhasil terinstall, hanya tinggal menggunakan directive yang dibuat oleh angular-summernote dengan cara berikut :

<summernote></summernote>

code tersebut diletakan di .html yang diinginkan.

Kita juga dapat setting summernote tersebut dengan menggunakan code berikut :

<summernote config="options"></summernote>

function DemoController($scope) {
  $scope.options = {
    height: 300,
    focus: true,
    airMode: true,
    toolbar: [
            ['edit',['undo','redo']],
            ['headline', ['style']],
            ['style', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
            ['fontface', ['fontname']],
            ['textsize', ['fontsize']],
            ['fontclr', ['color']],
            ['alignment', ['ul', 'ol', 'paragraph', 'lineheight']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link','picture','video','hr']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ]
  };
}

Terimakasih...

References
https://summernote.org/
https://github.com/summernote/summernote
https://github.com/summernote/angular-summernote