XF 2.2 Text editor and attachment manager improvements

1596357822277.webp
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​

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Click to expand...

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.
 

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.
 

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)
 

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.
 

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
 

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.
 

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
 

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 👇🏻
 
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.
 

Similar threads

WoodiE
Not a bug Text editor and toolbar missing from MSN browser
Replies
11
Views
2K
WoodiE
WoodiE
Back
Top Bottom