Posts tagged "richtext"

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
August 22, 2013

Customized multifield richtext editor – Part 1

 

I came across a requirement in which I had to build a multifield richtext field with some customizations. As such it was not very complex but I thought if I can gather all the pieces and put it in one place this could be helpful to other people in community so here you go.

Note:

  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.

 

List of Customizations:

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

PART -1 (these topics are covered in this post)

  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 topics will be covered in my next post)

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

1. Creating a multi richText field

a. Create a component with a simple text field (title in my example).
Screen Shot 2013-08-20 at 1.54.14 PM

 

b. Change the xtype from ‘textfield’ to ‘multifield’ and you have your simple text multifield.
Screen Shot 2013-08-20 at 1.55.43 PM
above: setting the xtype as multifield

Screen Shot 2013-08-20 at 1.57.11 PM
above: screen shot of the simple text multifield

c. Now this is where I feel the power of CQ lies (where magic happens). Create a new node ‘fieldConfig’ of type ‘nt:unstructured’ under ‘title’ (your multifield) node. Add a property ‘xtype’ with value as ‘richtext’. Boom, you now have your multifield rich text editor with default plugins.

Screen Shot 2013-08-20 at 3.33.38 PM

above: setting the xtype as richtext

Screen Shot 2013-08-20 at 3.33.51 PM

above: a view of multifield richtext with default plugins and features

 

2. Common rte configuration – build once use often

Before we start customizing our rich text editor I would like show you a way to create a ‘reference node’ for your rich text editor. The benefit that you get out of this ‘reference node’ is that you make all your changes for adding and configuring plugins and their properties at one place (this reference node) and it can be applied to all components which refer to this

1. Create a component to store the configuration that will be referred by other components.

Screen Shot 2013-08-21 at 2.10.52 PM

2. Create a new node called ‘rtePlugins’ of type ‘nt:unstructured’ under ‘rteconfig’ (your component) node. We will create all nodes for configuring the rte (plugins and fetures) under this node.

Screen Shot 2013-08-21 at 2.21.12 PM

3. Now we will link our demo component’s rich text field to this common config field. To do this create a new node called ‘rtePlugins’ of type ‘cq:Widget’ under ‘fieldConfig’ node.

Screen Shot 2013-08-21 at 2.25.08 PM

4. Next we will create 2 properties for this ‘rtePlugins’ node (/apps/blog/components/content/demo/dialog/items/items/title/items/title/fieldConfig/rtePlugins)

Property 1:

name: xtype, value: cqinclude

Property 2:

name: path, value: /apps/blog/components/content/rteconfig/rtePlugins.infinity.json

Note: the value in property 2 points to the path for the config node that you created followed by .infinity.json

Screen Shot 2013-08-21 at 4.37.57 PM

 

From here onwards we will do all changes to the rteconfig node and it will be reflected in our demo component which references rteconfig for rich text editor configurations.

3. Customize default plugins

 a). remove default plugins

For our sample we will remove the ‘justify’ plugin and all of the features that come with it.

Please refer to “Configure the rich text editor” for more information on list of plugins and features available in CQ.

Screen Shot 2013-08-21 at 5.07.46 PM

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 ‘justify’.

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

Screen Shot 2013-08-21 at 5.18.32 PM

3. Now go back to your content page and refresh it. You should not see any of the features from the’ justify’ plugin.

Screen Shot 2013-08-21 at 5.22.28 PM

You have now changed the default plugins to make your on list. If you need to remove other plugins you can create nodes similar to ‘justify’ for the specific plugin that you want to remove and create/copy the features property in that node.

Another IMPORTANT thing is that we made all these changes in the config node so now you can reuse this configuration as often as needed.

b). restrict features in default plugins (activating specific features for a plugin)

Please refer to “Configure the rich text editor” for more information on list of plugins and features available in CQ.

Now we will look at an example in which we will restrict features one of the default plugins. Each plugin node can have a features property configured to activate, or deactivate, one or more features.

