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

Additions to the editor (RTE) we've made

mcollinge Nov 7, 2014 5:57 AM

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.

The rest of the additions sit under the Create icon.

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).

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

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

Allow easy pasting of Product 360 snippets into content.

These all use render macros.

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

nilsheuer Nov 7, 2014 6:22 AM (in response to mcollinge)

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)
Like (2)

Actions
- Re: Additions to the editor (RTE) we've made
  
  mcollinge Nov 7, 2014 7:17 AM (in response to nilsheuer)
  
  Sounds good to me. We didn't use !-App's was that they're a bit more hidden away, and needed to be installed by the users.
  
  Like (0)
  
  Actions
Re: Additions to the editor (RTE) we've made

mattdickens Nov 7, 2014 7:21 AM (in response to mcollinge)
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.

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

An example snippet:
Like (1)

Actions
- Re: Additions to the editor (RTE) we've made
  
  mcollinge Nov 7, 2014 7:34 AM (in response to mattdickens)
  
  Like you said, you could achieve that by running a piece of JavaScript on each page that detects it and reformats the DOM/Table into the tabbed panels. We'd do this via a plugin that we've got.. it's a dead simple one that includes a few JavaScript files on each page; 1) A set of helper functions that are available across the site, 2) a page load file that contains a $j.ready() so that it can fire on each page. It's minimal and non-invasive customisation, since it's just JavaScript at the end of the day, and doesn't impact upgrades.
  
  To make it more user friendly you could do an RTE alteration to give them a custom dialog to help them through the creation process.. that'd mean they wouldn't need to know the special tag names to use. Or you could point them at a pre-baked snippet, like you mentioned.
  
  Like (0)
  
  Actions
  - Re: Additions to the editor (RTE) we've made
    
    mattdickens Nov 7, 2014 7:47 AM (in response to mcollinge)
    
    hmm - I tried it as a plugin but it was too slow to load the html such that I saw the original page for a second before the injected html transformed it. I therefore thought I'd need to go with script in the theme.
    
    Like (0)
    
    Actions
    - Re: Additions to the editor (RTE) we've made
      
      mcollinge Nov 7, 2014 8:01 AM (in response to mattdickens)
      
      Yeah, you would see it as a table just before it transformed it. The render macros, run at the server side, so that's a plus point for using them (and they go into email notifications too.. depending on what you want to go in the email).
      
      Our Design Center pages use a fair amount of DOM manipulation to achieve a different look from standard docs.. I don't think they look too bad whilst they re-organise themselves.
      
      http://www.element14.com/community/docs/DOC-68898
      
      Like (0)
      
      Actions
      - Re: Additions to the editor (RTE) we've made
        
        mattdickens Nov 7, 2014 8:43 AM (in response to mcollinge)
        
        I'll have to look into the render macros and see how I can use those to achieve this. Any pointers?
        
        Like (0)
        
        Actions
        
        Re: Additions to the editor (RTE) we've made
        
        mcollinge Nov 10, 2014 1:54 AM (in response to mattdickens)
        
        Yeah, the sample Jive plugin called Jive-Fu has an example Render Macro;
        
        https://community.jivesoftware.com/community/developer/plugins/blog/2012/03/29/do-you-know-jive-fu
        
        Like (1)
        
        Actions

Go to original post