Is it possible to customize the current modal?

[ruben-murcia]

I am using the Trumbowyg v2.21.0 and I am trying to customize a little bit the modal for the Creating link function.

I would like to do the following 2 changes:

• Add a description text before the fields (URL, text, etc.)
• Hide an input (for example, Target)

I did a little research of the core source code and found out that the Modal HTML only has field parameters:

Ref: https://github.com/Alex-D/Trumbowyg/blob/develop/src/trumbowyg.js#L1617

I looked at the documentation, and it seems that the only way to do change the Modal content is creating your own modal, but to do that you need to create your button, your modal and all the process after the user clicks on the Confirm button. Am I correct?

Ref: https://alex-d.github.io/Trumbowyg/documentation/#modal-box

When you want create your custom extension for Trumbowyg, you can open and close a modal box with custom inner HTML code, listen events and more.

So I am wondering, is there an easy way to do that (add text before fields and hide an input), setting a Trumbowyg parameter? Or the only way is to create your own process, as mentioned above?

Thank you!

[Alex-D]

Yeah, you will need to create a whole new plugin :/ That's not really cool, but I will do better in v3 I hope.

Check existing plugins to get inspired :)

Also, there is a doc section dedicated to plugin creation: https://alex-d.github.io/Trumbowyg/documentation/plugins/#create-your-own

In your case, did you check that option and the following? https://alex-d.github.io/Trumbowyg/documentation/#minimal-links

Hope it helps

[ruben-murcia]

Thank you very much for your reply, Alex : )

I will check out the minimal link option 👍

[PiemP]

🙋‍♂️I would like to connect to this discussion: is it possible to change the actual behavior of the Target field from a text field to a radio button field with predefined values or I have to create a new plugin to do that? I could take care to do a specific PR about this if there is some need and if all are agreed to change the actual behavior

[volomike]

Just wanted to drop a note that you can add a MutationObserver in your Javascript so that you can detect a modal is open with certain text and then can do things to that HTML. Here's an example that intercepts an Insert Link (although I do use some jQuery here):

var observer = new MutationObserver(function(mutations) {
  if ($('.trumbowyg-modal-title:contains(Insert link)').length > 0) {
    $('.trumbowyg-modal-box FORM').prepend('<div id="link-note"><small>I am some sample text!</small></div>');
      observer.disconnect();
      observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
  }
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

You can then also capture what was submitted and modify values in that modal before it is destroyed with jQuery code like so:

$(document).on('click','.trumbowyg-modal-submit',function(e){
  var o = $(this).parentsUntil('.trumbowyg-modal-box').parent();
  var s = o.find('.trumbowyg-modal-title').text();
  if (s == 'Insert link') {
    // make some magic here
  }
});

[Alex-D]

I do not think of making more customization in v2, so I am closing this issue. Feel free to create plugins if needed or use the solution above :)