XF 1.2 A New Editor and Much Much More

I've never hidden my frustrations with XF 1.1's editor (which is based on TinyMCE). In 1.2, we have entirely removed the existing editor and replaced it with a new one based on Redactor:

So obviously this looks quite a bit different--and I know plenty of people didn't like the 1.1 editor look--but the functionality is there. So what advantages do we have? Well there are various ones:

• Much lighter code and faster to load. Redactor depends on jQuery and benefits from that.
• When pasting, most formatting is removed (though some is kept). However, if you're pasting from one XenForo editor to another (or within the same one), all formatting is maintained.
• White space is maintained for code tags when pasting from Webkit. This was an annoyance for a number of people here, myself included.
• The overlays are now consistent with overlays elsewhere in XF.
• Generally, from my perspective, the code is much more adaptable to our needs.
• A bunch of other things I'm going to detail below...

For the most part, the editor simply shouldn't get in your way so in a sense, you shouldn't actually see much different for the average post.

How about some other bigger changes?

Pasting images
If you use Chrome or Firefox and have an image in your clipboard, you can simply paste it into the editor. It will automatically be uploaded as an attachment if possible. If the upload is successful, this works exactly like uploading an image and then clicking the "full image" button.

Note that in Chrome, the image data must be in your clipboard (such as from pressing print screen). In Firefox, you can either have image data or you can copy a file that's an image and paste that.

Drag and drop uploading
Provided your browser supports it, you can now drag files into the editor to upload them:

@User tagging
While not directly related to the editor change, this is probably the best time to mention it. You can use @Mike style syntax to tag users in a post:

Tagged users will receive an alert when they're tagged.

You can obviously turn off tag alerts, but as an admin, you can also limit the maximum users that can be tagged per message as a permission. (So you could disable it for registered members and only allow premium members to tag, for example.)

Alternative smilie inserting approach
The smilie dropdown really didn't work well with a lot of smilies. Clicking the :) button will now do this:

This is now making a call to get the smilies and lays them out with a template. This opens up the possibility for more organization options (though nothing has changed as of this message).

Auto save drafts
While you are typing a message, every X seconds (currently 60), a draft of your message will be saved. If you reload the page later, your message will be automatically re-shown. Drafts will be automatically pruned over time.
Each draft is associated with a particular piece of content, such as a thread, forum, or conversations. A draft reply that you start working on in thread 1 will not be shown to thread 2 and so forth.

Display if messages have been posted since you started your message
Tied into the auto-saving, when you're writing a reply to a thread, we will check to see if any new messages and display a note if there are. You can then display those new posts without reloading the page.




Oh yeah, one more thing on the editor, it's fully responsive:

That should be a hint...



So, when are we going to see this all? Well, we're hoping to have 1.2 running here on XenForo.com in early June. The initial beta release will follow, based on how well the time on 1.2 goes. The final release of 1.2 would be wholly dependent on how the beta process goes.

 

[Mike]

End of the table stuff guys or move it off into a suggestion. It's not pertinent here as whether or not it's implemented has very little to do with the actual editor being used.

 

[Despair]

Absolutely awesome, I didn't expect to see all these features at once, and every feature is one that I need. People were mentioning about all the back end changes only, and now we have some front end stuff. Time to learn some Redactor, and I'll have a lot of stuff to change, but well worth it.

Auto save drafts
While you are typing a message, every X seconds (currently 60), a draft of your message will be saved. If you reload the page later, your message will be automatically re-shown. Drafts will be automatically pruned over time.
Each draft is associated with a particular piece of content, such as a thread, forum, or conversations. A draft reply that you start working on in thread 1 will not be shown to thread 2 and so forth.

There is an addon for auto save drafts that stores your messages in the browser profile, which has advantages and disadvantages. The nice thing is that it's instant so if a thread has multiple pages I can do multiquoting across multiple pages of the thread. Maybe it would be just as easy to trigger the auto save draft when clicking the reply/quote button and you'd be able to multiquote across pages?

@user tagging

Is there a style property/css class to target these user tags?

 

[DRE]

I noticed that it's gray, I wanna put a slight blue tint on mine. How easy is that? Will that be added to the Styles Properties settings, (which option does that with TinyMCE) or do I have to do it through CSS. Speaking of Styles Properties editor, will the text editor Style Properties option be changed greatly for this new edition?

 

[Forsaken]

Absolutely awesome, I didn't expect to see all these features at once, and every feature is one that I need. People were mentioning about all the back end changes only, and now we have some front end stuff. Time to learn some Redactor, and I'll have a lot of stuff to change, but well worth it.

