I was wondering if it's possible to convert this kind of shortcode:

[card name="Muscle Band" set="XY" no="121" c="name"][/card]

Into this in Visual Mode (in blue-colored text):

Muscle Band XY 121

Basically, something that detects shortcode that's in the above format and changes it into the second format only when you look at it in Visual mode (the card name, set, and number).

Thank you!


You can use shortcake ui for this. [Shortcake in the repository][1]

[1]: https://de.wordpress.org/plugins/shortcode-ui/ shortcake ui plugin


Yes it certainly is. To convert your shortcode visually in editor you must do the following:

  1. Add a filter on mce_external_plugins
  2. Add your tinymce plugin script url to the $plugin_array and return it
  3. In your tinymce.PluginManager.add function respond to editor events BeforeSetContent and GetContent
  4. In your BeforeSetContent javascript callable function, execute the code that replaces your shortcode with a visual one
  5. In your GetContent javascript callable function, execute the code that restores your shortcode from its visual format.

I know this sounds complicated. But as usual, it's simple once you analyze it. Here's a tutorial that takes you through the motions. You can also download a sample code from github that will get your started

Tip: Your visual component, ie: a paragraph tag, should contain a unique data attribute <p data-my-shortcode-name="my_shortcode_data_is_stored_here". This allows for a successful restore-to-text operation.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.