1 Reply Latest reply on Mar 16, 2012 2:11 AM by hypnotec

    Need to remove additional markup around components in preview/ publish

    Shelly Goel

      Hi all,

       

      I have a quick question concerning the cq:noDecoration property on a

      component that - if set to "true" - removes the <div> markup from a

      component.

      I need this behaviour because the markup produces invalid HTML. But

      sadly when removing the wrap the component can not be selected any

      more?

       

      How can i create a component that has no additional markup wrapped

      around it but can still be edited/selected?

       

      It would be ok to have additional markup in edit mode but not in

      preview mode.

       

      Regards,

      Shelly

        • 1. Re: Need to remove additional markup around components in preview/ publish
          hypnotec Adobe Employee

          how does the markup produce invalid HTML? i am interested to see the validator results for your specific case.

           

          nevertheless, the WCM Editables (hover frames for opening the edit dialog) require a block element to wrap themselves around per paragraph or component, otherwise they don't know where to attach. this is usually done with the auto-generated div. disabling the decoration effectively disables the editables.

           

          would it help if you could set your own HTML decoration? using a component's cq:htmlTag node (with e.g. a property cq:tagName = "myhtmlelement" [e.g. h1] and "id" or "class" to set desired style reference) you can maybe produce HTML that conforms to your needs, while at the same time serving as the required surrounding block level element for the editables.

           

          the ultima ratio is to manually call the CQ.WCM.edit widget function to create an editable within your component's JSP within a block level element:

           

          <div class="blah">

              ... my magic ....

           

          <script type="text/javascript">

          CQ.WCM.edit({"path":"/content/geometrixx/en/jcr:content/par/image","dialog":"/libs/foundat ion/components/image/dialog","type":"foundation/components/image","csp":"homepage|page/par |parsys/image|parbase","editConfig":{"dropTarget":[{"id":"image","name":"./fileReference", "accept":["image/.*"],"groups":["media"],"params":{"./sling:resourceType":"foundation/comp onents/image","./imageMap":"","./imageRotate":"","./imageCrop":""}}]}});

          </script>

           

          </div>

           

          replace the configuration properties of the .edit function above as needed for your component. see the widget API documentation at [0] for the .edit function.

           

          you can find various different samples at e.g. (or by looking at the HTML source of an author geometrixx page):

          /libs/dam/components/video/profile/profile.jsp

          /libs/cq/replication/components/staticagent/staticagent.jsp

           

          [0] http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.WCM

          1 person found this helpful