Source editor

The plugin allows you to add the ability to directly edit HTML to the editor. The plugin connects the editor to the Ace page (default behavior). This is implemented through the connection of the CDN JS file. They are set in the settings in [[Config.sourceEditorCDNUrlsJS]] The appearance of the Ace editor can be set through its settings, option [[Config.sourceEditorNativeOptions]]

For example, let's change the editor theme to light Chrome

Jodit.make('#editor', {
sourceEditorNativeOptions: {
theme: 'chrome'

The list of themes supported by Ace can be found on this page

Also, you can not use Ace but just use Textarea

Jodit.make('#editor', {
sourceEditor: 'area'

Custom editor

You can implement your own text editor implementation, for example you can use CodeMirror To do this, you need to add a class that will implement the interface [[ISourceEditor]] and register it with the plugin.

class MirrorEditor {
constructor(jodit) {}

getValue() {}
setValue(raw) {}
insertRaw(raw) {}

getSelectionEnd() {}
getSelectionStart() {}
setSelectionRange(start, end) {}

setPlaceHolder(title) {}

focus() {}

setReadOnly(isReadOnly) {}

selectAll() {}

get isReady() {}
onReadyAlways(callback) {}

Jodit.make('#editor', {
sourceEditor: j => new MirrorEditor(j)


Re-exports AceEditor
Re-exports TextAreaEditor

Jodit PRO

If you like Jodit - try Jodit PRO