Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

help need to add RTE strikethrough plugin in CFM

Avatar

Level 5

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.

rajat168_0-1717742302889.png

 

Environment  : AEMasCS.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 6
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.

View solution in original post

20 Replies

Avatar

Community Advisor

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.

Avatar

Level 5

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...

rajat168_0-1717754514075.png

 

Avatar

Community Advisor

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.

Avatar

Level 5

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.

Avatar

Level 2

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.

Avatar

Level 5

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

rajat168_0-1717992216979.png

 

Avatar

Level 6

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.

 

Avatar

Level 6

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

Avatar

Level 5

Hi @Keerthi0555 ,

I have overlayed as below,

rajat168_0-1717998521538.png

 

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

rajat168_1-1717998604943.png

rajat168_2-1717998646617.png

 

 

Avatar

Level 6

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 Keerthi0555_0-1717999375783.png

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.

Keerthi0555_1-1718000280795.png

 

Avatar

Level 5

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

rajat168_0-1718004289730.png

 

rajat168_1-1718004382230.png

rajat168_0-1718004496291.pngrajat168_1-1718004515130.png

 

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

Avatar

Level 6

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.

Avatar

Level 5

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

rajat168_0-1718010450415.png

removed dependencies.

rajat168_1-1718010470878.png

 

Avatar

Level 6

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.

Avatar

Level 5

No still, couldnt see the Strick in my CF

rajat168_0-1718012723999.png

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

rajat168_1-1718012769455.pngrajat168_2-1718012787142.png

 

 

Avatar

Level 5

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

Avatar

Correct answer by
Level 6
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.

Avatar

Level 6

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

Avatar

Level 5

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

Avatar

Level 5

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