Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Rich Text Custom Plugin

Avatar

Level 5

Hi @arunpatidar ,

 

I hope you doing well.

 

I was following your article https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html.

 

AEM 6.5.13.

 

A)In Style Picker, close (x) and tick (✓) button does not work. When we try to click, it gives below error:
"Resource at '/apps/commons/rte/plugins/popovers/style-picker/undefined' not found: No resource found"

B) Remove style button: After we add a style using "Add property" button. Next time, if we want to remove this style from same text, It does not pre-select style in dropdown that was selected while using "Add styles button".

 

Screen Below:

 

 

arvind_0-1677154324969.png

 



Thanks a lot in advance.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

Did you see, any console errors in the browser ? 

Those buttons were removed using javascript in this plugin(you can check gif in the blog) and close button has event to close the popup.
Seems like might be issue with underscore js. 

View solution in original post

6 Replies

Avatar

Level 5

@arvind 

Did you check , the below 2 paths are existing or not.

 

  • /apps/commons/rte/plugins/popovers/style-picker/datasource
  • /apps/commons/rte/plugins/popovers/style-picker/options.json'

 

Datasource is a JSP file which read json specified in options property and populates dropdown option for Style Picker plugin.
JSON file should have an array of elements in below format:

If want to show as Heading/Category use below format(value could be anything)
    {"text": "Background Color","value": "BTC","heading": "true"}


If Option

    {"text": "White","value": "white"}

Example : /apps/commons/rte/plugins/popovers/style-picker/options.json


[
    {"text": "Background Color","value": "BTC","heading": "true"},
    {"text": "White","value": "white"},
    {"text": "Black","value": "black"},
    {"text": "Green","value": "green"},
    {"text": "Orange","value": "orange"},
    {"text": "Light Grey","value": "lightgrey"},
    {"text": "List Style","value": "LS","heading": "true"},
    {"text": "Check","value": "list-checked"},
    {"text": "Cross","value": "list-crossed"},
    {"text": "Link Style","value": "LS","heading": "true"},
    {"text": "Primary","value": "btn-primary"},
    {"text": "Secondary","value": "btn-secondary"}
]

 

Thanks ,

Siva

Avatar

Level 5

@SivakumarKanoori  

Thanks for your kind reply. All Paths exist in AEM.

 

Issue is bit different. Not Data source .

If you could see below Gif FILE, when we try to close (X), It gives error.

 

2023-02-23_15h55_15.gif

 

FYI: @arunpatidar 

Avatar

Correct answer by
Community Advisor

Hi,

Did you see, any console errors in the browser ? 

Those buttons were removed using javascript in this plugin(you can check gif in the blog) and close button has event to close the popup.
Seems like might be issue with underscore js. 

Avatar

Community Advisor

you can trying adding another action on load to get the value and set the options 

 

 

sendDataMessage("load");

 

if (action === "load") {
                    console.log('inside load : ' + inline);
                    var $targetNode = startNode.nodeType == 3 ? $(startNode).parent() : $(startNode);
                    var classList =$targetNode.attr('class').split(' ');
                    $stylePicker = jQuery(document).find('.coral3-Select[name="./style"]');

                    $stylePicker.items.each({
					console.log($(this))
// set values
                    })