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.

 

[xf_phantom]

No.

will there be at least a way for addons to use it?

 

[cclaerhout]

For those you would like to develop some interface with this editor, It would be nice if the viewParams of its dialog template could be extended.

Ie with the media dialog:

        $viewParams = array(
                //bla bla bla bla
        );
 
        /* Extend ViewParams */
        $viewParams = $this->_blablaViewParams($dialog, $viewParams);
       
        return $this->responseView('Blabla_ViewPublic_Editor_Dialog', 'blabla_dialog_' . $dialog, $viewParams);   
    }
   
    protected function _blablaViewParams($dialog, $viewParams)
    {
        if ($dialog == 'media')
        {
            $viewParams['sites'] = $this->_getBbCodeModel()->getAllBbCodeMediaSites();
        }   
   
        return $viewParams;
    }

 

[s.molinari]

No.

Ah...gee. Bummer.

Scott

 

[Stuart Wright]

Sorry if this has been asked in the thread already, but will there be an option to disable the font selection? We currently do not allow people to change the font used in posts.
Thanks

 

[xf_phantom]

I don't see a feature to change the font:/

Oh and btw, what license will be used?OEM? just asking because of

Integration with products/services for developers, who will then create their own products for the end users​

 

[Chris D]

Sorry if this has been asked in the thread already, but will there be an option to disable the font selection? We currently do not allow people to change the font used in posts.
Thanks

The stock editor is very easy to configure.

I'm theory it should be relatively easy to do this but us developers might have to wait and see until we get our grubby little hands on it.

 

[swatme]

Facebook style CONVERSATION "Chat style" real time.

some users prefer to message over fb due to its real time message.
does 1.2 also covers this? where in if you are online the private conversation
will popup like in fb

 

[Paul B]

No.

 

[Alpha1]

Facebook style CONVERSATION "Chat style" real time.

some users prefer to message over fb due to its real time message.
does 1.2 also covers this? where in if you are online the private conversation
will popup like in fb

Would be a good suggestion to post (if the suggestion does not yet exist)

 

[Paul B]

Already suggested.

 

[Shelley]

Has anyone tried styling the new editor on perhaps another software/home project? if so how much easier is it than Tinymce?

 

[Alpha1]

Already suggested.

Can be found here: http://xenforo.com/community/threads/instant-message-with-friends-online.927/
@swatme Like it if you want it.

 

[Adam Howard]

So as not to "shock" my members, I showed them a small preview of this editor and 1 thing someone noticed that I didn't....

Where is the font menu?

..ie... How do pick the font type?

 

[ibnesayeed]

So as not to "shock" my members, I showed them a small preview of this editor and 1 thing someone noticed that I didn't....

Where is the font menu?

..ie... How do pick the font type?

The button on left side of the smilie icon in the screenshot in the first post. That button has two lowercase "a"s in different fonts.

 

[Pereira]

This is what the font menu looks like on the default redactor editor:

 

[Pereira]

Redactor 9 has just been released:

What's new in Redactor 9

Change Log

 

[Adam Howard]

Redactor 9 has just been released:

View attachment 47186

What's new in Redactor 9

Change Log

Oh wow.... There is something in that change log that I would really, really, really like to see....

But its unlikely XenForo will be updating to v9 any times soon. Mike likely has about wrapped up the code & is pushing on.

 

[TrevC]

Oh wow.... There is something in that change log that I would really, really, really like to see....
...

Go on, tell us.

Re: Font selection. To each their own, but I'd prefer my forum didn't look like a MySpace page from 10 years ago. I cant't see any compelling reason why visitors should be able to select random fonts, font-sizing, or colours.

There was a few questions and comments after we removed these "features" (from a couple of members), but all was forgotten after only a few days. There was absolutely no impact on the functionality or popularity of the community itself moving forward.

 

[xf_phantom]

I don't see a feature to change the font:/

Oh and btw, what license will be used?OEM? just asking because of

The button on left side of the smilie icon in the screenshot in the first post. That button has two lowercase "a"s in different fonts.

thx

 

[cclaerhout]

Redactor 9 has just been released

The redo/undo has improved. The range selection is still bad.