Adding code blocks insert button in toolbar for tinyMCE

Author: Omar Shamali

Last Modification: 2024-01-26

Writing Date: 2023-12-27

To add code blocks in the editor, you need to go to where you initialize your tinyMCE:

tinymce.init({
toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link openlink unlink media table image ',
});

To add code blocks insert button in the toolbar, add: codesample at the end of the toolbar1 attribute, so it becomes:

tinymce.init({
toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link openlink unlink media table image codesample ',
});

and of course you can specify which languages to be supported in the markup, by adding codesample_languages attribute:

tinymce.init({
toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link openlink unlink media table image codesample ',

 codesample_languages: [
    {text: 'HTML/XML', value: 'markup'},
    {text: 'JavaScript', value: 'javascript'},
    {text: 'CSS', value: 'css'},
    {text: 'PHP', value: 'php'},
    {text: 'Python', value: 'python'},
    {text: 'Java', value: 'java'},
    {text: 'C', value: 'c'},
    {text: 'C#', value: 'csharp'},
    {text: 'C++', value: 'cpp'}
  ],
});

tested on TinyMCE 5.10.3