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.
 
For reference:

No, those aren't the images being used.
Yes, they're a single sprite.
Our editor CSS is heavily modified to fit our needs. (Yes, it will be easier to edit than the current editor.)

I reiterate that what you see on the demo does not mean much in relation to XF's implementation.
 
Puh 15 pages in one day. New record?:)

Nice work guys! Looking forward to the good stuff you come up with.

Edit, are you going to use the air mode?

Scott
 
Thanks for awesome update. I am very excited about XF-1.2. We are nearing traditional annual celebration of our forum foundation date and we hope that we will hit the beta release by then. :)

I have couple ofquestions though.
Drag and drop uploading
Provided your browser supports it, you can now drag files into the editor to upload them:
View attachment 46346
  • Will this drag-drop support multiple file upload?
  • Will we still have flashupload for multiple file upload or will we be moving forward for jQuery only solution?
 
@mike

You said that pasted text will have some formatting stripped. Does this include text colouring so that text doesnt become invisible in dark themes?

Also (and this is very important) have you guys managed to fix the way that pasted articles go all funny and very hard to read. Then there's the way that posting tabbed tables from notepad into code tags keeps the tables in line on vB but not on XF.

THose may not seem like major issues but they really affect the day to day usability of the site.
 
When I post text from a newspaper article elsewhere the font displays as huge, not like the original. Thats a pain continually trying to redo the font and it never seems to work right.
 
When I post text from a newspaper article elsewhere the font displays as huge, not like the original. Thats a pain continually trying to redo the font and it never seems to work right.
Surely the "clear formatting" button in the top left next to the font drop down fixes that for you in the current editor?
 
Funny to see the RTE working on ipad on redactor, this would have been useful... A couple of years ago :cool: , but now at least on my communities, there has been a "facebook-effect " : people only write one-liners (just like here) and apart from smileys and quotes, nobody uses complex text formatting anymore. Of course, ymmv depending on community type, but I wouldn't put too much effort in a working set of tools to put text in colors, change font, justify to the right, or "create tables", in 2012 : the vast majority does not care.

How could they imagine that someone would ever "create a right aligned table" in an RTE on ipad ? :p
Bold, insert link, insert image, smileys : that's it.

As a side note, the image upload in redactor is a pita, hopefully Mike kept the one included here ( which can upload images from the ipad library or even "take pictures" on iphone) because, afaics, this is not stock feature of redactor.
 
Great news!

This is a very compelling reason to finally renew our license. I've just logged in and done so. (y)

A newer jQuery will also be of massive benefit to everyone here.

It should be interesting to see how much of 1.2 works with our own customizations (217 templates modded or re-written, external CSS, some mods to the PHP source, random JS mods/tweaks). I certainly don't expect any sympathy, since it was our choice to diverge so far from stock XenForo. I just hope I can re-factor some of that hard work within a reasonable time frame.

I've been working on a responsive version of our styles for some time now. It's finally reaching a level that I'm pleased with (especially on phones, which are the most challenging to adapt some of these UI patterns to). We're using technologies like PJAX and native overflow-scrolling to provide an experience which feels much less "web" like. I've found that eliminating full page reloads made a huge difference in perceived speed and overall experience on mobile devices.

Our 2 column thread_list + thread_view layout on iPad actually runs a bit faster than Tapatalk when we don't need to initialise TinyMCE. Redactor will be a massive help in keeping it all feeling more like a native app. I might just wait to see how 1.2 is structured before sinking more time in to our hacked up XenForo. This is how far we've taken it:
Screen%20Shot%202013-05-20%20at%2012.57.16.png



Are there early releases available for local testing right now? Any head start, or even just a peak at the underlying changes would be a huge help. Incomplete and/or buggy is fine :)
 
Great news!

This is a very compelling reason to finally renew our license. I've just logged in and done so. (y)

A newer jQuery will also be of massive benefit to everyone here.

It should be interesting to see how much of 1.2 works with our own customizations (217 templates modded or re-written, external CSS, some mods to the PHP source, random JS mods/tweaks). I certainly don't expect any sympathy, since it was our choice to diverge so far from stock XenForo. I just hope I can re-factor some of that hard work within a reasonable time frame.

I've been working on a responsive version of our styles for some time now. It's finally reaching a level that I'm pleased with (especially on phones, which are the most challenging to adapt some of these UI patterns to). We're using technologies like PJAX and native overflow-scrolling to provide an experience which feels much less "web" like. I've found that eliminating full page reloads made a huge difference in perceived speed and overall experience on mobile devices.

Our 2 column thread_list + thread_view layout on iPad actually runs a bit faster than Tapatalk when we don't need to initialise TinyMCE. Redactor will be a massive help in keeping it all feeling more like a native app. I might just wait to see how 1.2 is structured before sinking more time in to our hacked up XenForo. This is how far we've taken it:
Screen%20Shot%202013-05-20%20at%2012.57.16.png



Are there early releases available for local testing right now? Any head start, or even just a peak at the underlying changes would be a huge help. Incomplete and/or buggy is fine :)
That would be the first beta. Which should be out in June. Betas shouldn't be run in production regardless.
 
Top Bottom