|
1 | 1 | # Supercode TinyMCE Plugin |
2 | 2 |
|
3 | | -**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. (No ugly popup modal) |
| 3 | +**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`. |
4 | 4 |
|
5 | 5 |  |
6 | 6 |
|
@@ -38,6 +38,13 @@ To use the Supercode plugin in TinyMCE, simply: |
38 | 38 | 3. Make changes to your code as needed, utilizing the features provided by Supercode. |
39 | 39 | 4. Click again on the Supercode Toggle button or press escape or use Ctrl+Space shortcut to switch back to visual editing. |
40 | 40 |
|
| 41 | +## Using Modal Dialog box |
| 42 | + |
| 43 | +Supercode uses [Custom View](https://www.tiny.cloud/docs/tinymce/latest/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`. |
| 44 | + |
| 45 | +This modal can be customized using following modal related options like `fallbackModal`, `modalPrimaryColor`, `modalSecondaryColor`, `dark`. |
| 46 | + |
| 47 | + |
41 | 48 |
|
42 | 49 | ## Using as a Markdown Editor |
43 | 50 |
|
@@ -109,6 +116,11 @@ Here are all the configurations |
109 | 116 | | `shortcut` | Specifies whether (Ctrl+Space) keyboard shortcuts are enabled. | Boolean | |
110 | 117 | | `aceCss` | The custom CSS or CSS fonts to customize the appearance of the code editor. | String | |
111 | 118 | | `fontFamily` | The font family applied to the code editor. | String | |
| 119 | +| `fallbackModal` | Set it to true to explicitly use code editor in modal dialog. Defaults to automatic detection. | String | |
| 120 | +| `modalPrimaryColor` | Modal Primary color if using custom tinymce skin editor. | String | |
| 121 | +| `modalSecondaryColor` | Modal Secondary color if using custom tinymce skin editor. | String | |
| 122 | +| `dark` | Set `true` if your modal primary color is dark to add matching border editor. | String | |
| 123 | +| `debug` | Set `false` to disable debug warnings. Default `false` editor. | String | |
112 | 124 |
|
113 | 125 | # Editor Themes |
114 | 126 |
|
@@ -163,7 +175,7 @@ All the ace themes are supported. You can try out the themes [here](https://ace. |
163 | 175 |
|
164 | 176 | ## Compatibility |
165 | 177 |
|
166 | | -Supercode is compatible with the latest versions of TinyMCE and supports all the themes. I have only tested it on v7 till now. Create an issue if it has or has not worked for your tinymce version. As per my knowledge it should work with all the tinyMCE versions after v5. |
| 178 | +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. |
167 | 179 |
|
168 | 180 | ## Todos |
169 | 181 |
|
|
0 commit comments