Перейти к содержимому


IPS 4.0: Editor - Part 1: Content

  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 Онлайн   IpbZona Bot


  • Пользователи
  • Репутация
    • Cообщений: 29

Отправлено 06 Июнь 2013 - 17:30

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:
  • Content
  • Uploads
  • Customisation and BBCode
  • Special features
Here's a screenshot of what it looks like (by default, on a desktop, more on that later):

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.
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 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.
We've completely overhauled emoticon management in 4.0. You can now create multiple "groups", drag and drop to reorder and (using the same uploader as shown above) quickly upload loads of emoticons at once.

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

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:
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.

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание

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.
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!
Attached Thumbnails

Пожалуйста Войдите или Зарегистрируйтесь чтобы видеть скрытое содержание