help need to add RTE strikethrough plugin in CFM

[rajat168]

Hi Team,

          I have a requirement, i want to add Strikethrough plugin for Content fragment. when we create a content fragment we need to select CFM model. in that model, while we select MF line text and default type as Rich text, can we add Strikethrough plugin in this RTE? Kindly please suggest.

Environment  : AEMasCS.

[HrishikeshKa]

Hi @rajat168 ,

To add the Strikethrough plugin to the Rich Text Editor (RTE) in a Content Fragment Model (CFM), you will need to modify the XML configuration of the RTE.

Here are the steps to add the Strikethrough plugin to the RTE in CFM:

1. Open the CFM model in your AEM instance.
2. Navigate to the "Elements" tab in the CFM editor.
3. Find the "MF line text" element and click on it to edit its properties.
4. In the "Default Type" dropdown, select "Rich Text".
5. In the "Configurations" section, click on the "Edit" button next to the RTE configuration.
6. In the RTE configuration dialog, locate the "Plugins" section.
7. Add the following code to the "Plugins" section to enable the Strikethrough plugin:

<plugin>
    <name>strikethrough</name>
    <title>Strikethrough</title>
    <icon>coral-Icon--strikethrough</icon>
    <pluginFqn>com.adobe.granite.ui.components.StrikethroughPlugin</pluginFqn>
</plugin>
​

1. Save the changes to the RTE configuration.
2. Save the changes to the CFM model.

After following these steps, the Strikethrough plugin should be enabled in the RTE for the "MF line text" element in your CFM model.

[rajat168]

Hi @HrishikeshKa , thanks for your response, i gone through till step 4 in above response, but i couldn't find the configuration section 5 .In the "Configurations" section, click on the "Edit" button next to the RTE configuration. Kindly help on this...

[HrishikeshKa]

Hi @rajat168 ,

I apologize for the confusion. It seems that the step numbering in the previous response was incorrect. To clarify, here are the correct steps to add the Strikethrough plugin to the RTE in a CFM:

1. Open the CFM model in your AEM instance.
2. Navigate to the "Elements" tab in the CFM editor.
3. Find the "MF line text" element and click on it to edit its properties.
4. In the "Default Type" dropdown, select "Rich Text".
5. In the "Configurations" section, locate the RTE configuration and click on the "Edit" button next to it.
6. In the RTE configuration dialog, locate the "Plugins" section.
7. Add the following code to the "Plugins" section to enable the Strikethrough plugin:

<plugin>
    <name>strikethrough</name>
    <title>Strikethrough</title>
    <icon>coral-Icon--strikethrough</icon>
    <pluginFqn>com.adobe.granite.ui.components.StrikethroughPlugin</pluginFqn>
</plugin>
​

1. Save the changes to the RTE configuration.
2. Save the changes to the CFM model.

After following these steps, the Strikethrough plugin should be enabled in the RTE for the "MF line text" element in your CFM model.

[rajat168]

Hi @HrishikeshKa , i have checked RTE CFM editor, we don't have any name like "configuration", i also shared the above screenshot. Kindly please check, also kindly please share your screenshot.

[Keerthi987]

Hi @rajat168 ,

First overlay styledTextEditor.js from /libs/dam/cfm/admin/clientlibs/v2/authoring/contenteditor/editors/StyledTextEditor.js and add strikethrough in styles as below in styledTextEditor.js

 "styles": {

          "features": "*",

          "styles": {

            "strikethrough": {

              "text": "StrikeThrough",

              "cssName": "strikethrough"

         },

}

}

and add 
span.strikethrough {
text-decoration:line-through;
} in css 

This should work.

Thanks.

[rajat168]

Hi @Keerthi987 , thanks for your response, i was able to overlay the node but kindly help me the css path to add the span style as mentioned above. 

css contains two less file: /apps/dam/cfm/admin/clientlibs/v2/authoring/contenteditor/css.txt - should we overlay below two less file as well?

fragmenteditor.less
multieditor.less

[Keerthi0555]

Hi,

This css

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

u can add anywhere in you are  present css file which loads when base page loads and let me know if it works.

[Keerthi0555]

Sorry, not in the base page but where this cf model or content fragment css is loaded.

[rajat168]

Hi @Keerthi0555 ,

