That was pretty hard to get working...
Long story short: you can not simply add the codesample plugin to Tinymce via the Voyager callback function (although it's mentionned here https://voyager-docs.devdojo.com/customization/tinymce )
function tinymce_setup_callback(editor)
{
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
}
So that's not working... at least for me in laravel 5.8.35
I had to download tinymce 4.9.6 (https://www.tiny.cloud/get-tiny/self-hosted/) and put it in my public folder (public/js in my case)
They key is removing voyager tinymce instance and replacing it with another instance of the editor you can actually configure
function tinymce_setup_callback(editor)
{
tinyMCE.baseURL = '/js/tinymce';
editor.remove();
editor = null;
tinymce.init({
theme_url: '/js/tinymce/themes/modern/theme.min.js',
menubar: false,
selector: 'textarea.richTextBox',
skin_url: $('meta[name="assets-path"]').attr('content') + '?path=js/skins/voyager',
min_height: 600,
resize: 'vertical',
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help code',
extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
file_browser_callback: function (field_name, url, type, win) {
$('#upload_file').trigger('click');
},
toolbar: 'formatselect | bold italic strikethrough | forecolor backcolor | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | ltr rtl | removeformat | code codesample',
convert_urls: false,
image_caption: true,
image_title: true,
content_css: "/css/app.css",
valid_elements: 'pre[*],code[*],div[*],p[*],span[*],ul[*],li[*],ol[*],hr,br,img[*],i[*],em,table[*],tr[*],td[*],th[*],sup[*],sub[*],strong[*],b,h1[*],h2[*],h3[*],h4[*],h5[*],h6[*],small[*],a[*], svg,path',
valid_children: '+li[span|p|div]',
content_style: '.mce-annotation { background: #fff0b7; } .tc-active-annotation {background: #ffe168; color: black; }',
external_plugins: {
'print': '/js/tinymce/plugins/print/plugin.min.js',
'preview': '/js/tinymce/plugins/preview/plugin.min.js',
'searchreplace': '/js/tinymce/plugins/searchreplace/plugin.min.js',
'directionality': '/js/tinymce/plugins/directionality/plugin.min.js',
'visualchars': '/js/tinymce/plugins/visualchars/plugin.min.js',
'visualblocks': '/js/tinymce/plugins/visualblocks/plugin.min.js',
'autolink': '/js/tinymce/plugins/autolink/plugin.min.js',
'fullscreen': '/js/tinymce/plugins/fullscreen/plugin.min.js',
'media': '/js/tinymce/plugins/media/plugin.min.js',
'template': '/js/tinymce/plugins/template/plugin.min.js',
'codesample': '/js/tinymce/plugins/codesample/plugin.min.js',
'charmap': '/js/tinymce/plugins/charmap/plugin.min.js',
'pagebreak': '/js/tinymce/plugins/pagebreak/plugin.min.js',
'hr': '/js/tinymce/plugins/hr/plugin.min.js',
'anchor': '/js/tinymce/plugins/anchor/plugin.min.js',
'nonbreaking': '/js/tinymce/plugins/nonbreaking/plugin.min.js',
'insertdatetime': '/js/tinymce/plugins/insertdatetime/plugin.min.js',
'toc': '/js/tinymce/plugins/toc/plugin.min.js',
'advlist': '/js/tinymce/plugins/advlist/plugin.min.js',
'wordcount': '/js/tinymce/plugins/wordcount/plugin.min.js',
'imagetools': '/js/tinymce/plugins/imagetools/plugin.min.js',
'textpattern': '/js/tinymce/plugins/textpattern/plugin.min.js',
'help': '/js/tinymce/plugins/help/plugin.min.js',
'image': '/js/tinymce/plugins/image/plugin.min.js',
'link': '/js/tinymce/plugins/link/plugin.min.js',
'table': '/js/tinymce/plugins/table/plugin.min.js',
'lists': '/js/tinymce/plugins/lists/plugin.min.js',
'code': '/js/tinymce/plugins/code/plugin.min.js',
'textcolor': '/js/tinymce/plugins/textcolor/plugin.min.js',
}
})
}
This code goes into a custom js file (you can place it in public/js) that you will need to reference in config/voyager.php - additional_js.
In the above code, we call each individual plugin in "external_plugins" and provide a path to it. Be careful of the extension you're referencing (it can sometimes be .min.js, sometimes just .js)
To get the fancy highlighted code, don't forget to include both prism.js and prism.css (https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript) - in both your voyager view (can be done in config/voyager.php : additional_js and additional_css) and in your public view.
Laravel Voyager Admin