Supercode is an enhanced source code editor plugin for TinyMCE, the popular web-based WYSIWYG editor. This plugin provides users with a seamless experience for editing and displaying source code within the TinyMCE editor environment. Supported on tinyMCE versions v5
, v6
and v7
.
Supercode internally uses Ace Editor to provide the following features:
To install the Supercode plugin, follow these steps:
supercode
directory).supercode
folder) to your TinyMCE plugin directory. (In tinymce/plugins
)To use the Supercode plugin in TinyMCE, simply:
Supercode uses Custom View to view source code in tinymce editor itself. This Custom View is not supported on older version <=v5
and in inline
mode. A modal dialog is used as a fallback in case Custom Views
is not available or fallbackModal
is set to true
.
This modal can be customized using following modal related options like fallbackModal
, modalPrimaryColor
, modalSecondaryColor
, dark
.
Supercode allows a parser method and renderer method to be passed as a configuration, this gives the ability to convert the languages when switching between visual and code mode. A good use case can be converting TinyMCE into a Markdown editor.
The basic implementation will look like this :
<Editor
value={value}
onEditorChange={(htmlCode) => {
setValue(htmlCode);
}}
init={{
plugins: [
'supercode'
],
toolbar: 'supercode',
supercode: {
renderer: renderer, // Function : Markdown => HTML
parser: parser, // Function: HTML => Markdown
language: 'markdown', // Uses 'markdown' language for code highlighting and autocomplete
},
}}
/>
Supercode is highly configurable. You can configure the Supercode plugin by modifying the TinyMCE configuration options. There are many options but none of them are required. Here's an example configuration:
tinymce.init({
selector: 'textarea',
plugins: 'supercode',
toolbar: 'supercode',
supercode: {
theme: 'chrome',
fontSize: 14,
wrap: true,
autocomplete: true,
iconName: 'sourcecode',
parser: myParserFunction,
renderer: myRendererFunction,
language: 'html',
shortcut: true,
aceCss: 'your custom CSS rules or fonts for ace',
fontFamily: 'Monospace',
}
});
Here are all the configurations
Option | Description | Data Type |
---|---|---|
theme |
The theme to be applied to the ace code editor. | String |
fontSize |
The font size of the ace code editor. | Number |
wrap |
Determines whether code lines should wrap or not. | Boolean |
autocomplete |
Specifies whether autocomplete functionality is enabled. | Boolean |
iconName |
The name of the icon used for the Supercode plugin in the toolbar. View Supported Icon List | String |
parser |
The method used for converting HTML content back into the target language. | Function |
renderer |
The method used for rendering the source language into HTML. | Function |
language |
The default language for syntax highlighting. Supported Languages | String |
shortcut |
Specifies whether (Ctrl+Space) keyboard shortcuts are enabled. | Boolean |
aceCss |
The custom CSS or CSS fonts to customize the appearance of the code editor. | String |
fontFamily |
The font family applied to the code editor. | String |
fallbackModal |
Set it to true to explicitly use code editor in modal dialog. Defaults to automatic detection. | String |
modalPrimaryColor |
Modal Primary color if using custom tinymce skin editor. | String |
modalSecondaryColor |
Modal Secondary color if using custom tinymce skin editor. | String |
dark |
Set true if your modal primary color is dark to add matching border editor. |
String |
debug |
Set false to disable debug warnings. Default false editor. |
String |
All the ace themes are supported. You can try out the themes here. Here is a list to choose from:
theme | Name |
---|---|
chrome | Chrome |
clouds | Clouds |
crimson_editor | Crimson Editor |
dawn | Dawn |
dreamweaver | Dreamweaver |
eclipse | Eclipse |
github | GitHub |
iplastic | IPlastic |
katzenmilch | KatzenMilch |
kuroir | Kuroir |
solarized_light | Solarized Light |
sqlserver | SQL Server |
textmate | TextMate |
tomorrow | Tomorrow |
xcode | XCode |
theme | Name |
---|---|
ambiance | Ambiance |
chaos | Chaos |
clouds_midnight | Clouds Midnight |
cobalt | Cobalt |
dracula | Dracula |
gob | Green on Black |
gruvbox | Gruvbox |
idle_fingers | idle Fingers |
kr_theme | krTheme |
merbivore | Merbivore |
merbivore_soft | Merbivore Soft |
mono_industrial | Mono Industrial |
monokai | Monokai |
pastel_on_dark | Pastel on Dark |
solarized_dark | Solarized Dark |
terminal | Terminal |
tomorrow_night | Tomorrow Night |
tomorrow_night_blue | Tomorrow Night Blue |
tomorrow_night_bright | Tomorrow Night Bright |
tomorrow_night_eighties | Tomorrow Night 80s |
twilight | Twilight |
vibrant_ink | Vibrant Ink |
Supercode is compatible with the latest versions of TinyMCE and supports all the themes. It has been tested on v5
, v6
and v7
of tinyMCE. In v5
the in-editor integration is not supported so a fallback modal is always used. It is not tested on older versions that are less than v5
. If you have tested on any older versions then please create an issue and let us know.
If you'd like to contribute to the development of Supercode, please feel free to fork this repository and submit a pull request. We welcome any contributions or feedback to help improve the plugin.
For any questions, issues, or support requests related to Supercode, please feel free to contact me. I'll be happy to help!
Took some inspiration from this Advanced Source Code Editor plugin made by @melquibrito.
Supercode - Enhanced Source Code Editor for TinyMCE