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:
ss-2013-05-17_12-21-49.webp


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:
ss-2013-05-17_12-37-47.webp


@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:
ss-2013-05-17_12-39-42.webp

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:
ss-2013-05-17_12-42-10.webp

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:
ss-2013-05-17_12-49-20.webp

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.
 
I mean actual color icons:

wysiwyg-classic-icons.jpg

(obviously I would rescale them)

I do not understand the fascination with black-and-white toolbars. Office 2013 repulses me for this reason.

If the system didn't change from the official Redactor, you will have to have two set of icons: one for normal display, one for "retina" display (higher resolution).

You have to put the HTML code *inside* the parsehtml bbcode, and then any other bbCode inside parsehtml tags will not work. It is an extremely degraded experience compared to just allowing HTML and bbCode to mix and match within posts.
You can try the raw bbcode from this addon (it can work with other Bb Codes [an option needs to be modified] but I don't support it officially).
 
There are lots of similar icon packs like this, so you can easily build your own editor toolbar sprite:

fresh_icon_05.jpg


I'm with a few other people in that I don't really like the look of the new default ones here, so I'll probably build my own.

However, I expect we'll see a flurry of new resources available once 1.2 hits the streets - "New toolbar anyone?" :D
 
Sorry if this has been discussed previously. Not visible in the current editor is the "grid" button. I can't find mention of this but do see it on the http://imperavi.com/redactor/ site as an available button. Would this also be available for enabling through the admin panel? This is a highly requested feature on my forum since switching away from vbulletin (grid was stock on most recent versions).

Loving the updates & additions nonetheless.

Regards,
~Mike
 
The grid button, as well as the table functionality didn't exist in 1.1 and still doesn't exist in 1.2. It will require an add-on (there are several).
 
@King Kovifor - Thank you for the response. The only grid feature causes database errors so I don't use it. I got excited when I seen it was loosly based on the redactor editor since that includes the grid. Oh well.. Life goes on!
 
There are lots of similar icon packs like this, so you can easily build your own editor toolbar sprite:

fresh_icon_05.jpg


I'm with a few other people in that I don't really like the look of the new default ones here, so I'll probably build my own.

However, I expect we'll see a flurry of new resources available once 1.2 hits the streets - "New toolbar anyone?" :D

The more the better and I'm sure any contributions with any enhancements will be very well received by all. (y)
 
I like the new editor quite a bit, i didn't want to bring this up but felt i needed to.
IPB just released they are doing the same thing now but it's funny watching other solutions copy the greatness of what xenforo is becoming.

Keep up the great work guys, my community and i are extremely thankful :)
 
Just a suggestion. The editor is not matching with the default theme, some other color in editor like blue will look nice. :)
 
Just a suggestion. The editor is not matching with the default theme, some other color in editor like blue will look nice. :)

You'll be able to style it to your preference when 1.2 is made public to all customers. The editor will now be significantly easier to change and styled to your preference via Style Properties and/or EXTRA.css.

Edit: Ninja'd by @Brogan
 
Well agree with you guys but it will be nice to see a more cooler editor for the coolest forum software ever. That will be a better move. Nothing more to say.
 
Quick css in firebug
xenforo_editor.webp
@Brogan and everyone else - I think the point you guys made about how easy it is to style the box, really has nothing to do with how well the editor blends with the current theme. I really don't see why you guys are so oppose to have it match the default theme right off the bat, since, obviously you gonna style it yourself anyway so this shouldn't even matter to you at all.

At least the official forum does use default theme and it does add that little extra touch to have it match the rest of the forum.
 
This discussion has already been had on several threads.

Let's put a stop to it now on this one too.

Further posts on it will be removed.
 
I have been with vBulletin for a long time, then moved to XenForo, then back to vBulletin. But from seeing this and how efficient and organised it all is here, vBulletin has no chance! :p XenForo forever!
 
Top Bottom