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.

 

[Rho Delta]

Will we need to remove addons that already do this (tagging for example)? Will it break all old tags?

 

[DeltaHF]

Some of the best changes I've seen yet. Can't wait.

 

[Teapot]

Will we need to remove addons that already do this (tagging for example)? Will it break all old tags?

The [BD] Tag Me plugin uses a [USER] tag for this, and Mike just confirmed in another thread that XF 1.2 also uses this:

The built-in tagging uses a new [USER] tag to allow the member cards to work.

As long as the format of the code - [USER]123[/USER] - is the same, it should continue to work without issue.

 

[cclaerhout]

Just contenteditable div or iframe?

You can disable the iframe mode which is actually buggy with the official fullscreen plugin (the iframe mode is an option and not enable as default). You just need to do easy css tweaks to make the lists compatible such as:

.redactor_MessageEditor ol li {
    list-style: decimal outside;   
}
 
.redactor_MessageEditor ul li {
    list-style: disc outside;
}
 
.redactor_MessageEditor ul ul li {
    list-style: circle outside;
}
 
.redactor_MessageEditor ul ul ul li {
    list-style: square outside;
}

=> This would give you something similar to the actual editor configuration.

 

[CyberAP]

You can disable the iframe mode which is actually buggy with the official fullscreen plugin (the iframe mode is an option and not enable as default). You just need to do easy css tweaks to make the lists compatible such as:

.redactor_MessageEditor ol li {
    list-style: decimal outside; 
}
 
.redactor_MessageEditor ul li {
    list-style: disc outside;
}
 
.redactor_MessageEditor ul ul li {
    list-style: circle outside;
}
 
.redactor_MessageEditor ul ul ul li {
    list-style: square outside;
}

=> This would give you something similar to the actual editor configuration.

The reason I asked was because styling content inside iframe is harder than doing the same thing inside one DOM level.

 

[Mark3121]

Why is the button styling different on there editor? http://imperavi.com/redactor/

Be nice to get rid of small bugs in this thing

 

[tenants]

Is there a subscript / superscript option (it wasn't in the demo, but it looks like it is in your screen shot)

 

[Kevin]

Why is the button styling different on there editor? http://imperavi.com/redactor/

{looks at the screen shot on that page} Anybody know then if this will allow us to have inline images like that?

 

[FredC]

{looks at the screen shot on that page} Anybody know then if this will allow us to have inline images like that?

That would be sweet if i could do that without a bb code plugin!!! As a matter of fact its the only reason i ever muss with BB codes in the first place..

Ugh cant wait to see the new editor in action here.. The current default is a serious PITA and took me somewhere in the area of ten to fifteen minutes to copy Mikes first post to my own Moderators forum..

 

[AndyB]

Hi Mike,

Thank you for the update and it looks like you have done a fantastic job, can't wait for v1.2.

A few questions if I may:

1) Will there be a toolbar in BB code mode?
2) Will there be a toolbar for tablet users?
3) Can we force the use of BB code mode as the only mode available? I really dislike anything to do with WYSIWYG and don't think a forum editor needs this mode.

 

[cclaerhout]

The reason I asked was because styling content inside iframe is harder than doing the same thing inside one DOM level.

Yes, there is the same problem with the last version of TinyMCE. Both editors have an option to load a css to configure the iframe but I don't know if it's possible to integrate this css into a template (see this - look at the Javascript, you can configure a css file). That's also one of the reason I've used the "normal" mode (not iframe) in this integration.

 

[netrix]

Will the fullscreen plugin be included?

 

[Kevin]

That would be sweet if i could do that without a bb code plugin!!! As a matter of fact its the only reason i ever muss with BB codes in the first place..

For the most part, same here. If there was a stock solution for doing inline images like that than my desire of having a stock BB code manager would be way lower on the priority Wish List.

 

[Mike]

Yes, there is the same problem with the last version of TinyMCE. Both editors have an option to load a css to configure the iframe but I don't know if it's possible to integrate this css into a template (see this - look at the Javascript, you can configure a css file). That's also one of the reason I've used the "normal" mode (not iframe) in this integration.

This has me confused. We already use a template -- we're basically using the same one in 1.2.

 

[cclaerhout]

This has me confused. We already use a template -- we're basically using the same one in 1.2.

So to get access the template you're using this kind of cmd with the "css" parameter (for the iframe) : "css.php?.........."? I haven't tried this with Redactor since the api showed only a direct link to a css file.

Edit: TinyMCE has jsut put online the new api and there is an example of a css integration via a php link like you did in the current XenForo version (source). So you're doing basically the same with Redactor to get access to the iframe from a css template?

 

[tyteen4a03]

Now the question would be: when is Kier going to post some updates?

 

[Martok]

The [BD] Tag Me plugin uses a [USER] tag for this, and Mike just confirmed in another thread that XF 1.2 also uses this:


As long as the format of the code - [USER]123[/USER] - is the same, it should continue to work without issue.

The formatting isn't quite the same. In Tag Me it's [USER=123]123[/USER] So potentially there could be some conflict, at least with the closing tag and if you remove Tag Me then you'd have to alter all of the starting tags. Plus of course there's less functionality in this new built-in tagging (no email alerts, tagging in posts only, no group tagging) so it's likely that a bunch of us will want to continue to use that add-on.

 

[Teapot]

The formatting isn't quite the same. In Tag Me it's [USER=123]123[/USER] So potentially there could be some conflict, at least with the closing tag and if you remove Tag Me then you'd have to alter all of the starting tags. Plus of course there's less functionality in this new built-in tagging (no email alerts, tagging in posts only, no group tagging) so it's likely that a bunch of us will want to continue to use that add-on.

Fair enough. Hopefully, if the tag formatting is different we should be able to use Kier's Content Find/Replace to reconcile the difference if we want to change to the official feature.

 

[jmurrayhead]

Now the question would be: when is Kier going to post some updates?

Personally, I don't care who is posting updates as long as updates are happening and 1.2 is moving along.

 

[Mike]

The formatting isn't quite the same. In Tag Me it's [USER=123]123[/USER] So potentially there could be some conflict, at least with the closing tag and if you remove Tag Me then you'd have to alter all of the starting tags.

It's [USER=id]name[/USER] so should be fine.