Archive for September, 2013

September 17, 2013

Customized multifield richtext editor – Part 2

This post is a continuation of (and final part) Customized multifield richtext editor 2 part series. In this post I will be covering the below mentioned customizations under Part 2 below.

Notes:

  1. I am using CRXDE Lite and CQ 5.6.1 for this article
  2. Save your work as often as you make ANY change.
  3. Please refer to “Configure the rich text editor” for more information on list of plugins and features available in CQ.
  4. Part 2 of this article is build upon common rte configuration that I created in Customized multifield richtext editor – Part 1.

 

List of Customizations:

I  divided this article into 2 part series. Below is the list of items that will be covered in each part.

PART -1 (these topics were covered in Customized multifield richtext editor – Part 1)

  1. Create a multi richText field,
  2. Common rte configuration – build once use often
  3. Customize default plugins
    • remove default plugins
    • restrict features in default plugins
  4. Activate a (non-default) Plugin,
    • adding your own special character,
    • Adding default (OOB) special characters back.

PART -2 (these are the things covered in this article)

5.   Use css styles in your rte (Using externalStyleSheet with rte),
6.   Add formatting,
7.   Make “plaintext” as default Paste Mode an strip extra HTML on paste.
8.   Remove default p tag in rte (limited scope)

5. Use css styles in your rte

Any style can be applied to a specific string that has been selected by the user in a rich text editor. Styles are based on CSS classes. When you select a string and apply a style to that it encloses the selected portion of text within span tags using the class attribute to reference the CSS class. Also, i am using a strikethrough as an example for this as there is no plugin that gives you this feature. For example:

<span class=strikethrough>Strikethrough Text Goes Here</span>

a.) Enable styles plugin (dropdown) for rich text editor

First thing that we need to do is enable the styles drop down for your rich text editor by activating the styles plugin. Lets do it:

1. Traverse to your rteconfig/rtePlugins node (/apps/blog/components/content/rteconfig/rtePlugins) and create a child node of type ‘nt:unstructured’ and name it ‘styles’.

2. Create a property called ‘features’ of type String under ‘styles’. 

3. To enable  features for the ‘styles’ enter the value as “*” for the ‘features’ property. Save.

Screen Shot 2013-08-27 at 2.09.11 PM

4. Now go back to your content page and refresh it. You should see a styles drop down from the ‘styles’ plugin. However, as there are no default styles it will be deactivated (empty/[None]).

Screen Shot 2013-08-27 at 2.11.03 PM

 

b.) Create css file and add styles to it

We also need a css file with required styes. These styles will be applied to the selected text when the author selects a string (text) in rich text editor and then selects a style from dropdown. Now we will create a css file and add required styles to it. I like to manage my css in client lib local to the component. We will walk through all the steps for creating the css, adding required styles and the reference it from the styles plugin. Lets start:

1. Traverse to your component node (/apps/blog/components/content/demo) and create a child node of type ‘cq:ClientLibraryFolder’ and name it ‘clientlib’.

Screen Shot 2013-08-27 at 2.32.22 PM

2. Create a folder under  ‘clientlib’ and name it ‘css’.

3. Create a file under ‘css’ folder and name it ‘static.css’

Screen Shot 2013-08-27 at 2.43.48 PM

 

4. Open your static.css and paste the below code in it. Save.

span.strikethrough {
    text-decoration:line-through;
}
#CQrte span.strikethrough {
    text-decoration:line-through;
}

Notes:
1. The span.strikethrough is for your content page. You would need to include your clientlib in your page template for this style to be applied.

2. #CQrte span.strikethrough will apply to the actual rich text editor in your component. Without this you will not see the strike through in your rich text editor.

c.) Referencing your style sheets.

In Part 1 of this article we created a fieldConfig under our component dialog at a path similar to /apps/blog/components/content/demo/dialog/items/items/title/items/title/fieldConfig.

1. Traverse to your components fieldConfig node and create a new property for fieldConfig with name as ‘externalStyleSheets’ and value as the path to the static.css that we created in last few steps .
Screen Shot 2013-08-27 at 3.07.09 PM

 

d.) Adding css style classes to ‘styles’ plugin dropdown.

Next we will create the required class under the styles plugin so that it is available in the ‘styles’ plugin dropdown.

1. Traverse to your rteconfig/rtePlugins/styles node (/apps/blog/components/content/rteconfig/rtePlugins/styles) and create a child node of type ‘cq:WidgetCollection’ and name it ‘styles’ (yes the name is same as parent node’s name).

2. Create a child node under this ‘styles’ node (from step 1 above – /apps/blog/components/content/rteconfig/rtePlugins/styles/styles): type of child node ‘nt:unstructured’ and name it ‘strikethrough’

Screen Shot 2013-08-27 at 3.14.46 PM

3. Create following properties for this ‘strikethrough’ node:

Property 1:

name: cssName

value: strikethrough

Property 2:

name: text

value: StrikeThrough

Screen Shot 2013-08-27 at 3.18.00 PM

4. Now go back to your content page and refresh it. Open the component and select a string in your rich text editor. Click on your styles plugin dropdown  in your rich text editor and you should see ‘StrikeThrough’ as one of the values available in your drop down list.

Screen Shot 2013-08-27 at 3.22.11 PM

5. A view of the rich text editor after StrikeThrough style applied to the ‘test’ text.

Screen Shot 2013-08-27 at 3.26.43 PM

 

6. Add Formatting

Now we will enable and customize the format options in rich text editor. Paragraph formats determine a type for the paragraph by assigning the correct block tag. The author can select and assign them using the Format selector. All text entered is placed within a block tag.

a.) Enabling the Format plugin

