Summernote is a JavaScript library that helps you create WYSIWYG editors online.
/*
:: Vendor Path
node_modules/summernote/
:: Installed
npm install summernote
:: SOW Controller Init
*/ $.SOW.vendor.summernoteeditor.init('.summernote-editor');
<!--
Note: if data-lang is changed, also the javascript
file need to be loaded. You can include the language
file from gulp.config__vendors.js and add here!
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
To upload the image, add your server-side script path:
data-ajax-url="upload.php"
data-ajax-params="['action','upload']['param2','value2']"
The upload script should return a valid image full URL
like this: https://www.mydomain.com/upload/image.jpg
data-ajax-params are optional and used as identifiers by your backend.
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-->
<textarea class="summernote-editor"
data-placeholder="Type yout text here..."
data-min-height="300"
data-max-height="1000"
data-focus="true"
data-lang="en-US"
data-toolbar='[
["style", ["style"]],
["font", ["bold", "italic", "underline", "clear"]],
["fontname", ["fontname"]],
["color", ["color"]],
["para", ["ul", "ol", "paragraph"]],
["height", ["height"]],
["table", ["table"]],
["insert", ["link", "picture", "hr"]],
["view", ["fullscreen", "codeview"]],
["help", ["help"]]
]'></textarea>
<!--
Note: THIS IS AN UPLOAD TEST! Check your console!
The backend script only return the received data
to see in your console how its working!
Is up to your backend framework how uploads are
handled and what security rules are applied!
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-->
<textarea class="summernote-editor"
data-placeholder="Type yout text here..."
data-min-height="300"
data-max-height="1000"
data-ajax-url="_ajax/demo.summernote.php"
data-ajax-params="['action','upload']['param2','value2']"
data-toolbar='[
["insert", ["picture"]]
]'
></textarea>