typescripttinymcetinymce-5tinymce-plugins

Is there a way to open the Tinymce Comments sidebar without a manual button click


We have implemented the Tinymce comments plugin into our configuration and we are happy with how it works. However, our users would like the 'showcomments' button to be clicked and the sidebar containing the comments to be displayed on page load.

We can see that the command 'tc-open-comments' is the command that gets fired when clicking the button but we are unable to fire this command ourselves.

Any help would be greatly appreciated.

Config

tinymce.init({
    selector: '.tinymce',
    plugins: [
        'paste tinycomments'
    ],
    toolbar: 'addcomment showcomments',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'user1',
    tinycomments_author_name: 'username',
    content_css: '/css/app.css',
    setup: function (editor: any) {
        editor.on('ExecCommand', function (e) {
            console.log('The ' + e.command + ' command was fired.');
        });
        editor.on('init', function () {
            // These are the two commands fired by a click of the 'showcomments' button
            editor.execCommand('tc-open-comment'); // This does not work
            editor.execCommand('ToggleSidebar'); // This works

            let commentsPresent = false;
            let textareaContent = editor.startContent;

            if (textareaContent.includes('tox-comment')) {
                commentsPresent = true;
                console.log(commentsPresent);
            } else {
                console.log(commentsPresent);
            }
            
        });
    }
});

Solution

  • Your code calling the command to open the comments sidebar is missing some arguments. The proper code should be:

    editor.execCommand("ToggleSidebar", false, "showcomments");
    

    From the Documentation:

    https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand

    execCommand(cmd:String, ui:Boolean, value:mixed, args:Object)
    

    In this case, the ui:Boolean and value:mixed parameters are required for this particular Command to be fired properly.

    The line:

    editor.execCommand('tc-open-comment');
    

    ...is not necessary.

    Here is a Tiny Fiddle that demonstrates this:

    https://fiddle.tiny.cloud/Z7haab/1