XF 2.2 Text editor and attachment manager improvements

1596357822277.png
Central to the experience of interacting with forum software is the interface through which visitors will create their content. This is usually done through the text editor and attachment manager, so keeping these systems fresh and inspiring is very important to us.

From the outset, XenForo has employed a rich text editor (RTE) to allow visitors to compose their messages in a what-you-see-is-what-you-get (WYSIWYG) interface, so that bold text is shown emboldened, large text is appropriately large etc., rather than working directly with the underlying BB code in order to take the guesswork out of message editing. We've always built a custom implementation on top of what we consider to be the best-in-class tools, and through the life of the XenForo we have already made major switches to completely new libraries twice, moving from TinyMCE to Redactor and then to Froala.

With XenForo 2.2, we have made another major change to our implementation. We continue to build upon Froala, but we have improved every aspect of our system.

We'd love you to read what we've put down here, but if you're pushed for time...

tl;dr

 

XenForo

Company info
Staff member

Looks better

The first thing you will notice is a fresh new look. We are fed up with editors that look like a copy of Microsoft Word chucked onto a web page. The appearance always sticks out like a sore thumb, and visitors are more sophisticated in recognising RTE controls now than they were in years gone by. It's not 2002 any more, and people know that B I sitting in proximity to a text input area will be controls that operate in a familiar fashion.

So, the controls are now far less in-your-face and are more subtly rendered. We've dumped the appearance of a distinct toolbar, and instead our new editor blends the toolbar seamlessly into the editing area for a far less jarring visual that responds better to any custom styling your site may employ.

1 rte.png

We've also updated the iconography for some of the controls in order to better fit user expectations.
 

XenForo

Company info
Staff member

Fits better

One thing that was a pet hate of mine with our previous editor implementation was the way that editor controls frequently wrapped into multiple rows on narrow devices.

This seemed like a nonsense to me, as those working with small, usually mobile devices, are those most unlikely to actually want to use the full features of the editor - people who want a deep editing experience will usually want to do so with a decent sized display and a proper keyboard rather than squinting at a six inch display and pecking at an on-screen keyboard.

The previous editor allowed us to define different button layouts for different screen sizes, but this could only go so far to improve the user experience and had the result that small devices could either show a nasty wrapped toolbar, or miss out on controls entirely.

2 narrow width.png

With 2.2, the concept of different button layouts for different display sizes still exists, though we have tweaked the resolution boundaries to better fit today's devices, but a more important change is the new concept of button groups.

Controls can now be assigned to one of four groups. Each group can have any number of controls attached, and can independently define the number of buttons visible before a 'more' gadget is shown. Clicking the 'more' gadget unfurls a secondary toolbar underneath the main controls, in which the remaining controls from the group are contained.

2 more text.png


2 more para.png

For example, in the default layout, you may want to show the B I buttons prominently, but to keep U S etc. in the overflow area along with other less frequently-used buttons. More on button layouts later.
 

XenForo

Company info
Staff member

More convenient

When you first click into the new editor, or when you enter a blank line (by pressing the return key, for example) the new Quick Insert (QI) menu appears on the left side of the editor.

3 qi prompt.png


Clicking the QI menu button will unfurl a collection of controls to allow the quick insertion of a variety of items that are commonly used on new lines, such as images, lists, tables, quotes and others.

3 qi buttons.png

The QI menu is such a time saving gadget, you may find that you rarely reach for the main toolbar.
 

XenForo

Company info
Staff member

Button manager

The layout of controls for the RTE has been customisable with a convenient drag-drop interface through the admin control panel since XenForo 2.1, but with XenForo 2.2 and the additional complexity of button groups and their associated options, we have overhauled the button manager too.

The four button groups are represented as individual drag-drop targets in the editor, and controls can be dragged around in these, between each other and from the control tray at the top of the screen.

4 btn mgr.png

Each button groups has an associated menu, which contains options to control the number of buttons shown before the 'more' control is inserted, and left or right alignment of the group.

4 context menu.png

In a change to previous behaviour, it is now possible to insert controls more than once, so you could place the 'remove formatting' control into both the text formatting and paragraph control groups if you wish.

