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 w-100"
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! Please check the console!
"_ajax/demo.summernote.php" script only return
an image from Smarty demo folder. Your backend
should return the real uploaded file.
Is up to your backend framework how uploads are
handled and what security rules are applied!
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-->
<textarea class="summernote-editor w-100"
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>