CODEWITHSUNDEEP
tinymcetinymce-pluginstinymce-5
Jack
Jack

Reputation: 61

Tinymce Call built-in plugin from custom menu item

I am adding menu buttons to a tinymce editor. In this interface there are multiple tinymce editors loaded on the page at once. The menu buttons I am adding all do some custom styling either using the formatter or by applying custom css classes to selected elements. As part of one of the items I need to also "remove all formatting" from the selection as well as add some text around the selection. There is already a built-in plugin that does this, so I would like to just call that function from my plugin.

I got this working by using jQuery to click the "remove all formatting" button, however since there are multiple editors on the page, this makes the page scroll from where the user is at, depending on which button actually gets clicked by jQuery.

I would rather not use this approach because i feel like it would be much cleaner and provide a better result to execute the remove formatting code from my plugin, but I am unsure how to access the function I need to call.

{
  type: 'menuitem',
  text: 'Sample Answer',
  onAction: function() {
    $('button[title|="Clear formatting"]').click(); //I would like to call this function here instead of jQuery clicking a button.
    editor.formatter.apply('sample_answer');
  }
},

Upvotes: 1

Views: 369

Answers (1)

Jack
Jack

Reputation: 61

So after some more digging, it appears that a certain amount of tinymce commands can be executed using editor.execCommand RemoveFormat is one of the commands you can use, so they made it easy on me for what I need to do.

It would still be nice to know if there was a way to execute other functions if I wanted to, but the execCommand function definitely solves this issue.

 {
    type: 'menuitem',
    text: 'Sample Answer',
    onAction: function() {
        editor.execCommand('RemoveFormat');
        editor.formatter.apply('sample_answer');
    }
 },

Upvotes: 1

Related Questions