I have overlayed as below,

and added the css as below, but it didnt work.PFB,

[Keerthi0555]

no, first check u got strike through in styles in rte plugin.

Steps to follow,

1.Copy styledTextEditor.js from libs folder and create client lib under /apps/component folder  with category as 

dam.cfm.authoring.contenteditor.v2 and

2.Paste StyledTextEditor.js under this clientlib and modify style section to add strikethorugh  and js.txt with styled StyledTextEditor.js

    "styles": {

          "features": "*",

          "styles": {

            "strikethrough": {

              "text": "StrikeThrough",

              "cssName": "strikethrough"

         },

}

3.then u will see 

strikethrough style in styles and apply that to any word in richt text then it will be like below 

<span class="strikethrough">device</span>

4. In the same clientlib add css.txt file and editor.css file with span.strikethrough {
text-decoration:line-through;
}

css.txt should contain editor.css 

This worked for me I just implemented this it should work for u aswell.

[rajat168]

Hi @Keerthi0555 , thanks for your response, as suggested, i have added client lib,but still didnt work,pfb screenshot,

also kindly help me how to call this client-lib on our CFM

[Keerthi0555]

Hi @rajat168 ,

Please remove all the dependencies u have added for rte those dependencies are not required. and also please mention each step u have done so that i can find where u have done mistake.or Just follow the exact steps i mentioned above.

Thank you.

[rajat168]

Hi @Keerthi0555 ,

 Please find below steps.

1) created a client-lib folder named clientlib-rtistricktrough(under /apps/myproject/clientlibs/clientlib-rtistricktrough)

2) added category(MF)  as dam.cfm.authoring.contenteditor.v2

3) created css & js folder and css.txt & js.txt (under /apps/myproject/clientlibs/clientlib-rtistricktrough)

4) copy & pasted the StyledTextEditor.js(from /libs/dam/cfm/admin/clientlibs/v2/authoring/contenteditor/editors) to /apps/myproject/clientlibs/clientlib-rtistricktrough/js/StyledTextEditor.js.

5) added  #base=js StyledTextEditor.js in js.txt (/apps/myproject/clientlibs/clientlib-rtistricktrough/js.txt)

6) added strikethorugh.css in css.txt

(/apps/myproject/clientlibs/clientlib-rtistricktrough/css.txt)

7) updated the StyledTextEditor.js with (/apps/myproject/clientlibs/clientlib-rtistricktrough/js/StyledTextEditor.js)

  "styles": {
            "features": "*",
            "styles": {
              "strikethrough": {
              "text": "StrikeThrough",
              "cssName": "strikethrough"
         },

updated /apps/myproject/clientlibs/clientlib-rtistricktrough/css/strikethrough.css with below style

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

please find the updated screenshot

removed dependencies.

[Keerthi0555]

Hi @rajat168 ,

Are u able to see strikethrough in styles for cf? Can u remove empty line after #base=css and #base=js don't give any extra space in js.txt and css.txt.

[rajat168]

No still, couldnt see the Strick in my CF

also i removed extra space in my js and cs.txt file

[rajat168]

Kindly please share your sample package over github or my email rajathannasi168@gmail.com

[Keerthi0555 · Accepted solution]

INside StyledTextEditor.js please add styles in different places as below 

"inline": {

            "toolbar": [

              "#styles"

            ],

            "popovers": {

              "styles": {

                "ref": "styles",

                "items": "styles:getStyles:styles-pulldown"

              }

            }

          },

and here 

   "multieditorFullscreen": {

            "toolbar": [

              "#styles"

            ],

"popovers": {

"paraformat": {

                "ref": "paraformat",

        "items":"paraformat:getFormats:paraformat-pulldown"

              }

            "styles": {

                "ref": "styles",

                "items": "styles:getStyles:styles-pulldown"

           },

            }

          },

Hope this will help.

[Keerthi0555]

You didn't get the basic styles aswell not only strikethrough something wrong might be wrong in StylesTextEditor.js.

[rajat168]

@Keerthi0555 , thanks for your response... could you please share github code of StyledTextEditor.js?

[rajat168]

Hi @Keerthi0555 , thanks a lot for your suggestion, it worked as expected if we replaced this code for StyledTextEditor.js