The ‘links’ plugin is used to create hyperlinks in your rte. It has 3 features- ‘modifylink’, ‘unlink’ and ‘anchor’. In the following example we will remove the ‘anchor’ feature from the ‘links’ plugin.

Screen Shot 2013-08-21 at 5.35.42 PM

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 ‘links’.

2. To restrict a particular ‘feature’ in any of the plugins you have to create an array (String[]) for features and add the specific features that you need in the array list. Create a property called ‘features’ of type String[] (multi) under ‘links’ node.

3.  Now, to remove the ‘anchor’ feature, we will add only the two required features (out of the 3 available options)- ‘modifylink’ and ‘unlink’.

Screen Shot 2013-08-21 at 5.54.15 PM

4. Now go back to your content page and refresh it. You should see restricted list of features (‘modifylink’, ‘unlink’) from the’ links’ plugin.

Screen Shot 2013-08-21 at 6.02.59 PM

 

 

4. Activate a (non-default) Plugin

In this section we will Activate the Miscellaneous tools (‘misctools’) Plugin. We will also look at whats different when activating all features for a new plugin vs. activating specific features for a plugin that I explained in section 3.(b) above.

Miscellaneous tools allowing you to enter special characters or edit the HTML source both of which are pretty commonly used with the rich text editor.

First we will add this plugin (the process for which is exactly similar to default plugins) and then we will enable ALL its features- special characters and edit the HTML source code. Lets begin.

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 ‘misctools’.

2. Create a property called ‘features’ of type String under ‘misctools’. Please note the type for the ‘features’ property in this scenario is just String as compared to Sting[] (multi) that we used while activating specific features for a plugin in section 3.(b).

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

Screen Shot 2013-08-21 at 6.24.43 PM

4. Now go back to your content page and refresh it. You should see ALL features (‘specialchars’, ‘sourceedit’) from the ‘misctools’ plugin.

Screen Shot 2013-08-21 at 6.26.11 PM

 

a). Adding your own special characters:

When the ‘misctools’ plugin is enabled  a default list of special characters is immediately available for use; for example, the copyright and trademark symbols.

Screen Shot 2013-08-21 at 6.35.21 PM

You can configure the RTE to make your own selection of characters which I will show in the example below.

NOTE: Adding your own special characters will override the default OOB special characters. If you need them you will have to add those in.

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

2. Create a child node under ‘misctools’ of type ‘nt:unstructured’ and name it ‘specialCharsConfig’.

3. Create a child node under ‘specialCharsConfig’ of type ‘nt:unstructured’ and name it ‘chars’. This ‘chars’ node will hold the list of characters.

Screen Shot 2013-08-21 at 6.43.28 PM

4. Under ‘chars’ add a new node to hold an individual character definition. The type for this child node is ‘nt:unstructured’ again. The name for this child node should reflect the character; for example, pound.

Screen Shot 2013-08-21 at 6.48.18 PM

5. To the ‘pound’ node add a property with name as ‘entity’, type as String and value as the HTML representation of the required character; for example, &#163; for pound.

Screen Shot 2013-08-21 at 6.52.32 PM

6. Now go back to your content page and refresh it. You should see pound sign in the list of special characters.

Screen Shot 2013-08-21 at 6.56.39 PM

 

b). Adding default (OOB) special characters back:

A mentioned previously, adding your own special character overrides the default OOB list and we need to add it again if we need it. Lets go ahead and add some of the stuff back.

1. Trademark: Under ‘chars’ add a new node. The type for this child node is ‘nt:unstructured’ again. The name for this child node should reflect the character; for example, trademark.

2. To the ‘trademark’ node add a property with name as ‘entity’, type as String and value as the HTML representation of the required character; for example, &#8482; for pound.

3. Now go back to your content page and refresh it. You should see trademark sign in the list of special characters.

Screen Shot 2013-08-21 at 7.44.28 PM

Note: You can repeat above steps to add any number of characters that you need.

Hope this helps.

 

 

 

4:25 PM Permalink