There is an addon for auto save drafts that stores your messages in the browser profile, which has advantages and disadvantages. The nice thing is that it's instant so if a thread has multiple pages I can do multiquoting across multiple pages of the thread. Maybe it would be just as easy to trigger the auto save draft when clicking the reply/quote button and you'd be able to multiquote across pages?


Is there a style property/css class to target these user tags?

I'm hoping that there is extensive style properties created for the new editor.

The fact that there are essentially none for the current one is a pain in the ass when you have to design a dark style as you then have to do a ton of editing to get it working and displaying properly.

 

[0ptima]

Oh..and how the HELL are we going to write a forum user manual for all this (and all the other 1.2 goodies)??!

Good question, maybe crowd source?

 

[Pereira]

I'm impressed. This is looking like a great update.

My only concern is that new features which you would expect in a x.x release are being released in a 1.x release. Although I trust the developers, I hope the change in editor isn't a temporary fix for a big problem. The editor is one of the most essential parts of a forum in my opinion and I hope it's done right here. It wouldn't be nice to have to change editor in 12 months time for example.

I hope the new editor won't lose the appeal and ease of use of the current editor, but as long as it's better, has less bugs and is being supported by it's own development team then I'm fine with it.

 

[DRE]

I'm hoping that there is extensive style properties created for the new editor.

The fact that there are essentially none for the current one is a pain in the ass when you have to design a dark style as you then have to do a ton of editing to get it working and displaying properly.

cosign!!!!!

 

[Arkshine]

Mike, any thoughts you could share about TinyMCE v4 ? Before I was thinking Redactor was really cool, but after reading things here and there and looking at the latest TMCE ; I would tend to say this latter seems definitely way better. Both are fine (even though I would prefer TMCE ), but I'm curious if you have considered it and if yes, what are the points it has made you to implement Redactor ?

 

[tyteen4a03]

I'm impressed. This is looking like a great update.

My only concern is that new features which you would expect in a x.x release are being released in a 1.x release. Although I trust the developers, I hope the change in editor isn't a temporary fix for a big problem. The editor is one of the most essential parts of a forum in my opinion and I hope it's done right here. It wouldn't be nice to have to change editor in 12 months time for example.

I hope the new editor won't lose the appeal and ease of use of the current editor, but as long as it's better, has less bugs and is being supported by it's own development team then I'm fine with it.

Platform.Major.Minor. This is the release versioning scheme xF is using.

 

[zagman76]

Only bad thing about this is the amount of DMCA takedown notices going up due to forum hosted images.

I don't allow uploads on my forum from users - too much of a legal liability, not just for DMCA reasons.

 

[Klaas]

Before I was thinking Redactor was really cool, but after reading things here and there and looking at the latest TMCE ; I would tend to say this latter seems definitely way better.

Not sure how you could possibly come to that conclusion. Most advanced coders here agree that TMCE is a nightmare, regardless of version AFAIK.

 

[Arkshine]

Sure, I understand it misses some details. But it's irrelevant, of course, I've tested and checked both, but that's not the point. I'm just curious to hear a developer's opinion about it, that's all.

 

[mauzao9]

One bad thing about this Redactor far I saw in it's examples it's how we can't easy colour several parts of one topic with the same topic. Far I saw we need to click and select over and over again until the formatting is done.
And it does not allow pick colours by the HEX?

But the good side for me, Smilies listing now more friendly.

 

[DRE]

I don't allow uploads on my forum from users - too much of a legal liability, not just for DMCA reasons.

Yeah I'm sensing this new editor might be a big headache for me cause of that reason.

 

[Jeremy]

How does an editor have any impact on DMCA notices?

 

[0xym0r0n]

Yeah technically it's a permission, right? Just turn off permission to upload specific things lol

 

[mauzao9]

How does an editor have any impact on DMCA notices?

The fact it allows easy upload files into your server. In TinyMCE most people hosted images in other sites or linked them, with this they can simply drag and drop and host everything in your server. Even Copyrighted content.

If there is a permission to turn such thing off, or follow the Upload File Permissions, it's good.

 

[Jeremy]

You can set specific attachment types and its a permission to allow uploads already in v1.1.

 

[0xym0r0n]

Exactly. I don't see why XF would do away with something already implemented... at least in this situation.

 

[kkm323]

I will be one of the first to upgrade for this feature only
great work guys and I never regret importing my forum to xenforo