Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Tutorial: Create Very-Rich-Text (Inner Content 2) with 2sxc

Let's learn to create a Very-Rich-Text field which let's editors add apps and content-blocks to their WYSIWYG. 

What is Very Rich Text?

Often an editor will wish to add sophisticated functionality to their content. In a normal DNN page this is easy, just add modules to the page in the order you need them. But this functionality breaks down when you have list-details scenarios as in news, blogs, articles, product-details and more. In these cases, the following happens:

  • A DNN page shows a list of items - like news or blog posts. 
  • Each list-item shows a summary, with a link to the details
  • The Details are usually on the very same DNN page
  • ...and adding Apps or designed content blocks to this page would make them appear on all the details-pages of all items

So for such scenarios, we need the ability to add content-blocks or apps directly to an item and not to the DNN-page. 

Item-Panes Were Not Enough

2sxc 8.4 provided such functionality, by giving each item one or more virtual panes, into which you could add content-blocks. This is great for some use-cases, especially for mashups. For example, you can create product-details pages with multiple tabs, each tab being a virtual pane. 

But for common article scenarios like in news or blog-posts, it's not ideal. The reason is that you want to write something, add an app, and write some more. Using a virtual pane meant that simply writing became more complicated, as it didn't feel like one long article any more. This was finally changed in 2sxc 8.9, which introduced in-WYSIWYG content-blocks, which look like this:

Note that the wiki about inner content explains the techincal side, this article is more about how to do it.  

Overview: The Main Steps

To get this all going, we'll do the following:

  1. Configure the edit-dialog so a WYSIWYG allows the editor to add content-blocks
  2. Tell the template (Razor) to render that field with the content-blocks

Configuring the Edit-Dialog

The edit dialog must provide the user with the "Add Content Block" button (currently the star-icon). This button only appears, if there is an Entity-Field for content-blocks directly after the WYSIWYG in the field list. The reason for this is that the entity must keep track of the content-blocks it uses, which it will do with this entity-field. By placing it right after the WYSIWYG-field, it is assumed that they are meant for each other - so the star-button in the WYSIWYG will appear. 

One you've done this, the toolbar will show the new star button:

Note that the second field is technically necessary, but it doesn't need to be visible. I recommend that you set it to invisible right after you create it:

Rendering Very Rich Text

So now that the editor has used the new button and added some content-block placeholders, you must make sure the template also renders them. If you use the normal Razor syntaxt to render the Body (@Content.Body) then the content-blocks will simply be rendered as HR-lines, nothing exciting here. But 2sxc 8.9 provides a new Razor API - like this: 

@ToSic.SexyContent.ContentBlocks.Render.All(post, field: "BodyContentBlocks", merge: post.Body)

So the command Render.All(...) will convert the placeholders either into the app/content-block which was added, or if none was added yet, with a new placeholder allowing the editor to add something in the view-mode:

There are two ways to use the Render.All(...):

  1. Just to render a virtual pane (as was possible in 2sxc 8.4) - but the new command makes it shorter. In this case just use: 
    @ToSic.SexyContent.ContentBlocks.Render.All(Content, field: "fieldname")
  2. To render the content-blocks but merge them into a WYSIWYG (as we wish to do now). This is why it also needs the parameter merge which contains the text with the placeholders. 

Have Fun :)

Love from Switzerland
iJungleboy

PS: download the latest 2sxc here


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


(iJungleboy) Daniel Mettler (139)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (28)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (29)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (8)
George Alatrash (1)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (272)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (164)
William Severance (5)
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND
DNN Launch Webinar
VIEW ON-DEMAND