Try our conversational search powered by Generative AI!
AI OnAI Off
Issue whith TinyMCE 2 and inline blocks
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.
May 09, 2019 7:01
Same here, no extra divs added. Version EPiServer.CMS.TinyMce 2.7.1 and EPiServer.CMS.UI 11.14.0
May 14, 2019 15:25
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?
May 14, 2019 15:34
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.
May 15, 2019 8:56
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!
May 15, 2019 11:03
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/
May 20, 2019 22:39
Very nice and simple work around.
If we could apply the drop plugin to only some block types it would be almost perfect.
May 21, 2019 14:03
Luc Gosso (MVP)
- 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.
There are not any draw backs anymore.
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?