WYSIWYG Improvements

Clients have been giving us feedback since moving away from BC how much harder the WYSIWIG Editor is to use. Obviously some of this is just that people don’t like change, but it’s a good opportunity to collate and conquer.

I’ll start:

  • Content added to WYSIWYG makes the code editor v.messy.

  • Content pasted from a word document, an email, another website etc… into WYSIWYG editor turns into a complete mess. (We’ve tried to suggest cleaning tools like https://htmltidy.net/ but from their perspective, it’s an unnecessary step, the website should just do it for them.)
    Video for reference https://www.screenpresso.com/=7gBce

  • Formatting tags are hard to find

    Alternate Options

1 Like

Great ideas @lee.relianceit. I personally haven’t had any similar feedback, but it might just be that my clients aren’t using it much, or they might just be doing simple things.

The rare occasion I do use it, mainly during training, I think the UX could be improved.

I wish the html styling options were highlighted like they are in your first example and the font colour, font family and font size were buried behind a menu. I would much prefer clients use the html elements I’ve styled than adding custom styles.

As said, I don’t have a lot of experience, but are the ‘clean’ functions not working for your clients when importing?

I agree that the clear formatting button should remove all inline styling and reset to a p tag.

When applying html elements to text with imported formatting, that is a bit more challenging. I think the issue is that the text with the imported styles end up inline, so change the html element style doesn’t create a visible change. So if imported text had a specific font size, then changing from an h1 to h2 won’t visibly change the font size, because after the the change it would be an h2 element with the same font size. Then when you clear the formatting the inline font size is removed and the h2 font size takes over. It’s a bit confusing. I’m not sure what the solution to that would be. Everybody might have their own expectations of what priority they want those to have. Perhaps having a button that clears all inline styles, so just the elements are kept. That way lists would be lists and headings would be headings, but there would be no inline styles to override site styles.

I would suggest that the default for copying in text would be keep html elements, “keep formatting”, discard inline styles (i.e. style=""), then there would be a button to remove all styles/html elements (i.e no elements, just import as raw text block), “convert to raw text block” and finally there would be a button to “retain origin formatting and styles” which would include inline style attributes.

I think the default behavior of assigning inline styles to text copied into the WYSIWYG editor, which override system styles, is breaking users’s expectations. They don’t know that they are importing something invisible.

The other solution would be to have some kind of display of the the styles that are assigned to any piece of text. For example a text tip that displays all the inline styles and allows users to change inline style i.e. a tool tip with a list of all inline styles with fields for the values that can be changed.

I have had similar feedback. Also when you try to insert an image in the WYSIWYG editor, it changes all the html data and adds content like - <div class="video-item iframe"><span class="fr-video fr-draggable" contenteditable="false"><video class="fr-draggable" controls="controls" width="640"> around all images and videos. It also changes the formatting of the html data.

This is the most important aspect for clients, that they are able to easily make changes to the content. I have some customers saying that they are finding it difficult to use too and most clients have mentioned the warning message when you switch between WYSIWYG and HTML.

I’d almost rather anything pasted in WYSIWYG is just stripped down, then they can style it from there.