Issue whith TinyMCE 2 and inline blocks

Frederic Thomas

Vote:

We have problem with Tinymce : when you drop a block in a XHTML it has div tags around it even if the block in view mode is only showing a value.

Tinymce adds p tag around witch results in wrong html for the property.

I managed to add a setting to tinymce but it's only working when the editor drops the block.

When editing a xhmtl with a block in it, Tinymce changes the html despite the setting: .AddSetting("valid_children", "+p[div]") .

Has someone managed to solve the problem with block div in p tags in xthml properties?

#203696

May 03, 2019 8:50

David Boland

Vote:

Hey Frederic,

Can you give more info around how you are editing the Xhtml that has the block in it? Or maybe some sample screenshots? I tested dropping a block in the TinyMCE in Alloy and was able to edit the properties after the fact and didn't see any tags added around the block content.

#203870

May 09, 2019 7:01

Frederic Thomas

Vote:

Ok that's interesting, how does your block looks like in your xhtml?

#203955

May 14, 2019 13:11

Vote:

Same here, no extra divs added. Version EPiServer.CMS.TinyMce 2.7.1 and EPiServer.CMS.UI 11.14.0

#203959

May 14, 2019 15:25

Vote:

Didnt get the Q, you want to enable div inside p in the tiny mce editor? yeah that seems not possible, tiny cleanes it. .AddSetting("valid_children", "+p[div]") doesnt do it either, tiny moves the div outside the P's, maybe check tiny mce documentation?

#203960

May 14, 2019 15:34

Frederic Thomas

Vote:

The problem is not about EXTRA div, it's about the divs that the block consists of, for ex :

<p>text part before the block</p>
<div data-classid="36f4349b-8093-492b-b616-05d8964e4c89" data-contentguid="e250dae1-e4ed-4507-9828-ca24885b5afc" data-contentname="MYBLOCK">BLOCK</div>
<p>text part after the block</p>

TinyMCE is not gonna let div inside p even with this settings which is normal since it's not html5 compliant.

But the result is that it's not possible to drop a block inside p in a xhtml without extra p added around the block.

So if you want to insert a dynamic value for instance a price in a text it's not gonna work with a block which it did with dynamic content.

Or maybe someone manage to do it?

There are some forums post with this problem but never a solution to it.

#203977

May 15, 2019 8:56

Vote:

yeah, seems not doable when a block is rendered div in tiny mce.

A wild workaround,

1. override or intercept the DnD/insert event, make the div to span instead. (use the BeforeSetContent event to intercept and change it - se my example https://devblog.gosso.se/2018/10/tinymce-template-plugin-example-with-insert-after-functionality/)
2. Span is not rendering, so you need to do your own implementation, use reflection to see how epi is doing it.

Let us know how you solve it!

#203984

May 15, 2019 11:03

Vote:

Made a POC of my workaround today, check my conclusions in my blog https://devblog.gosso.se/2019/05/use-blocks-as-legacy-dynamic-properties-poc/

#204147

May 20, 2019 22:39

Frederic Thomas

Vote:

Very nice and simple work around.

If we could apply the drop plugin to only some block types it would be almost perfect.

#204173

May 21, 2019 14:03

- May 22, 2019 15:02

oh, its possible, have added it to the blog post: https://devblog.gosso.se/2019/05/use-blocks-as-legacy-dynamic-properties-poc/#disableblocks

Frederic Thomas - May 24, 2019 12:59

I meant that the transformation from div to span only apply to certain types, that way all the draw backs you wrote doesn't exist anymore.

Frederic Thomas - May 27, 2019 15:02

I made a addition to the tinymce plugin and add a call to an api to check if the blocktype is the one(s) you want inline.
There are not any draw backs anymore.