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)



createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG): ISourceEditor


Name Type
type "area" | "ace" | "mirror" | (jodit: IJodit) => ISourceEditor
editor IJodit
container HTMLElement
toWYSIWYG CallbackFunction<any>
fromWYSIWYG CallbackFunction<any>



Defined in