Spacing and line breaks in WYSIWYG editor

(Ryan Archer) #1

Just using the new WYSIWYG editor in Squiz Matrix 5.3.

How is it possible to put spacing in the page without relying on padding/margin of the elements.

 

Our content authors just want to insert empty lines to space out content and the editor just strips the code out. We have tried:

<p>&nbsp;</p>
<br><br>
<div class="spacer"></div>

The text editor just strips this code out. Also inserting embedded videos (YouTube/Vimeo) is a problem as well. It would appear that these kinds of things can only be done in Raw HTML mode.

This was not happening in the v4xxx WYSIWYG text editor.

 

This is happening when using both Google Chrome, Edge and IE11 browsers. Other web browsers don't  seem to like _admin interface at all.

 

Does anyone have any good solutions for this?

(Nic Hubbard) #2

Are you talking about the Edit+ editor, or the old WYSIWYG?

(Ryan Archer) #3

I am talking about the WYSIWYG editor we are able to use in both Edit+ and the admin interface.

The text editor with the single ribbon bar of buttons and the contextual menu that appears when text is highlighted.

(Peter McLeod) #4
Hi
 
I think your best option is to actually use css for this (padding/margin). Why not create some helper classes that can be used for this rather, using elements. For example, we have set of css helpers such as .pad-0, .margin-0, .pad-left-10 etc etc (with values to whatever you need/expect to need) that can be used on the fly to adjust content layout. Should be just as easy for your editors to apply the class to the element they want to space. Not sure if the editor can have custom classes applied the users can select from rather than have to type in thought.
 
Other things you could try:
 
Try overriding the user group setting 'Filter Front End User Input' to do not filter.
 
Include it as a keyword or a snippet, eg store the html in metadata somewhere (preferably) a single asset and have it included dynamically. could do similar with YouTube/Vimeo embed code if it's an issue using raw html types.
 
Thanks
Peter
(Ryan Archer) #5

Thanks Peter,

My fallback was to use the custom classes as you suggested. Already had a short conversation with my colleagues about it. Was just a bit reluctant to do so as our content editors are so used to using MS Word, I can just see myself repeatedly telling them to type in the margin/padding classes in the text editor.

 

Can you tell me where i can find the user group setting 'Filter Front End User Input'?

I like your idea about using the metadata. We have done that before for embedding some videos in other areas, so we can extend on that piece of functionality.

(Bart Banda) #6

You could use the new class picker feature in 5.3 to add some predefined classes that the editors could just choose from from a list? That way they can select the element they want more bottom margin on and select the "Extra bottom margin" style and that's it.