Edit content in source mode

<link type="text/css" rel="stylesheet" href="build/jodit.min.css" />
<script type="text/javascript" src="build/jodit.min.js"></script>
Copy

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

Result

<!-- Example Start -->
<textarea id="dummy" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#dummy', {
		defaultMode: Jodit.MODE_SOURCE
	});
</script>
<!-- Example End -->
Copy

Without ACE

Use simple textarea without ACE editor

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

Result

<!-- Example Start -->
<textarea id="editor" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#editor', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditor: 'area'
	});
</script>
<!-- Example End -->
Copy

Another ACE theme

Ace 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

Result

<!-- Example Start -->
<textarea id="editor2" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	new Jodit('#editor2', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditorNativeOptions: {
			theme: 'ace/theme/eclipse'
		}
	});
</script>
<!-- Example End -->
Copy

Show gutter

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

Result

<!-- Example Start -->
<textarea id="editor3" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#editor3', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditorNativeOptions: {
			theme: 'ace/theme/eclipse',
			showGutter: true
		}
	});
</script>
<!-- Example End -->
Copy