Finally, to take the guesswork out of how your finished layout is going to look, we have a live preview of the final editor layout that automatically updates whenever you make any changes to the layout or options (it's easier to visualise this in the accompanying video)
 

XenForo

Company info
Staff member

Previewing

Another feature that's been on our radar to overhaul for some time is the message preview system.

With XenForo 2, the preview (the fully-rendered preview output of the editor's contents) was placed below the main editor box and was not dismissible once inserted. This had the effect of moving the supplemental composition controls, such as tag editing, watch options and attachment controls. If a long message was previewed, this would involve a lot of tedious scrolling backward and forward to work with attachments in particular. This had to change.

XenForo 2.2 introduces an entirely new preview method, using a tab built into the editor itself. Clicking the preview control will switch the editor to preview mode, disabling the editor and displaying the rendered final content in its place. Clicking the preview control again, or attempting to click on the editor tab will immediately deactivate preview mode and return you to where you were in your editing.

5 preview.png

This change has a huge effect on the previously unwieldy nature of the composition process, and makes for much more pleasurable editing.
 

XenForo

Company info
Staff member

Attachment interface

Similarly to the way in which the old preview interface forced a lot of vertical scrolling, the previous implementation of the file attachment system listed attached files in a stack of horizontal strips below the editor (and the preview display).

On a post with a lot of attachments, it was possible to stack so many attachments that the text editor itself would scroll off the top of the screen, so clicking the insert control on an attachment would be an exercise in clicking blind, as it would be necessary to scroll up after inserting an attached image in order to check it had been placed correctly.

2.2 changes all that.

6 attach list.png

We have switched to a stylish new square appearance for attachments that allows a better look at image thumbnails and makes better use of the available space. Only the most important information about an attachment is shown by default, but a hover action reveals additional data.

6 attach hover.png
6 attach insert.png

These square attachment units stack horizontally within their own scrollable container, so it is no longer possible to have the editor itself scrolled off-screen when working with attachments.

There is also a new multi-selection interface for attachments, which allows insertion or deletion of multiple items in just a few clicks.

6 attach multiselect.png

Finally, non-image attachments now have a selection of file type icons that are automatically applied based on the type of file being attached, so give better visual feedback as to what kind of file you're looking at, without having to scrutinise the file name.

6 attach non-thumb.png
 

XenForo

Company info
Staff member

New rendering abilities

One major change you are bound to notice in XenForo 2.2 is that hitting Reply on a message now includes a rendered version of the quoted text in your editor, rather than seeing the raw [QUOTE] tags.

7 quote rendered.png

We're having a push to remove as many BB codes from the view of users as possible, and this one has been a long time coming.
 

XenForo

Company info
Staff member

New default BB codes

We've added a smattering of new BB codes to reflect some of the formatting improvements that came with XenForo 2.1.

Previously, we allowed images to be aligned, or floated, left or right, but this left the formatting of the remainder of a post somewhat up in the air, as you may not have known the destination screen width, in which case you could have ended up with new sections being unintentionally wrapped around images... I'm sure you've encountered it.

So, 2.2 introduces HEADING tags and HR tags, both of which add float clearing to their HTML output.

We figured that the semantic benefits of allowing users to employ HEADING tags would probably be a nice-to-have, too.

8 float clearing.png
 

XenForo

Company info
Staff member

In conclusion

Implementing all these changes has been a fairly major undertaking, and those who watch the accompanying video with eagle eyes will no doubt spot a smattering of outstanding glitches, but we're pleased with how it's coming together and have confidence that any little gotchas will be squished by the public beta release.

We hope you like the changes and improvements we've made, which we believe will enormously improve everyone's enjoyment of authoring content for XenForo. Do let us know what you think 👇🏻
 

NealC

Active member
Great job, I watched your video but have a few concerns. As a software developer I understand "discoverability" and I'm concerned that when editor tools are out of view they won't be discovered by some of the less tech savvy. The UI presented will require me to make a post to the forum to explain where to find things as it's not discoverable or intuitive. There is a reason Microsoft came up with the Ribbon UI and I think that would be a better option vs. the slim option you chose.

The other issue I've had is with limited table formatting support. For example I want to put a single row two column table in my signature to have an image left and content right. The table wants to size 50/50 so I can't use it. Your video demonstrated an alternate way I need to explore but I just thought I'd bring up the table bbcode limitations.

Great work but I'd prefer a Ribbon UI again to make sure all formatting and functionality was discoverable. I'd also like to see popup format toolbars on text selection.
 
Top