TinyMCE 5 & Media plugin: Remove (hide) "Embed" tab (section) without affecting other components/controls

0
votes

I'm using TinyMCE 5 and Media plugin with the following configuration:

tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media image",
    ],
    toolbar: "media image",

    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
    
    images_upload_url: 'postAcceptor.php',
    images_upload_handler: function (blobInfo, success, failure) {
       setTimeout(function () {
         success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  },
});

Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?

enter image description here

I've checked the documentation for Media plugin but there's nothing about that...

Also, applying this CSS:

<style>
  .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>

hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.

FIDDLE: http://fiddle.tinymce.com/cwhaab

On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).

I'm using TinyMCE 5.4.2

2
tinymcetinymce-5

2 Answers

2
votes

REALLY BAD CODE ALERT!

Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.

Take a look at this playground demo:

tinymce.init({
  selector: "textarea",
  menubar: false,
  plugins: [
    "media image",
  ],
  toolbar: "media image",
  media_dimensions: false,
  media_alt_source: false,
  media_poster: false,


  images_upload_url: 'postAcceptor.php',
  images_upload_handler: function(blobInfo, success, failure) {
    setTimeout(function() {
      success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  },
  setup: function(editor) {
    editor.on('ExecCommand', (event) => {
      const command = event.command;
      if (command === 'mceMedia') {
        const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
        tabElems.forEach(tabElem => {
          if (tabElem.innerText === 'Embed') {
            tabElem.style.display = 'none';
          }
        });
      }
    });
  }
});
<form method="post" action="dump.php">
  <textarea name="content"></textarea>
</form>
1
votes

Just use CSS to hide the second element;

<style>
  .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media",
    ],
    toolbar: "media",
    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls

Edit: By putting a selector I mean do the following

<style>
  .onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
    display: none;
  }
</style>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menubar: false,
    plugins: [
        "media",
    ],
    toolbar: "media",
    media_dimensions: false,
    media_alt_source: false,
    media_poster: false,
});
</script>

<form method="post" action="dump.php">
    <div class="onlyEffectMe">
        <textarea name="content"></textarea>
    </div>
</form>