Wordpress-like "shortcodes"

1

Hi,

I’ve been doing some research for the last two days looking for the perfect editor for a possible custom “cms”. ProseMirror ticks all the boxes save for one thing, “shortcodes” as Wordpress calls them.

So basically what I want to do is:

  • User clicks on a button to insert a “widget”
  • What happens is we create a tag in the post content (this is important)
  • PM takes this tag, renders it as a completely different HTML structure
  • When serializing HTML content this “shortcode” is stored as on the backend
  • When displaying it to a visitor I can parse this HTML and replace with the custom html

Any ideas how to do this? The async image upload example kind of reminds me of this, though I’m not certain if I should create a custom node type to use instead of the image node.

https://prosemirror.net/examples/upload/ (startImageUpload function)

Thanks in advance

2

Hi. This is definitely possible with ProseMirror, but not something that’s built-in. You’d define a custom node type for these codes, create a UI element to insert them, and render them differently based on the context. Maybe this demo helps?

3

Seems I was right to think that I should use a custom node type for this. I’ve come across this example before, and I thought it could work, however if I wasn’t sure if I could get it working with the whole custom tag business.

4

“render them differently based on the context”, do you mean the custom nodes toDom method, right?

5

Yes, you can have multiple DOM serializers for a single schema—one for inside the editor, and one for presentation-only (or just write your own serializer function for the latter)

1 Like