The world’s worst developer, Joe Gunchy (read more about Joe here) is at it again. He created a new component to give content authors the ability to add rich text onto a page. The content author loves this idea and wants to try it out. They dragged the component onto the page, but there is no indication that the component is on the page and ready to edit. The content author is confused, so they drag another component onto the page. Still, nothing shows up.
They drag another onto the page, then another, then another. Nothing is displayed. Now the content author has five instances of the component on the page that they don’t know about, forcing the content author to drink from a flask hidden in their bottom desk drawer. Joe Gunchy laughs at the content author. Joe Gunchy is an idiot.
“Content authors are so dumb.” – Joe Gunchy
There are a few ways to edit content in a component. Some components contain an “edit bar” to show the editor dialog, while some use “rollover” editing. The component below shows an edit bar above the component with options to add, edit, but, copy, and paste. If you want to edit the content of the component, you click the “Edit” button which opens the editing dialog. Easy.
When there is no edit bar, the author must click on the component in the page until they see the green boundary box appear. This is referred to as “rollover editing”. Once that’s selected, you can either double-click within the box or right-click to launch the dialog editor. Joe Gunchy’s component used ‘rollover’, but when there is no content in the component, there is no way to tell the component is on the page. You can mitigate this in the component source code by checking to see if you’re in EDIT mode, then add some default text to the component to show it’s editable. Also, in many cases, it is difficult to click if you do not place your mouse at the precise point within the box to open the dialog, or even worse – components overlap each other and you can’t click them at all.
Use the Edit Bar
For better usability and consistency across the editing experience, use the Edit Bar on your components and never mix Edit Bar and Rollover on the page. That’s a horrible authoring experience. The Edit Bars below clearly show the author how to edit content on the page and when used exclusively, gives the author consistency when authoring a page. It’s clean, has clear calls-to-action, and doesn’t require default text to know they’re on the page. By adding a few options to the edit bar configuration, you can click on the “Cut” button and easily move them around the page.
To add the edit bar to your component, create an ‘cq:editConfig’ node of type cq:EditConfig under the component. This link shows the various properties to add to the component. Adding cq:actions to the properties allows functionality to move the component around the page.
The table below from the CQ documentation shows the different options for the edit bar.
|text:<some text>||Displays the static text value <some text>|
|–||Adds a spacer|
|edit||Adds a button to edit the component|
|delete||Adds a button to delete the component|
|insert||Adds a button to insert a new component before the current one|
|copymove||Adds a button to copy and cut the component|
Here are some typical properties to allow editing, moving, and deleting the component from the page. You must have “insert” selected if you want to move the component around the page and replace it between two components.
Additional Tip: Remove the Wrapper
There is an easy way to force CQ to remove the wrapper when in any mode but EDIT mode.
Add the following snippet at the bottom of your component: