• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Jodit
  • Examples
  • © 2025 XDSoft.net
  • site v.0.1.810
  • Jodit v.4.6.2
Modules
Filebrowser module without Jodit
Custom module

Sizes
Autosize
Fixed height

Integrations
Joomla Component Jodit WYSIWYG
Angular Component Jodit WYSIWYG
React JS Jodit WYSIWYG
Integration with ElFinder
Jodit in Yii2
Integrate filebrowser in Joomla CMS

Theme
Drak or custom theme

Edit modes
Source mode
Read only
Read only

Plugins
Create custom plugin

Customization
Keyboard shortcuts

Toolbar
Small Icons
Large Icons
Text Icons
Custom icons / Use Font awesome
Custom button

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

Without ACE

Use simple textarea without ACE editor

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

Result

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

Show gutter

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

Result

;