Tridion - Insert HTML (literal and partial elements) in a RTF
Asked Answered
L

2

11

I am trying to create a GUI extension in Tridion where I insert a specific html in to the RTF when a button is clicked.... I have the tool bar button and popup to inform the user. But when I click OK on popup when I insert the HTML "</div><div class='Page'>", it inserts "<div class='Page'/>".

I found out that applyHTML method is whats modifying whats being inserted. Is there anyother function/method that inserts exactly what I indicate , I mean invalid html with missing closing tags or open tags?

Leyva answered 2/1, 2013 at 8:53 Comment(1)
I'm not sure what the function is, but I would imagine it is impossible to bypass the HTML tidying function as the content must be well formed XHTML. If you can explain what you are trying to achieve perhaps a more suitable solution can be achieved.Appressed
S
6

If you need to make invalid markup, consider a plain text field. Not sure how much this would change your existing extension and content model, but you can enter anything into a plain text field, including what seems to be some kind of "split" or dividing placeholder.

</div><div class='Page'>

To keep rich text functionality and follow some typical Tridion practices, consider one of the following.

Complete all the markup changes at once

Assuming your final markup will have an open <div> and closing </div>, considering making your extension wrap an entire set of selected rich text. In the process and before updating the component, allow the author the ability to pick the location of the "split" and save the entire update to the RTF.

Create "splits" with embedded schemas and Template code

Embedded schema fields are a much easier way to split content. Authors create a new set of embedded fields and template code can change that to tabs, paragraphs, or what might be pages (pagination?) in your case.

A "Paragraph" embedded schema can handle this use case, as I understand it.

<!-- TemplateBeginRepeat name="Component.Fields.Paragraph" -->
<div class='Page'>
<!-- author-entered content -->
</div>
<!-- TemplateEndRepeat -->

This will create the </div><div class='Page'> in-between sets of embedded fields. It also lets you change the class and tag in the future without extension changes.

Insert Non-HTML "Merge Fields" Instead

See options on a post I wrote about custom tags in rich text fields, which include:

  • CSS classes in the Content Manager Explorer such as class="page-split". You can even style this to look a certain way (visually as an <hr/> for example), then template it to whatever you need in the final markup.
  • Merge field placeholder tags such as "[[end-page]][[start-page]"
  • Custom HTML5 nodes, if you must

You can insert any of these with an extension, optionally styling them to look a certain way in the CME.

I like giving authors easier ways of inserting functionality within rich text fields, but the catch with inserting specific HTML, especially invalid HTML, into components is in hard-coding this functionality into the content. You'll run into issues with migration and design changes.

Consider taking advantage of how Tridion separates design from content.

Skidmore answered 3/1, 2013 at 3:10 Comment(2)
Hey Alvin, thanks a bunch man... You saved us a lot of research and work.... You are right, we are trying to accomplish pagination. This is how I did it.... I used a placeholder tag [PaginateHere] in applyHTML. And then did a getSource(). In the text returned I replaced the tags with the invalid HTML. And then did a setSource(). Thanks again!Leyva
Good to hear. I like your "PaginateHere" option (reminds me of Blogger's more feature). The alternative would be embedded schema field --mainly because it's "pages" today but maybe tabs, swipe-able areas, or some-other-navigation approach next. Author would press the out of the box "+" button to separate content. Either way, you can also leave the placeholder in the RTF and change it with templates.Skidmore
B
0

Presumably when you say: </div><div class='Page'>, you mean <div class='Page'></div>. If this is so, then unless you can control the XML tidying directly, the only remaining approach (IMO) is to ensure that the div has some content. The commonest way to do this is to insert a non-breaking space.

<div class='Page'>&#160;</div>
Berri answered 2/1, 2013 at 16:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.