Use blocks as legacy dynamic properties – POC

POC how to tweak blocks behavior in XhtmlString Property and TinyMce.

Published 20th of May 2019
Episerver.CMS.UI 11.15
Episerver.CMS.TinyMce >2

Last day I found an interesting question at episerver.world (yes it links to world.episerver.com). The user wanting to use blocks inline in P-tags in TinyMce. That does’nt work since:
1. content is inserted as div
2. tinymce does auto correct divs inside p, to p, div, p.

So i suggested to

1. override insert event, make the div to span instead. (use the BeforeSetContent event to intercept and change it
2. span is not rendering content, so you need to fix that too.

Default behavior:

Wanted behavior:

Proof of concept

PoC Block model: (with one property)

PoC Block view (Get the current page model and a specific property on that current page)

Change the rendering of XhtmlString by replacing the default view in Views/shared/blocks/XhtmlString.cshtml

Override the inserted html when block dropped

JS file:

Register the js plugin in TinyMceInitialization

Disable block types to be dropped into XhtmlString

Since AllowedTypes is not applicable to XhtmlString, you need to implement an editordescriptor like this:

Put Attribute on Property:

 

Conclusion

There are obvious drawbacks with this solution.
1. You don’t get the default behavior “Go To Block” (because episerver has scoped it to “div.epi-contentfragment:not([mceItem])” in the “epi-block-tools” widget, but you can implement your own, check source code epi-block-tools.js.uncompressed.js)
2. It doesnt trace the block and warn when “moved to trash”
3. It doesnt update the name if you change the Block Name

Would I recommend this?

No, I would rather see a solution with some markup instead, and replaced when rendered with output process action filter. Something like this: https://gist.github.com/davidknipe/4dc89826ea00d4fc65df60965526b69d
https://www.david-tec.com/2017/11/tokenised-content-in-episerver/

More reading:

SEO TERMS

  • Disable dragging of blocks in XHTML properities
  • Blocks in tinymce

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso

 

 

Like it? please up vote
2