CODEWITHSUNDEEP
bootstrap-4tinymce
Tip
Tip

Reputation: 3

How to install plugins in TinyMCE correctly?

I'm trying to install TinyMCE on my website

The table, link, and media plugins don't work. that is, a popup opens, but you can't enter a value in the fields - just select it from the list. There is only one error in the console - Please use the List plugin together with the Advanced List plugin.

Bootstrap and Tiny may conflict. But how to fix it?

code

  <script>
    tinymce.init({
   selector: 'textarea#default',
   language: 'ru',
   menubar: 'edit insert',
   toolbar: 'advlist image code link imagetools advcode media powerpaste codesample',
   plugins: 'advlist image code link imagetools advcode media powerpaste codesample',
   default_link_target: '_blank',
   image_list: [
    {title: 'My image 1', value: 'https://www.example.com/my1.gif'},
    {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
  ]
});
  </script>

...

<textarea id='default'> </textarea>

website - (the last option at will open tiny)

Upvotes: 0

Views: 663

Answers (1)

Tiny Lincoln
Tiny Lincoln

Reputation: 1102

There are a few different issues you seem to be experiencing:

TinyMCE and Bootstrap:

The behavior you are describing is a common issue when using TinyMCE in Bootstrap, particularly in a dialog/modal. It is likely that you will need to override the built-in block on focusin in the Bootstrap dialog with this code:

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

Here is a working Tiny Fiddle demonstration: http://fiddle.tiny.cloud/gRgaab

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

Plugins vs Toolbar:

You also have the same items listed for your plugins and toolbar configurations:

 toolbar: 'advlist image code link imagetools advcode media powerpaste codesample',
 plugins: 'advlist image code link imagetools advcode media powerpaste codesample',

Plugins are not toolbar items. Plugins are bits of additional, optional functionality that can be added to the editor. Toolbar buttons are clickable UI elements that execute specific commands. These commands may be for plugin functionality, or for core-editor functionality.

A list of available toolbar buttons can be found here:

https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/

Lists and Advanced Lists:

The console error:

Please use the List plugin together with the Advanced List plugin.

...is pretty thorough. As mentioned in the documentation:

The Lists (lists) plugin must be activated for the advlist plugin to work.

This can be fixed by adding lists to your plugin configuration:

 plugins: 'lists advlist image code link imagetools advcode media powerpaste codesample',

Upvotes: 1

Related Questions