1

I need to enable edit functionality for link with alt text in experience manager. I followed the article:

http://www.tridiondeveloper.com/having-fun-with-experience-manager

However, this implementation met the partial requirement i.e. two fields are available in experience manager for link: Link URL and Alt Text. My requirement is two fields should be shown only when user selects to edit the component and once user has selected cancel / finish editing then again both fields should be merged.

Is there a way to achieve this?

4
  • Can you be a bit more specific about the problem you are facing please? If you have followed the 'Having fun with Experience Manager' article, then I'd suggest that you can modify the jQuery plugin code at the bottom of the article to only fire under certain conditions. Commented Dec 3, 2014 at 14:13
  • 1
    @JonathanWilliams That is what I need, the condition that will be true when any component is edited. The article Having fun with Experience manager checks for condition that it is inside experience manager. I want to go one level down to check when component is edited so that I can enable two fields on edit not otherwise.
    – Hiren Kaku
    Commented Dec 3, 2014 at 18:43
  • @NickoliRoussakov: This is not duplicate as I am looking for option to check edit mode and what the question that you have highlighted is for checking for if page is inside experience manager. Also, I have already tried the solution provided in the answer for the question that you have highlighted.
    – Hiren Kaku
    Commented Dec 3, 2014 at 21:57

1 Answer 1

2

When you turn on editing for given item on a page, there are borders drawn along with various controls. This means that the DOM is manipulated with additional elements. Therefore you can write a javascript event to look for presence of these elements to determine if edit mode has been turned on.

Here is an example: I have hovered over various random editable regions to see the borders. What I noticed is that there are several divs added and inside you will find a div that has some attributes that you can use as flags for "edit mode". In the screenshot below take a note at the items circled in red. The div has attributes c:command="ShowEditingPopup", data-class="ShowEditingPopup" and finally, the title attribute starts with the string "You are editing " enter image description here

So any one of those can be used as a flag. You just need a bit of javascript logic to sniff out when and where those elements show up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.