Source Code Editor

Advanced Source Code Editor plugin for Tinymce WYSIWYG Editor built alongside ACE

preview

To use this plugin copy the folder "codeeditor" and paste it into tinymce "plugins" folder in its source directory. Here's the path for tinymce_5.2.0 self-hosted production release -> tinymce_5.2.0/tinymce/js/tinymce/plugins

Download any of tinymce self-hosted releases here.

Tutorial

Initializing

In order to have it in your editor, after including codeeditor folder in your tinymce plugins directory, you must tell tinymce to inlcude the plugin as well as its toolbar button as demonstrated bellow...

tinymce.init({
    selector: "#target-element", // change this value according to your HTML target element selector
    toolbar: ["codeeditor"],
    plugins: ["codeeditor"],
});

Plugin configuration

The following configuration options are provided:

codeeditor_themes_pack -> EITHER a string with a set of words matching ACE theme names with a space inbetween them OR an array of strings, each matching any ACE theme name. Default is "twilight merbivore dawn kuroir".

Check out ACE available themes here. Preview here.

codeeditor_wrap_mode -> Boolean. Default is true. If set to false, long lines won't be wrapped automatically to fit modal view size and therefore horizontal scrolling will be available.
codeeditor_font_size -> Number representing height in pixels. Default is 12.

      tinymce.init({
          selector: "#target-element", // change this value according to your HTML target element selector
          toolbar: ["codeeditor"],
          plugins: ["codeeditor"],
          codeeditor_themes_pack: "twilight merbivore dawn kuroir", // or ["twilight", "merbivore", "dawn", "kuroir"]
          codeeditor_wrap_mode: true,
          codeeditor_font_size: 12
      });

Author

Melqui Brito

License

This project is licensed under the MIT License - see the LICENSE file for more details.

melquibrito / source-code-editor-tinymce-plugin

readme