CQ has an OOB Format plugin the can be used to provide some basic formatting options. First we will look at how to enable this plugin and later we will customise it to add our own formats.

1. Traverse to your rteconfig/rtePlugins node (/apps/blog/components/content/rteconfig/rtePlugins) and create a child node of type ‘nt:unstructured’ and name it ‘paraformat’.

2. Create a property called ‘features’ of type String under ‘styles’. 

3. To enable  features for the ‘styles’ enter the value as “*” for the ‘features’ property. Save.

Screen Shot 2013-08-27 at 5.17.57 PM

4. Now go back to your content page and refresh it. You should see a Format drop down from the ‘paraformat’ plugin. The drop down for the Format has the default OOB options included in it. You can select text from your rte and the format will get applied to the entire block of text.

Screen Shot 2013-08-27 at 5.22.07 PM

b.) Customize the Format plugin to add other formats (h4)

Next we will add some paragraph formats to our Formats dropdown. I will be using h4 for my example.

Notes:

  • The default formats (<p>, <h1>, <h2> and <h3>) will be removed if you define custom formats (as specified above).
  • As <p> is the default format you must recreate this format.
  • The same applies to any formats that have already been used in existing content.

 

1. Traverse to your rteconfig/rtePlugins/paraformat node (/apps/blog/components/content/rteconfig/rtePlugins/paraformat) and create a child node of type ‘cq:WidgetCollection’ and name it ‘format’.

2. Create a child node under this ‘format‘ node (from step 1 above – /apps/blog/components/content/rteconfig/rtePlugins/paraformat/format): type of child node ‘nt:unstructured’ and name it ‘h4’.

3. To this node, add the property to define the block tag used.

Name: tag

Type: String

Value: h4

4. For same node add another property, for descriptive text to appear in the drop-down list.

Name: description

Type: String

Value: Heading 4

5. Now go back to your content page and refresh it. Although you cannot really see it but you should see a Format drop down with Heading 4 as one of the options in it. We will have to create another node for the p tag under the formats node (sibling of h4) before this works.

Screen Shot 2013-08-29 at 6.02.14 PM

 

Note: Repeat the steps 1 to 5 from above and create a p tag (description as Paragraph) and refresh your content page. You should be able to see Paragraph and Heading 4 as the 2 options now. Go ahead and select a text and apply heading 4 to test it.

Screen Shot 2013-08-29 at 6.09.54 PM

7. Make “plaintext” as default Paste Mode and strip extra HTML on paste.

The default paste mode in a rich text editor is “wordhtml”. Which means that when an author copy/pastes content into the rich text editor using Ctrl + V key or the main paste button the Word-compatible HTML pasting is done (this should suffice for most use cases, as it will keep most of the formatting, but removes unsuitable tags and attributes.

In my scenario the users wanted to change the default paste mode to “plaintext”  ( see below for a list of possible values) and strip and extra HTML tags which the author might have copied form the source.

Valid values are:

  • “browser” – use browser’s paste implementation (should usually not be used, as this may introduce unwanted markup or markup that could cause the RichText component to crash);
  • “plaintext” – for plain text inserts;
  • “wordhtml” – for Word-compatible HTML pasting (this should suffice for most use cases, as it will keep most of the formatting, but removes unsuitable tags and attributes.

The default copy and paste options are part of the ‘edit’ plugin in rich text editor and to over write the default paste option we need to include this plugin in our rteconfig/rtePlugins node as explained in Customized multifield richtext editor – Part 1.

Once you have the ‘edit’ plugin enabled with default options follow the below steps for making ‘plaintext’ as the default paste option and stripping off extra HTML tags.

1. Traverse to your rteconfig/rtePlugins/edit node (/apps/blog/components/content/rteconfig/rtePlugins/edit).

2. Create the blow list of properties for the edit node:

a. Create a property called ‘features’ of type String[] (multi) for ‘edit’ node. Leave the value as empty/blank for this property.

b. Create a property called ‘defaultPasteMode’ of type String for ‘edit’ node. Enter the value as ‘plaintext‘ for this property.

c. Create a property called ‘stripHtmlTags’ of type Boolean for ‘edit’ node. Enter the value as ‘true‘ for this property.

Screen Shot 2013-09-09 at 3.29.58 PM

Note: The “crazy” test that I am showing below might not be a real world scenario but I just want to show the working code.

Open Any website and copy some come (with formatting) content from the webpage as in below screen shot. Now Copy this formatted text.

Screen Shot 2013-09-09 at 3.48.07 PM

Paste this content into your rich text editor and  you should see the results of formatting being removed form your pasted text.

Screen Shot 2013-09-09 at 3.50.10 PM

 

8. Remove default p tag in rte (limited scope)

Note: I have removed the Format plugin for purpose of my demonstration in this topic.

Not sure if you have noticed but when an author types in anything inside the rich text editor (even if you are in the HTML Editor mode) it gets encapsulated by a P tag. I came across a situation in which the requirement was to get rid of the default p tag so the rendering engine consuming the content does not have to parse it out. Please note that you will still get a bunch of P tags when you have a line break. This is how I got it working.

1. Traverse to your components ‘fieldConfig’ (/apps/blog/components/content/demo/dialog/items/items/title/items/title/fieldConfig) node and create a new property for ‘fieldConfig’ with name as ‘removeSingleParagraphContainter’, type as Boolean and value as true. Save.

Screen Shot 2013-09-09 at 4.29.10 PM

2.  No go back to your content page and refresh it. Add a single line of text while in RichText mode and then toggle between SourceEdit mode and Rich Text mode. You should not see the P tags wrapping your line of content.

Screen Shot 2013-09-09 at 4.56.15 PM

 

Enjoy!

 

 

 

 

1:45 PM Permalink