I'm trying to add a WYSIWYG visual representation for a custom shortcode into the tinyMCE editor but I can barely find any information on how to do that. Researching the last few days resulted in almost zero or partial information. Why? I don't understand why such an amazing feature seems to not get any attention and support.

This is the best info I could find: https://dtbaker.net/blog/web-development/2014/09/create-your-own-wordpress-tinymce-view-and-shortcode-popup-editor/ But it doesn't explain how to display the UI element as non-block content, so that I can float it right next to text or other elements. Hacking the css doesn't help because the caret will still jump to the next line as soon as something is placed next to it. Also can't find info on how to add custom edit buttons that appear when you click on it like for img tag that lets you align it left/center/right etc.

Is it just me that didn't find anything on that topic or does that information simply not exist? I also found this: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/mce-view.js but can't make sense of it, there doesn't seem to be much info in it on how to actually use it.

  • 2
    I'd question if it's worth doing this when Gutenberg is coming in the next major release, it'd be better to implement a custom block or rely on the existing shortcode block that tries to do what you're asking – Tom J Nowell Jan 5 '18 at 15:25
  • I found this wordpress.org/plugins/shortcode-ui but not tried yet – Fred K Apr 23 '18 at 11:05
  • FWIW all I could ever find was DT Baker's work. I've never been able to iron out the last couple of bugs, or fully understand what I was doing! There is no other documentation that I've found in searching on and off for four years and I think @TomJNowell is right that with Gutenberg coming, it's now not worth investing more effort in this. – Andy Macaulay-Brook Aug 1 '18 at 17:26
  • 1
    Also note that in the past attempts to allow things like this ran into compatibility issues, I would advise anybody looking into this to instead use Gutenberg – Tom J Nowell Aug 1 '18 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.