Those are alternative implementations of codesample and preview plugins for TinyMCE 4
JavaScript editor.
This version of codesample plugin supports all syntax highlighting definitions provided by PrismJS
library. By default this codesample plugin supports the same languages as the official plugin, but you can configure
the list of available languages via codesample_languages
option. Note that, unlike the official plugin, this plugin does not include any PrismJS components of its own
and you need to include the necessary links to prism.js and prism.css with all language definitions
that you want to support. The plugin also allows to enable and disable line numbers in code samples (requires Prism.js
Line Numbers plugin).
This is a drop-in replacement for the official preview plugin. The only difference is that it can show code blocks
with syntax coloring by PrismJS.
- Copy plugin folders to your web server content directory.
- Download the necessary PrismJS
.jsand.cssfiles. - Add links to the necessary
.jsand.cssfiles to HTML code of the page which you want to use TinyMCE 4 editor in. - Add all the necessary options to TinyMCE 4 configuration
Example configuration:
<!DOCTYPE html>
<html>
<head>
...
<script src="/your/server/path/js/prism/prism.min.js"></script>
<script src="/your/server/path/js/tinymce/tinymce.min.js"></script>
<link href="/your/server/path/css/prism/prism.css" rel="stylesheet">
</head>
<body>
...
<textarea id="editableContent"></textarea>
<script>
tinymce.init({
selector: 'textarea#editableContent',
plugins: 'advlist autolink link image', // No codesample and preview!
toolbar: 'codesample preview',
external_plugins: {
codesample: '../../../common_content/js/codesample/plugin.min.js',
preview: '../../../common_content/js/preview/plugin.min.js'
},
codesample_languages: [
{text: 'Python', value: 'python'},
{text: 'HTML/XML', value: 'markup'},
{text: 'Django/Jinja2', value: 'django'},
{text: 'CSS', value: 'css'},
{text: 'JavaScript', value: 'javascript'},
{text: 'C++', value: 'cpp'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'Windows BAT', value: 'batch'},
{text: 'Bash', value: 'bash'},
{text: 'YAML', value: 'yaml'},
{text: 'SQL', value: 'sql'},
{text: 'reStructuredText', value: 'rest'},
{text: 'Plain Text', value: 'none'},
});
</script>
...
</body>
</html> Important Notes:
- Do not include
codesampleandpreviewplugins inpluginsconfiguration option! They are loaded viaexternal_pluginsoption. - Paths in
external_pluginslist are relative totinymce.min.jsfile. - Prism.js files with the necessary language definitions need to be added both to pages where you use TinyMCE 4 editor and to pages with authored content.
LGPL v.2.1