Editing html in source view

You can switch to code editing mode by pressing the Source button. But you can also make it the default mode:

Jodit.make('#editor', {
	defaultMode: Jodit.MODE_SOURCE
});
Copy

3 editing modes available

• Mode WYSIWYG - Jodit.MODE_WYSIWYG
• Mode Source - Jodit.MODE_SOURCE
• Split mode in two - Jodit.MODE_SPLIT

You can switch between them. The split mode is off by default.:

Jodit.make('#editor', {
	useSplitMode: true,
	defaultMode: Jodit.MODE_SPLIT
});
Copy

Code editing mode, by default works on the editor Ace, but this behavior can be toggled You can use a regular textarea to edit your code:

Jodit.make('#editor', {
	defaultMode: Jodit.MODE_SOURCE,
	sourceEditor: 'area'
});
Copy

Ace themes

But for Ace, editors can apply its own settings. For example change theme:

List of available themes

• Chrome ace/theme/chrome
• Clouds ace/theme/clouds
• Crimson Editor ace/theme/crimson_editor
• Dawn ace/theme/dawn
• Dreamweaver ace/theme/dreamweaver
• Eclipse ace/theme/eclipse
• GitHub ace/theme/github
• IPlastic ace/theme/iplastic
• Solarized Light ace/theme/solarized_light
• TextMate ace/theme/textmate
• Tomorrow ace/theme/tomorrow
• XCode ace/theme/xcode
• Kuroir ace/theme/kuroir
• KatzenMilch ace/theme/katzenmilch
• SQL Server ace/theme/sqlserver
• Ambiance ace/theme/ambiance
• Chaos ace/theme/chaos
• Clouds Midnight ace/theme/clouds_midnight
• Cobalt ace/theme/cobalt
• Gruvbox ace/theme/gruvbox
• Green on Black ace/theme/gob
• idle Fingers ace/theme/idle_fingers
• krTheme ace/theme/kr_theme
• Merbivore ace/theme/merbivore
• Merbivore Soft ace/theme/merbivore_soft
• Mono Industrial ace/theme/mono_industrial
• Monokai ace/theme/monokai
• Pastel on dark ace/theme/pastel_on_dark
• Solarized Dark ace/theme/solarized_dark
• Terminal ace/theme/terminal
• Tomorrow Night ace/theme/tomorrow_night
• Tomorrow Night Blue ace/theme/tomorrow_night_blue
• Tomorrow Night Bright ace/theme/tomorrow_night_bright
• Tomorrow Night 80s ace/theme/tomorrow_night_eighties
• Twilight ace/theme/twilight
• Vibrant Ink ace/theme/vibrant_ink

Jodit.make('#editor2', {
	defaultMode: Jodit.MODE_SOURCE,
	sourceEditorNativeOptions: {
		theme: 'ace/theme/eclipse'
	}
});
Copy

You can find a complete list of options on the editor's site By default they are set like this:

{
  "showGutter": true,
  "theme": "ace/theme/idle_fingers",
  "mode": "ace/mode/html",
  "wrap": true,
  "highlightActiveLine": true
}
Copy