Jump to content
Mark
 Share


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




 Share

Comments

Recommended Comments



Meh. Nothing about Markdown or something less stupid than BBCode ? BBcode is a pain, it's dead everywhere but in forums... Old forums... All the new ones are using markdown, for a reason. :x

Link to comment
Share on other sites

  • Management

Meh. Nothing about Markdown or something less stupid than BBCode ? BBcode is a pain, it's dead everywhere but in forums... Old forums... All the new ones are using markdown, for a reason. :x

 

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! 

Link to comment
Share on other sites

Yeah, sorry, I'm a bit tired to work on IPB and custom skins these days. I now HATE the upgrade process... And the editor took the hit ! ;)  Can't wait to see all the v4 features. But yeah, I have HIGH hopes. Lot of stuff are needed so IPB feels modern again.

Link to comment
Share on other sites

I think the term feature rich is a bit over used these days, my eyes start glazing over when I read the term being used in the first sentence. It's an editor!

 

I will be content if this one works correctly. Sick of copying and pasting stuff in to the editor and then posting only to find the formatting and line breaks are all broken. Not truly "what you see is what you get"...

 

Ted.

Link to comment
Share on other sites

This looks fantastic so far, thanks for the preview!  

 

As the first paragraph states, the post editor is damned important since that's how users interact with your forum to post and edit content.  Glad to see that time is being spent improving this crucial piece of the forum (and other areas of the IPS Suite).  I look forward to learning more as you continue to develop IPS 4.0!

Link to comment
Share on other sites

I think the term feature rich is a bit over used these days, my eyes start glazing over when I read the term being used in the first sentence. It's an editor!

 

I will be content if this one works correctly. Sick of copying and pasting stuff in to the editor and then posting only to find the formatting and line breaks are all broken. Not truly "what you see is what you get"...

 

Ted.

 

You will be content :)

Link to comment
Share on other sites

 

You will be content :smile:

 

Now I have high hopes! :smile:

 

I must admit it is good to see you guys are working on improving and developing it further, its been needing work ever since it was implemented in to IP.Board as it's been my main gripe...

 

Ted.

Link to comment
Share on other sites

The most common thing I do with the editor, other than enter text, is insert photos.  I would like more control over how inserted photos are displayed.  It would be nice to be able to change the size and alignment of images, and to add a caption.

Link to comment
Share on other sites

typo in one of the headers Mark: Emotions -> Emoticons

 

As a self-described simple endline user, my first reaction is almost all of the symbols were instantly understandable. In other words nothing made me think except these:

 

< >

 

and

 

the all-seeing eye of Isis

 

I would ask IPS to consider using this simplified editor format/display even for quick reply in the forums.  By doing so, most people can instantly see that there are features which to this day are hidden under the description of 'More Reply Options' which to me, the simple end user, is not at all clear.

Link to comment
Share on other sites

I would ask IPS to consider using this simplified editor format/display even for quick reply in the forums.  By doing so, most people can instantly see that there are features which to this day are hidden under the description of 'More Reply Options' which to me, the simple end user, is not at all clear.

 

Yeah, there'll be no more "More Reply Options" button.

Link to comment
Share on other sites

Currently there is a spoiler box that collapses content (instead of having it turn into a background color). 

 

Will that not be something we're able to have anymore? Does this new editor require all bbcode tags to be rendered? 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

It's based on CKEditor 4.

 

Does this mean it will be an absolute pain for skinning again? Having to screw with code to make the editor load skin-specific CSS and images is so tedious right now with CKEditor. I hope this has changed for CKEditor 4, or else the same complaints will be echoed after IPB 4 is released that have been going on for a couple 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...

×
×
  • Create New...