Jump to content

Invision Community Blog


Managing successful online communities


IPS 4.0: Editor - Part 1: Content

Introduction

The post editor is undoubtably one of the most frequently used features of the IPS Social Suite as it's the way users submit content to your community and functionality has evolved dramatically from the early days of forum software which consisted of a plain textbox in which users would type BBCode into the feature-rich WYSIWG (What You See Is What You Get) editors prevalent on the web today.

For the IPS Social Suite 4.0 we really wanted to focus on making the editor as good as it can be: feature-rich, intuitive to users and highly customisable.

Over the next 4 blog entries I'm going to cover the functionality of the editor and related features (attachments, emoticons, etc.) and the customisation options that will be available in 4.0. The theme of each blog entry will be: Here's a screenshot of what it looks like (by default, on a desktop, more on that later): Quotes A feature added to IP.Board in the 3.x series was "visual quotes" - when adding a quote the box shows directly in the editor as it will show in the post, rather than as just normal text with a quote BBCode wrapped around. In 4.0 we've rewritten how this works to use a CSS3 based solution rather than JavaScript to keep the citation header attached to the quote, which makes the feature much more reliable and easy to use when splitting quote boxes, moving the cursor before or after the quote box or dealing with embedded quotes. Code We've also rewritten how code can be inserted into the editor to be more reliable. Adding code now initially brings up an editor which supports syntax highlighting: And after inserting, you'll see the code exactly how it will be displayed after posting and you can interact with it exactly how you'd expect: Spoilers Spoilers are now also visual (though of course they're not true WYSIWYG as you need to be able to see what you're typing) and a built-in feature enabled by default. When you click the spoiler button you'll be given a darkened box in which to type the content: The spoilers display in the post as the same coloured box with a "click to view" message. When clicked, the dark box fades away revealing the content underneath. Emoticons We've completely overhauled emoticon management in 4.0. You can now create multiple "groups", drag and drop to reorder and quickly upload loads of emoticons at once. When you click the emoticon button in the editor, you'll see a popup with an overview of all the groups. If your community only uses the default emoticons, this is big enough to show all the emoticons, however, if you like to install lots of emoticons, you can select any group from the dropdown menu to show all emoticons in that group, or use the search bar to find a particular emoticon. In addition, your most recently used emoticons will show right at the top. Embedded Media In 3.0 we introduced a media BBCode tag. By wrapping a URL to media such as YouTube or Vimeo videos in media BBCode tags, the correct embed code would automatically be worked out and embedded into the post. In later versions, we added automatic embedding support, so just pasting the URL into the post would cause the video to be embedded. This still works exactly the same in 4.0 with a couple improvements: Previews If you type the URL to a supported media in the "Link" dialog, a preview will be shown in the dialog - you can choose to insert the embedded media or just a regular link. If you insert the embedded media, it will show directly in the editor. oEmbed Currently URLs which gets picked up for media embedding and the output they produce are managed in the Admin CP. The idea was that this would allow admins to add support for additional services, however, it has caused some problems when for example, YouTube has added new URL formats or changed their embed code and they don't work on most communities until we release an update to change the default record for YouTube. is an API which allows you to make a call to the provider giving them the URL and they respond with the best embed code to use, if that URL can be embedded. In 4.0, if a URL for YouTube, Flickr, Vimeo, College Humor or Hulu is inserted, we make a call to their oEmbed provider to obtain the embed code, so it's always up to date. Conclusion This is just the first in our series of blog entries on the editor in IPS4. Please do let us know what you think in the comments, but remember there's much more to come!

    [*]Content [*]Uploads [*]Customisation and BBCode [*]Special features




































    Video Demonstration





    Video Demonstration












    Video Demonstration






    oEmbed




Comments

Recommended Comments



And what about editor pluggability?   So far you guys have been real developer-friendly with hooks but the editor is the exact opposite and the existing version has been pretty bad for us at least.   Is it possible to replace this thing with some type of community plugin editor that might be written or is this the one thing that still can't be extended/replaced with IPS?

 

This feature would be really nice...

Give people the ability to choose the editor and the markup language used.  You could provide an editor that just uses HTML (and forget about BBCode conversions).  Those who want to use BBCode would only have to create an editor and a BBCode to HTML converter.  The same would happen for Markdown, Textile, or any other markup language people want to use in their forums.

Link to comment
Share on other sites

I'd realllllllly recommend waiting for the upcoming blog entries.. ;)  @Bitter...especially the one on customization.  I think you'll be happy with what you hear...

 

Awesome!

It might be a tad bit helpful on my anxiety (and maybe others' too) if at least the titles of what each update on the editor would be called, so we know whether to voice concerns or wait. I know my heart won't be so heavy once I hear more about skinning the editor (that is...if there is any good news about skinning the editor).

Link to comment
Share on other sites

I bet that the upload procedure of the emoticons on the first video (drag n drop), will be a part of the new way we could upload attachments :-)

 

;)

 

 

 

veryyyy good

 

Something about security? More security?

 

We're using HTMLPurifier on the back-end to clean the submitted code which has proven reliable and will continue to do so.

 

 

Awesome!

It might be a tad bit helpful on my anxiety (and maybe others' too) if at least the titles of what each update on the editor would be called, so we know whether to voice concerns or wait. I know my heart won't be so heavy once I hear more about skinning the editor (that is...if there is any good news about skinning the editor).

 

  • Content
  • Uploads
  • Customisation and BBCode
  • Special features

Skinning comes under customisation.

 

To give you a quick answer though: it's just CSS ;)

Link to comment
Share on other sites

 

;)

 

 

 

 

