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');
// :: OPTIONAL ::
// Custom Config (Extending)
// Textarea attribute required:
// data-extend='mySummernote'
// Create a custom config like this
<script>
var mySummernote = {
// my custom config here
};
</script>
<!--
Note: en-US is the default language!
Can be changed from GULP Vendor config file
(gulp.config__vendors.js)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
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: https://www.mydomain.com/upload/image.jpg
data-ajax-params are optional and used as identifiers by your backend.
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
data-summernote-config="..."
contains the defaults and can be removed to simply
load summernote default!
-->
<textarea class="summernote-editor w-100"
data-summernote-config='{
"placeholder": "Type here...",
"focus": false,
"lang": "en-US",
"minHeight": 300,
"maxHeight": 1500,
"styleTags": ["h2","h3","h4","h5","h6"
,{
"title" :"Paragraph",
"tag" :"p",
"value" :"p",
"className" :""
}
,{
"title" :"Paragraph Lead",
"tag" :"p",
"value" :"p",
"className" :"lead"
}
],
"toolbar": [
["style", ["style"]],
["font", ["bold", "italic", "underline", "clear"]],
["fontname", ["fontname"]],
["color", ["color"]],
["para", ["ul", "ol", "paragraph"]],
["height", ["height"]],
["table", ["table"]],
["insert", ["link", "picture", "video", "hr"]],
["view", ["fullscreen", "codeview"]]
],
"disableDragAndDrop": false,
"codeviewFilter": false,
"codeviewIframeFilter": true
}'></textarea>
<!--
:: UPLOAD TEST ONLY ::
Please check the console!
"_ajax/demo.summernote.php" only return an image
from Smarty demo folder.
Your backend should return the real uploaded file.
Is up to your backend framework to handle the uploads.
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -->
<textarea class="summernote-editor w-100"
data-ajax-url="_ajax/demo.summernote.php"
data-ajax-params="['action','upload']['param2','value2']"
data-summernote-config='{
"placeholder": "Type here...",
"minHeight": 300,
"maxHeight": 1000,
"toolbar": [
["insert", ["picture"]]
]
}'></textarea>