8 Replies Latest reply on Nov 10, 2014 1:54 AM by mcollinge

    Additions to the editor (RTE) we've made

    mcollinge

      Hi Matt Dickens, this is what we discussed last night at the UK User Group.. posting here so that you get visibility + it might be useful to other people thinking about the same kind of things. These changes are live at element14 Community.

       

      We extended the RTE to include a Symbols icon.. this is the only extra item you can get into the RTE without invasive customisations.

       

      rte1.png

       

      The rest of the additions sit under the Create icon.

       

      rte2.png

      Create nice (standardised) buttons in pieces of content that help call attention to a particular action. Limited JavaScript can be used in there too (admins only).

       

      rte3.png

       

      Add product links to content (linked it up nicely to our store websites).

       

      rte4.png

       

      Conditional content lets you show pieces of text for a particular country/region.. useful for terms + conditions and that kind of thing.

       

      rte5.png

       

      Allow easy pasting of Product 360 snippets into content.

       

      rte6.png

       

      These all use render macros.

        • Re: Additions to the editor (RTE) we've made

          Hi Matt!

           

          This is pretty sweet. I guess Jive's answer would be to create these are !-App actions, but the UX of embedding it into the RTE seems a lot more natural.

           

          I hope you don't mind if I file this as an enhancement request (embedding !-Action as an RTE action)

          • Re: Additions to the editor (RTE) we've made
            mattdickens

            Hi Matt

             

            Thanks for that and as Nils says, this is pretty cool. I partcularly like the button and conditional content additions. In our organisation, I see staff wanting the ability to create sections/twisties and tabbed tables (old school I know but good space savers), accordians and all manner of navigation/menu structures.

             

            I'd like to achieve these by a simple customisation similar in approach to Ryan Rutan's Managed snippets plugin except the snippets will live as .html files containing the JS and css needed in a group's statics folder rather than be added/edited via the admin console. This will allow responsibility for review and approval to be handled by an approved business/technical staff member who doesn't need admin rights to the system (we keep the number of people with admin access to a minimum).

            The basic idea is as below but I've only found time to code it as a Chrome extension so far despite expecting it to be pretty straightforward to write for Jive.  The key for us is that its not a deep customisation as our sponsors do not want us to impede our upgrade path and incur high re-development costs of these customisations. I think this is pretty light touch with a call to a script library in the theme and then the rest being stored as files in the statics folder. Do either of you see any issue with this approach? The main issue I see is ensuring the scipt loads, runs and injects the code onto the page in a timely manner. I plan on using tables populated in a specific manner as the building blocks for some of the features and these will then get read and transformed into the required ui features. It's not as elegant and as user-friendly as including the button in the RTE but it gives us an unlimited number of html/js snippets to add to our group overview pages and documents. Interested in your thoughts.

             

            1. - Once DOM is available, scan page for snippet calls and populate array of calls.
            2. - If any snippets found:
            3.   - Pull in [business/tech user-maintained] snippet configuration xml containing snippet name and corresponsing path to .html files
            4.   - Step through snippet occurences array comparing against available snippets in config
            5.   - Where there's a match, inject html (actually JS and CSS) onto the page.

             

            An example snippet:

             

            Capture.PNG

            tabbed table1.png