09:42 7/6/26 JavaScript HTML Editor
menu
Documentation keyboard_arrow_right Javascript html editor
JavaScript HTML Editor
A lightweight WYSIWYG JavaScript HTML editor is available with a few native features.
1. The HTML tags are filtered on the paste action.
2. JavaScript events for easy integration
3. Remote URL parser and snippet integrated object.
4. Custom toolbar
5. Integrated file and image dropzone
6. Extensions
Documentation
Available Methods
Method Description
setData() Set new data to the editor.
getData() Get the current data.
reset() Clear the content of the editor.
destroy() Destroy the editor.
Initialization properties
[Link] 1/9
09:42 7/6/26 JavaScript HTML Editor
Property Description
value: string Initial HTML value
snippet: object Snippet object
toolbar: boolean | object True for the default toolbar, or a items of a customized toolbar.
remoteParser: string A URL for the remote URL/image parser.
parseURL: boolean Parse URL inside the editor to create a snippet.
filterPaste: boolean Filter all content onpaste
dropZone: boolean Allow images or files to be dropped in the editor.
acceptFiles: boolean Accept PDF on the editor.
acceptImages: boolean Accept images on the editor.
dropAsAttachment: boolean When images are dropped, they are included as attachement.
maxFileSize: number Max filesize in bytes.
border: boolean Add borders to the editor.
padding: boolean Add padding to the editor.
maxHeight: number Max height for the editor.
focus: boolean Focus on the content after the data is loaded.
placeholder: string Content placeholder
extensions: object The extensions object.
Available Events
Event Description
When a click happens on the editor.
onclick
(element: HTMLElement, instance: Object, event: Object) => void
When the editor is focused.
onfocus
(element: HTMLElement, instance: Object, currentValue: string) => void
[Link] 2/9
09:42 7/6/26 JavaScript HTML Editor
Event Description
When the editor is blurred.
onblur
(element: HTMLElement, instance: Object, currentValue: string) => void
A method is execute when the modal is closed.
onload
(element: HTMLElement, instance: Object, editor: HTMLElement) => void
When a new key from the keyboard is released.
onkeyup
(element: HTMLElement, instance: Object, event: Object) => void
When a new key from the keyboard is pressed.
onkeydown
(element: HTMLElement, instance: Object, event: Object) => void
Examples
Basic HTML editor
This is a basic example...
undo redo format_bold format_italic format_underline format_list_bulleted format_list_numbered format_indent_increase format_indent_decrease
Get data
[Link] 3/9
09:42 7/6/26 JavaScript HTML Editor
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<link rel="stylesheet" href="[Link]
family=Material+Icons" />
<div id="editor" style="width: 480px;"></div>
<p><input type='button' value='Get data' id="btn"></p>
<script>
let editor = [Link]([Link]('editor'), {
allowToolbar: true,
value: '<b>This is a basic example...</b><br><br><br><br>'
});
[Link]('click', () => {
alert([Link]())
})
</script>
</html>
Image dropping zone
Learn how to enable a dropping zone for images on your javascript HTML editor.
[Link] 4/9
09:42 7/6/26 JavaScript HTML Editor
Drop any image in the rich text below.
undo redo format_bold format_italic format_underline format_list_bulleted format_list_numbered format_indent_increase format_indent_decrease
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<link rel="stylesheet" href="[Link]
family=Material+Icons" />
<p class="small">Drop any image in the rich text below.</p>
<div id="root" style="width: 480px;"></div>
<script>
[Link]([Link]('root'), {
parseURL: true,
// Website parser is to read websites and images from cross domain
remoteParser: '/docs/parser?url=',
// Allow toolbar
allowToolbar:true,
height: 200,
});
</script>
</html>
[Link] 5/9
09:42 7/6/26 JavaScript HTML Editor
Custom Toolbars
This is a basic example...
undo redo Verdana format_size format_align_left
[Link] 6/9
09:42 7/6/26 JavaScript HTML Editor
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<link rel="stylesheet" href="[Link]
family=Material+Icons" />
<div id="editor3"></div>
<script>
[Link]([Link]('editor3'), {
allowToolbar: true,
value: '<b>This is a basic example...</b>',
toolbar: [{
content: 'undo',
onclick: function() {
[Link]('undo');
}
},
{
content: 'redo',
onclick: function() {
[Link]('redo');
}
},
{
type:'divisor'
},{
type:'select',
width: '160px',
options: [ 'Verdana', 'Arial', 'Courier New' ],
render: function(e) {
return '<span style="font-family:' + e + '">' + e +
'</span>';
},
onchange: function(a,b,c,d) {
[Link]('fontName', false, d);
[Link] 7/9
09:42 7/6/26 JavaScript HTML Editor
}
},
{
type: 'select',
width: '48px',
content: 'format_size',
options: ['X-small','Small','Medium','Large','X-large'],
render: function(e) {
return '<span style="font-size:' + e + '">' + e +
'</span>';
},
onchange: function(a,b,c,d,e) {
[Link]('fontSize', false, e+1);
}
},
{
type: 'select',
width: '50px',
options:
['format_align_left','format_align_center','format_align_right','format_a
lign_justify'],
render: function(e) {
return '<i class="material-icons">' + e + '</i>';
},
onchange: function(a,b,c,d) {
if (d == 'format_align_left') {
[Link]('justifyLeft');
} else if (d == 'format_align_center') {
[Link]('justifyCenter');
} else if (d == 'format_align_right') {
[Link]('justifyRight');
} else if (d == 'format_align_justify') {
[Link]('justifyFull');
}
}
}
]
});
</ i t>
[Link] 8/9
09:42 7/6/26 JavaScript HTML Editor
</script>
</html>
More examples
You can find more examples of the jSuites JavaScript HTML Editor plugin as below.
Applying Extensions to the Editor
Related Tools
Jspreadsheet CE Editors - Inline cell editors for data grids (free)
Jspreadsheet Pro HTML Editor - Rich text editing in spreadsheet cells (Pro)
Custom Cell Editors - Build custom spreadsheet editors (Pro)
[Link] 9/9