How to remove buttons in tinymce editor for the non-default wordpress editor

Question

I can see numerous examples on removing buttons in the tinymce editor but I want to do this for a custom editor I am adding from Javascript.

function myplugin_tinymce_buttons( $buttons ) {
  //Remove the text color selector
  $remove = 'forecolor';

  //Find the array key and then unset
  if ( ( $key = array_search( $remove, $buttons ) ) !== false )
    unset( $buttons[$key] );

  return $buttons;
}

There is no mention of editor ID here. How do I do this only for a custom editor? I dont want to change anything in the main editor shown in Wordpress post page.

Where did you find this code? I think you don't understand. First as the code says it doesn't remove the button but `Remove the text color` which is very different. Also if I understand, you don't need to pass your editor ID to this function because it receives an array of buttons. So the job to select the good buttons is made before. You could even pass an array with buttons from 2 different TinyMCE editors if you have more than one in your page. And last: the name of the function suggests it's inside a plugin `myplugin_tinymce_buttons` — Jérôme MEVEL, Dec 08 '16 at 01:27
@JérômeMével 'forecolor' seems to be the name of a button. The function I quoted is associated with "add_filter( 'mce_buttons','myplugin_tinymce_buttons');" call. To be specific, I create this custom editor in JS using the following commands: tinyMCE.execCommand("mceAddEditor", false, captionId); tinyMCE.execCommand('mceAddControl', false, captionId); Not sure where to say I dont want these buttons.. The quoted piece of code is from .. https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4 — rysv, Dec 08 '16 at 01:40
Then using this function all you have to do is to build your `$buttons` array and pass it to your function. The editor ID doesn't matter. But according to this [link](https://status301.net/remove-buttons-from-the-wordpress-rich-text-editor-toolbar/) this function has a problem... — Jérôme MEVEL, Dec 08 '16 at 01:57
I can do that but it is impacting the main post editor too. If in JS, I can use this code to find if main editor is active or not but not sure what's the WP/PHP equivalent: is_tinyMCE_active = false; if (typeof(tinyMCE) != "undefined") { if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) { is_tinyMCE_active = true; } } — rysv, Dec 08 '16 at 02:06
Sorry I know TinyMCE but your question is too specific to WordPress and I never used WordPress... — Jérôme MEVEL, Dec 08 '16 at 02:08
But you should probably refer to the [new WordPress documentation](https://developer.wordpress.org/?s=mce) it seems the link you gave is old — Jérôme MEVEL, Dec 08 '16 at 02:13
Possible duplicate of [How to remove tinymce editor buttons from Javascript?](http://stackoverflow.com/questions/41042061/how-to-remove-tinymce-editor-buttons-from-javascript) — Michael Fromin, Dec 08 '16 at 16:32

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

The best and cleanest way is definitely to change your TinyMCE config before initialization.

Otherwise you can refer to my answer on another question where I set the editor in ReadOnly mode then enable just few buttons.

I didn't test this code but your function should be something like this:

function removeButton(editorId, pluginName, commandName) {
    var htmlEditorDiv = document.getElementById(editorId).previousSibling;
    var editor = tinymce.get(editorId);
    var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
    buttonDiv.style.display = "none";
    buttonDiv.firstChild.onclick = function () {
        //Even if the button is invisible, it's better
        //removing the command associated to the button click just in case
    };
}

For the list of commands, refer to this page

edited May 23 '17 at 10:30

Community

1
1

answered Dec 08 '16 at 01:40

Jérôme MEVEL

7,031
6
46
78

Plugins list is available [here](https://www.tinymce.com/docs/plugins/). So `pluginName` corresponds to the plugin identifier. You can also take a look at the `plugins` array in [source code of the full featured example](http://codepen.io/tinymce/pen/NGegZK). Note: This function I wrote works for buttons but plugins might be still accessible if you navigate in the menu. For example with the full featured example configuration, the `code` plugin is also available under `tools`. But I bet your `myplugin_tinymce_buttons` function has the same problem – Jérôme MEVEL Dec 09 '16 at 01:16
You already had the plugin list in the link I gave in my answer for commands list. I just realized some commands are natively included in the `Core`. My code hasn't been tested on these buttons actually. Give a try first on other buttons. For example with `code` as plugin name and `mceCodeEditor` as command name. – Jérôme MEVEL Dec 09 '16 at 01:25
Was able to solve with tinymce.init({ selector: "#" + captionId, plugins: "link", menu: {}, toolbar: [ "undo redo bold italic link" ] }); – rysv Dec 09 '16 at 01:33
Yes as I told you the best way is to configure buttons directly at the `init` step. But you said `I dont want to change anything in the main editor shown in Wordpress post page`... – Jérôme MEVEL Dec 09 '16 at 03:36
yes the code I used will not impact main editor, did not realize that selector can be the ID – rysv Dec 09 '16 at 05:31

How to remove buttons in tinymce editor for the non-default wordpress editor

1 Answers1