We're using HTMLPurifier on the back-end to clean the submitted code which has proven reliable and will continue to do so.

 

 

  • Content
  • Uploads
  • Customisation and BBCode
  • Special features

Skinning comes under customisation.

 

To give you a quick answer though: it's just CSS ;)

Does that mean 3.4 skins will work on version 4.0?  I'm asking because I'm thinking of having a custom skin done and don't want to buy it now with 4.0 on the horizon....unless it'll work on 4.0 then I can go ahead and get it done.

Link to comment
Share on other sites

I love the new simple color scheme and reduced visual elements. I had to customize the current theme to fit this modern look I wanted on my page, so this feature alone is worth a THUMBS UP! :)

Link to comment
Share on other sites

._.

 

I expected much much more praise then this... where are all those people hating on the lack of emoteicon organization in 3.x?

 

I'm impressed(and a tear may have been shed). Love the emoteicon improvements, love the fact you're using CSS3 for quote. Loved the... well... whole blog.

 

One question though... I noticed the absence of a 'source mode' button... it's coming.... right?

Link to comment
Share on other sites

._.

 

I expected much much more praise then this... where are all those people hating on the lack of emoteicon organization in 3.x?

 

I'm impressed(and a tear may have been shed). Love the emoteicon improvements, love the fact you're using CSS3 for quote. Loved the... well... whole blog.

 

One question though... I noticed the absence of a 'source mode' button... it's coming.... right?

 

Thanks! :wub:

 

Part 4 will cover special features like source mode :)

Link to comment
Share on other sites

Where are all the other options that are in the old one to the new one? Looks more that new editor is more turn back then more forward by the way of display.

 

Also, will this help fix pasting from a word document and it look at crazy after you submit it?

Link to comment
Share on other sites

Can I give feedback on the spoiler method or should I wait until the 3rd blog?

 

I would be careful about trying to give much feedback on something you haven't seen or used yet.  You are of course free to leave any comments you have about it, but not having seen or used the feature it's possible it behaves different from how you envision (this is a general statement of course).

 

More security the forum, not the editor.

What will you do for safety?  Protection from hackers etc.

 

Is there something lacking by way of security?  If you have feedback on security improvements feel free to post your ideas in the forums.  This is a blog entry about updates coming to the editor and general "protection from hackers" really doesn't have much to do with the content of this entry.

 

Does that mean 3.4 skins will work on version 4.0?

 

No.

 

Where are all the other options that are in the old one to the new one? Looks more that new editor is more turn back then more forward by the way of display.

 

Also, will this help fix pasting from a word document and it look at crazy after you submit it?

 

I would suggest waiting until you see the rest of the blog entries.

Link to comment
Share on other sites

 

I would be careful about trying to give much feedback on something you haven't seen or used yet.  You are of course free to leave any comments you have about it, but not having seen or used the feature it's possible it behaves different from how you envision (this is a general statement of course).

Well, I have two things to say in regards to spoilers, the latter of which I'm guessing you didn't consider based on the screenshot and the former of which I guess I have to "wait and see" but might as well say it anyway.

 

In many communities spoiler tags are used as a means of collapsing content. In the blog entry it says you will click the box and the box will fade away revealing the text underneath. This implies that the box is going to be the size of the content that it's supposed to be hiding. I do have my doubts that that's true, but in case it is I just want to put it out there that that's not what people will be wanting to see. I'm expecting that it will just be a 10px box or something...and I hope there's some way to tell apart the spoilered content from unspoilered content after clicking the box.

 

The other thing is that it's helpful to be able to describe what the spoiler is. Would be great if the spoiler button instead opened a popup with a content box for the spoiler and another box for a description. Then the box will have the description which will fade away with the box once its clicked. This feature has been requested before and it's something that communities converting from vbulletin expect to see.

Link to comment
Share on other sites

Well, I have two things to say in regards to spoilers, the latter of which I'm guessing you didn't consider based on the screenshot and the former of which I guess I have to "wait and see" but might as well say it anyway.

 

In many communities spoiler tags are used as a means of collapsing content. In the blog entry it says you will click the box and the box will fade away revealing the text underneath. This implies that the box is going to be the size of the content that it's supposed to be hiding. I do have my doubts that that's true, but in case it is I just want to put it out there that that's not what people will be wanting to see. I'm expecting that it will just be a 10px box or something...and I hope there's some way to tell apart the spoilered content from unspoilered content after clicking the box.

 

The other thing is that it's helpful to be able to describe what the spoiler is. Would be great if the spoiler button instead opened a popup with a content box for the spoiler and another box for a description. Then the box will have the description which will fade away with the box once its clicked. This feature has been requested before and it's something that communities converting from vbulletin expect to see.

 

Sorry I should have been clearer, it is indeed collapsed - the black box is always a set height.

Link to comment
Share on other sites

As others have alluded to - there's much more to come in the next few parts. Stay tuned folks. Part 2 has already been posted. :smile:

 

Good things are definitely coming if Collin S. is involved.  There is definitely a parallel between the movie Superman Returns and the reemergence of Collin S. 

 

Why the world (and IPS) needs Collin S. ....

Link to comment
Share on other sites

Fantastic to hear Emoticons finally get an improved manager, thank you, thank you.

Can't say much yet as I can't view the videos on my iPad, but really looking forward to this and the other features. Thanks for listening to the feedback on this over the years.

Link to comment
Share on other sites



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy

×