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.

 

[Shelley]

You're right @Martok , but you forget those whom just want to make XF better, not for personal reason, just for the sake of the community/XF ; because they feel like there is something which could be improved. Personally, I'm in all camps, I can style for my need, but I'm really lazy and would like to be ready out-the-box, and since I love XF I'm trying to give honest/partial feedbacks because it's simply a product I care.

So does everyone else, give suggestions & feedback without personal gain and/or personal reason. You will notice the majority of the people in the other camp that seen no issues with the previous styling were going to re-style their editors regardless. Whether the editor is Grey, blue or any other colour i know quite a few of us will style it to our preference. What I particularly like about this is since the other camp prefer the editor so much I can actually have a design exclusive to my site because of that. I've been designing icons in the meantime getting it all ready so I'm happy either way because xf initially @Mike & @Brogan (Thanks again) made it easy for us to style.

As before, it's all good eitherway. I will enjoy styling the editor since i know it'll be easy to do so much easier than before. Great job @Mike

 

[Arkshine]

Sure, but what I'm saying is unrelated to personal preference (most of feedbacks) nor styling ability, but more how to style editor to please most of people. Anyway, I feel like we turn in circle, just wanted to say to Martok, things are not white or black (grey ? ). I've given a feedback, it's up to devs to consider it or not, and yes either way, as it is, would be already fairly good. #LastWord.

 

[James]

Ha! I came in here expecting to see lots of praise and congratulations but apparently another argument has come to light. Nobody wins!!

I do like the new editor, it was a surprise to see it changed when there was nothing wrong with the old one. Style is subjective though, so I suppose some are going to love and some are going to hate. I don't mind it either way!

 

[goyo]

I've liked the early Redaktor version and the current design even better! No complaints here...
Great job @Mike

 

[Hornstar]

I like the editor and Mike and Kier have done a great job. There a few things that I feel should be changed in the core.
1. Remove the washed out fade gimmick. The focus should be getting people to post..... not to hide it.
2. When clicking on the colour picker, the underline under the A should change to the colour you picked.

Actually it is only those two visual effects that I would be happy to be changed in the core. The rest I would change myself.

 

[Deepmartini]

Also it would be great if we had the option to remove buttons on the editor. For example the insert image URL. That is confusing when you can simply drag and drop an image into the message itself. Or change it so when people click that insert image button they get the file upload box not an image URL box. Confusing!?

 

[erich37]

Also it would be great if we had the option to remove buttons on the editor. For example the insert image URL. That is confusing when you can simply drag and drop an image into the message itself. Or change it so when people click that insert image button they get the file upload box not an image URL box. Confusing!?

I would not remove any buttons from the Editor-Toolbar, but rather implement the "Upload a File"-button into the Editor-Toolbar.
So all image-upload capabilities are located in one place: in the Editor-Toolbar.

 

[Jeffin]

Also it would be great if we had the option to remove buttons on the editor. For example the insert image URL. That is confusing when you can simply drag and drop an image into the message itself. Or change it so when people click that insert image button they get the file upload box not an image URL box. Confusing!?

I would also love to see the upload box integrated into the insert image function. I would rather see the upload a file function integrated with image / attachment upload button than it being a separate button near 'Post Reply'.

I doubt if people will use the Drag and Drop because there's nothing there to show that the editor supports it. Honestly, I just came to know about it after reading the above post.

Also the Ctrl+Z function does not undo in steps. It scared me when it removed the whole post I typed. Shouldn't it have gone backward step by step?

 

[feldon30]

@Kier don't you love all these backseat devs?

The irony is, before the Editor buttons were restyled to be more subtle, with a nice blue background that blends in perfectly with the XenForo theme, I would have strongly supported the "fade out" you added. But now that the editor looks so good, I think the fade out makes the editor hard to find. I know, can't win for losing.

 

[Dragapult]

Liking the new editor, especially the drag and drop image uploading. Feels much more modern.

 

[DRE]

The new editor looks super professional now.

 

[The Dark Wizard]

I am having a really hard time containing my self with the new editor.

Especially the button that removes all formatting. Extremely useful for users who love to write posts in documents and stuff and then copy over. I run a large writing/rping community and it is extremely difficult to get most people to paste into bbcode mode so their stuff does not mess up.

This will be way easier for users to understand !

 

[Paul B]

That functionality has existed with the TinyMCE editor since the very first release.

 

[The Dark Wizard]

That functionality has existed with the TinyMCE editor since the very first release.

I just noticed that.

I guess I'm really silly then. Though still liking everything else like the auto save, etc. Lots of new functionality to improve posting on forums.

 

[CTXMedia]

I like the new tweaks - prompt to indicate where to start typing and removal of the fade-out (which keeps the editor in clear focus once activated); a good compromise that looks good and works well (IMHO).

Excellent work guys - the new editor is turning into the mutt's nuts of modern forum-ware!!

 

[MattW]

It's getting better and better IMO. Can't wait for 1.2 now

 

[TsinJu]

Is it by design that there is no Fade out if you click somewhere else then the Editor?
Before there was this Fade Out Effect, and honestly i liked it

aha Guess my Question has been answered already

 

[ibnesayeed]

Is it by design that there is no Fade out if you click somewhere else then the Editor?
Before there was this Fade Out Effect, and honestly i liked it

Yes, today editor has got some polish.

 

[TsinJu]

Need to "repolish" it Hope there will be a way to get the Text and Fade out effect back with some CSS?!?

 

[ibnesayeed]

Need to "repolish" it

Now faded editor has a hint message saying "Write your reply..." (or a draft if there is any) initially. Once editor gets focus, it remains highlighted and hint message disappears. I personally liked this behavior.