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.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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:
<plugin>
<name>strikethrough</name>
<title>Strikethrough</title>
<icon>coral-Icon--strikethrough</icon>
<pluginFqn>com.adobe.granite.ui.components.StrikethroughPlugin</pluginFqn>
</plugin>
After following these steps, the Strikethrough plugin should be enabled in the RTE for the "MF line text" element in your CFM model.
Views
Replies
Total Likes
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...
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:
<plugin>
<name>strikethrough</name>
<title>Strikethrough</title>
<icon>coral-Icon--strikethrough</icon>
<pluginFqn>com.adobe.granite.ui.components.StrikethroughPlugin</pluginFqn>
</plugin>
After following these steps, the Strikethrough plugin should be enabled in the RTE for the "MF line text" element in your CFM model.
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.
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
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
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.
Sorry, not in the base page but where this cf model or content fragment css is loaded.
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
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.
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
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.
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"
},
span.strikethrough {
text-decoration:line-through;
}
please find the updated screenshot
removed dependencies.
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.
No still, couldnt see the Strick in my CF
also i removed extra space in my js and cs.txt file
Kindly please share your sample package over github or my email rajathannasi168@gmail.com
You didn't get the basic styles aswell not only strikethrough something wrong might be wrong in StylesTextEditor.js.
@Keerthi0555 , thanks for your response... could you please share github code of StyledTextEditor.js?
Hi @Keerthi0555 , thanks a lot for your suggestion, it worked as expected if we replaced this code for StyledTextEditor.js