XF 2.2 Text editor and attachment manager improvements

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.

Accept third party cookies

 

[Alpha1]

How do they post asking how to post if they don't know how to post?

Well exactly. That is why it baffled us for quite a long time. But it kept on coming multiple times a week so we tried to find out what people really wanted to know. The answer was that they needed step by step instructions on what they should do on the site. Where to post an introduction, how to reply to a thread, how to use and post to a subforum and what the purpose of it is, what a thread topic is, how to use the functionality, etc.
So we created a template reply that explains all. We mostly use it in our helpdesk.

TL;DR Users increasingly don't grasp the concept "Forum"

This exactly.

 

[beerForo]

Yup.

And what about those that "replied" to a thread by clicking "report"

 

[nocte]

And what about those that "replied" to a thread by clicking "report"

yeah! That's why it is a good idea to change the link text to "report rules violation" or similar.

People using the conversation system to ask how to write a "private message" are also very common

 

[beerForo]

yeah! That's why it is a good idea to change the link text to "report rules violation" or similar.

People using the conversation system to ask how to write a "private message" are also very common

Flag is a good alternative. Tho, why report is confusing is beyond me.

 

[Mendalla]

We have had people post conversations and profile posts thinking they were posting threads. Been a while though. Our board consists mostly of people from a previous one that we unofficially replaced so most understood the basics (even though the previous board was a hot mess in terms of software).

 

[craigForo]

Simply amazing.

Forward thinking with functionality, meanwhile the competition is fixing bugs and working on a new facade.

 

[RallyFan]

As suspected, each one gets better and better. I can't wait to see what the future HYS's bring.

Horizontal line is such a basic thing, yet so powerful to break up quoted articles and your opinion on them. That's gonna be huge.

I just hope it works nicely on mobile with the toolbar and buttons as I found editing the current buttons was hit and miss.

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.

I tend to agree there. Unless things are right in fronf of a user, it can be an issue. One must always be keeping in mind that users hate change and anything major can turn them off e.g "I can't find the blah blah button anymore!!!". For us tech types we love new, shiny, exciting, and cool stuff, and whilst it makes sense to implement, users rarely understand that.

I'm finding that out with going from 1.5x to 2.1x.

That said these changes are all welcome, and even moreso an exciting sign of things to come

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.

Totally agree here. Better table formatting rather than it spreading full width, and with easy ability to centre entire fields rather than one by one would go a huge way towards its usability. In addition scaling towards mobiles, because more and more people are using mobiles for view forums.

 

[BIG LLC]

These look like nice changes.

Have fixes been implemented for the issues reported with posting on mobiles? Cursor jumping around and the like?

 

[inzanty]

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.

View attachment 227942​

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.

How about Drag-and-Drop its working?

 

[Kintaro]

Is it possibile to see it in action on iOS/Android?

 

[Max]

Please do not change the default.
We do have linking enabled as users vocally demand that, but we discourage it as it causes legal and technical issues.

You get more legal trouble when your users upload copyright images to your server other than just linking it.

 

[Kirby]

You get legal trouble in both cases, but usability is usually better for uploads

 

[Max]

Given the transient nature of content on the web, I'd always recommend that people attach their images rather than hot-link them unless there is a really specific reason to do otherwise, so we won't be changing the default.

Linking is lot less legal trouble than people uploading copyright images directly to your server. Hosting copyright images is a serious crime than linking
People tent to upload everything they see on the web thinking this is like facebook. But we don't have a huge legal team like facebook
And don't want to pay for server space to commonly shared images on the internet. I see over 70% image attachments are such iteams.
It's huge problem in a big forum
Please make a way to change the default to linking. You can keep either uploading images or linking as default for xenforo as you wish.

 

[Kirby]

Linking is lot less legal trouble than people uploading copyright images directly to your server.

It ain't. If you do not enable the image proxy, you will get issues with mixed content, if you do enable the image proxy (which is basically a must), every "linked" image is copied to and served from your server without this being done explicitly by your users
So unless all users "linking" images have the necessary rights to grant you a license to host & distribute the images, every image "linked" will be an illegal copy.
And that's even without taking privacy issues (=> GDPR) into account.

 

[Max]

It ain't. If you do not enable the image proxy, you will get issues with mixed content, if you do enable the image proxy (which basically is a must), every "linked" image is copied to and served from your server without this being done explicitly by your users
So unless all users "linking" images have the necessary rights to grant you a license to host & distribute the images, every image "linked" will be an illegal copy.
And that's even without taking privacy issues (=> GDPR) into account.

Enabling image proxy gave us loads of DMCA take downs.
We do not enable image proxy and have http image links warning mod for users.
All the image hosting sites and responsible sites have https now, so users have Zero problem with it.
And no more DMCA take downs or mixed content warnings.

 

[Hoffi]

Whow, great Addition. And I just got ideas regarding the AddOn I am building. Thank you!

 

[Masetrix]

The answer was that they needed step by step instructions on what they should do on the site. Where to post an introduction, how to reply to a thread, how to use and post to a subforum and what the purpose of it is, what a thread topic is, how to use the functionality, etc.
So we created a template reply that explains all. We mostly use it in our helpdesk.

... and make sure that the "help" can be found easily. Not like in the standard that the link to help is at the bottom of the page, for normal people almost nowhere.

 

[Zentral]

Hello,

Will this issue be fixed?:

I'm sorry to revive this thread but I noticed the same inconsistency with the image bb code tags happens with color and size format tags when they are copied on the clipboard. Any formatting past the bold, italics, underlined tags is lost when copy pasting into the editor.
Is there maybe a way to fix this the same way the image BBCode tags were fixed? Maybe a workaround like the one @Mike provided earlier will also work for the formatting tags.

Seems directly related to Froala and how XenForo handles the editor with js, as @Mike found a workaround for part of the issue explained in the thread.

Regards,
Zentral.

 

[021]

Looks better

It's not 2002 any more

.seriously? And not 2010 Such gradients went out of fashion back in 2010. The button bar looks very outdated due to the gradient.
Now it’s much better, because the bar is made in a flat style.

Just compare how fresh the editor looks without a gradient and how it looks with it.

 

[Zentral]

.seriously? And not 2010 Such gradients went out of fashion back in 2010. The button bar looks very outdated due to the gradient.
Now it’s much better, because the bar is made in a flat style.

Just compare how fresh the editor looks without a gradient and how it looks with it.
View attachment 227992

Hello,

Not only I agree, but I would also say that if we really want to be up to date with 2020 standards, the editor in general should be customizable by now. Adding some styling to it would be amazing so the people who likes the (ugly) gradient version could have it and those who prefer a minimalistic aproach could achieve it easily too.

Regards,
Zentral.