November Happy Hour will be moved to Thursday December 5th.

Replacing the content-div in XHTML-area

Vote:
 

The XHTML-properties supports drag 'n' drop of Content in much the same way as ContentAreas and this is great. However... it always inserts a div placeholder into the XHTML-area while editing. Something like this:

Is there a way to control this? Say, changing it to a span for a certain type of content.

The problem is that when I want to have inline content elements in the middle of a paragraph-tag, like this:

Here's some text and in the middle of it I want to insert my content as an inline element

The actual outputted HTML is: 

Here's some text and in the middle of it  I want to insert my content as an inline element

And this is of course not valid, and so TinyMce tries to be helpfull and changes this to:

Here's some text and in the middle of it

I want to insert my content as an inline element

And this is of course not the result I want as suddenly my supposed inline content ends up hanging in the middle of two paragraphs.

A simple solution to this would be to change the outputted

to a and it would render inline by default, not breaking the flow of my already existing elements.

I've reflected the ContentFragment, ContentFragmentFactory and ContentFragmentHandler classes and I can see hardcoded references to a

-tag all over the place. A few examples:

In ContentFragmentHandler:

if (element.Token != ElementToken.Div || !FragmentHandlerHelper.ContainsClassId(element, ContentFragment.ClassId))
return false;

In ContentFragment:

TagBuilder tagBuilder = new TagBuilder("div");

In other words there seem to be no way to get around this using the built in classes.

Does anyone have any clever suggestions as how to achieve this? 

Thanks

Robert

#112449
Oct 28, 2014 13:57
Vote:
 

I stumbled upon this blog post http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2013/12/Customizing-the-look-and-behavior-in-the-UI-for-your-content-types/ it might be what I'm after. I will investigate and re-post.

Robert

#112451
Oct 28, 2014 14:00
Vote:
 

It seems this is not doable in the current implementation. There are simply three different types of content you can insert, the <div>, an <a> or an <img>. None of which meets my requirements above.

I ended up writing a custom TinyMce plugin to handle insertion of this type of content...

#112497
Oct 29, 2014 10:09
Vote:
 

If you look at my blog post on tinymce the EPiServer way

http://world.episerver.com/Blogs/Henrik-Fransas/Dates/2014/10/how-to-use-tinymce-the-episerver-way-in-a-custom-property/

And look at line 402 of the javascript file you can see that it is hardcoded in the javascriptfile.

#112499
Oct 29, 2014 10:21
Vote:
 

I've noted that, yes. This is an extremely inflexible way of handling this in my opinion, there are a few TODO: comments at the top that gives me some hope of a more flexible system in the future.

#112500
Oct 29, 2014 10:23
Vote:
 

True. Hope you will find some help in the blog post on how to make your own version of it

#112502
Oct 29, 2014 10:26
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.