Customize tinymce in Voyager

Add additional_js:

https://docs.laravelvoyager.com/customization/additional-css-js

‘js/custom.js’ => ‘public/js/custom.js’

Add callback function in additional js:

https://docs.laravelvoyager.com/customization/tinymce

Rename or copy plugin.min.js to plugin.js

TinyMCE will find plugin.js of each plugins in public\vendor\tcg\voyager\assets\js\plugins
https://www.tiny.cloud/docs/advanced/creating-a-plugin/

Example:

function tinymce_init_callback(editor)
{
      editor.remove();
      editor = null;

      tinymce.init({
        selector: 'textarea.richTextBox',
        skin: 'voyager',
        min_height: 100,
        height: 200, 
        resize: 'vertical',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern code',
        extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
        file_browser_callback: function (field_name, url, type, win) {
            if (type == 'image') {
                $('#upload_file').trigger('click');
            }
        },
        toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | code',
        convert_urls: false,
        image_caption: true,
        image_title: true,
        valid_elements:'div[*],p[*],span[*],ul[*],li[*],ol[*],hr,br,img[*],-b,-i,-u', 
        valid_children:'+li[span|p|div]'
    });
}

 

Reference:

  1. https://github.com/the-control-group/voyager/issues/1945
  2. Remove doctype and html tags that generated by tinymce automatically: Remove fullpage plugin.
    https://stackoverflow.com/questions/17829239/how-can-i-stop-tinymce-from-adding-doctype-htmlhtmlhead-headbody-to-e
  3. https://stackoverflow.com/questions/6266487/tinymce-allow-all-html-tag
  4. https://stackoverflow.com/questions/7744903/tinymce-allow-data-attribute