Jump to content

Invision Community Blog


Managing successful online communities

Mark
Sign in to follow this  
 

IPS 4.0: Editor - Part 3: Customisation and BBCode

Introduction

Joining my previous entries about content and uploading features in post editor in IPS Social Suite 4.0, I'd like to take you through the customisation features on the editor.


Toolbar layout

The buttons that appear on the toolbar are completely customisable in 4.0 and you can set different layouts for desktop, tablet and mobile (so that you don't show more buttons than the device can show).

This is what the management screen looks like:

(This is an unfinished design - the tabs won't be be like that in the final version.)

To move a button you just drag and drop. The buttons on the right allow you to add more rows or separators.


Clicking on a button brings up a dialog where you can adjust where and to whom it shows:



Adding Buttons

There are two ways to add a button to the editor.

The easiest way is to install a CKEditor plugin. CKEditor has loads of plugins, and installing is as easy as uploading the zip file from their site. Here's a screenshot of the symbol plugin being used:


The second way is similar to how custom BBCode currently works, you specify the HTML code to be added when the user clicks on the button. Manually created buttons can optionally have a dialog popup to ask for an option.


Design

Just as you can install CKEditor plugins by uploading the zip file, you can do exactly the same with CKEditor skins to change the design of the editor.
You then simply set for each skin on your community which CKEditor skin to use for it.


BBCode

Though no features in IPS4 insert BBCode-style tags into the editor (like is currently done for attachments, etc.) users can still type BBCode into the editor and it will work fine.

We've rewritten how BBCode is parsed to be much more secure and reliable and produce more standards-compliant HTML (for those who are interested, it parses the post content into a DOM Document and examines only the text nodes for BBCode tags, then either splits the nodes surrounding it and inserts one for block-level elements, or wraps all subsequent text nodes in the appropriate formatting element until the end BBCode is found).

The benefit to this is that there now no longer needs to be a "BBCode mode" - you can type BBCode straight into the editor, even complicated stuff like lists spanning multiple lines, and it comes out looking great.

The downside to this approach is that custom BBCodes can no longer be added through the Admin CP. However, as mentioned above, we now have the ability to add custom buttons to the editor which work in a much more intuitive way, and can do everything that custom BBCodes could and more. For those who really want to be able to add the ability for custom BBCode, we've isolated the method that returns the supported BBCode (and information needed to parse them) into a specific method so that custom BBCode can be added with a very simple hook specific to that purpose.


Conclusion

There's still one more blog entry to go in our series on the editor. To finish up I'll be showing off some cool special features including how you can post using regular HTML.

Sign in to follow this  

Comments



Recommended Comments

Is it gonna be possible to make tables with borders with this?

 

Yes, if you install the CKEditor table plugin.  It supports defining the border.

 

when will we get ips 4? 

 

When it's ready (sometime later this year is our only public estimate right now).

 

Any news on the quoting system being fixed?

 

Mark touched on the quoting system in blog entries already.  If you can clarify what specifically you are referring to then we can confirm, but generally speaking - the quote boxes will be more reliable because the way they are represented in the editor has been rewritten.

 

 

Not having a BBCode mode is great, however if Im correct (and I think what is being said above) it will be difficult to sort problems with posts that are messed up such as problems in the past where its spammed out the html.. For example at the moment if there is a minor bug in IPB which is causing more tags to be introduced on posting, or whatever the reason (maybe a problem with a plugin) then I can edit the post and correct the issue. Am I correct in saying with wysiwyg it will make this more difficult? Dont get me wrong I like the idea of it, just a concern.

 

Other than that though, lookin really good :smile:

 

How would you do it in MS Word?

Setting that aside, if you can post raw HTML there will be a raw HTML mode which would allow you to see the raw tags.

 


Then I have another question regarding styling. It says that editor styles can be applied to skins. So does that mean they can't be packed together? If I want to put it in the marketplace I'll have to have separate files to upload along with instructions telling the person that they have to link the two together? I haven't seen it so I don't know, but it sounds like a process that you can improve upon and something you'll receive feedback about down the road. Might as well get it right the first time.

 

Thanks. :smile:

 

Skin import/export hasn't been finalized yet.

 

 
What will happen to custom BBCodes already definied in ACP? Will the settings be preserved or completely removed and automatically ported to "custom button in the editor"? How we suppose to migrate already existing custom BBCodes (including PHP based) to a new system, adding them from scratch using "button" method?

 

Custom addons for 3.x will not work on 4.x.  This is the nature of a major upgrade.  Custom bbcodes will no longer be available and authors will instead have to migrate them to custom CKEditor plugins.

Share this comment


Link to comment
Share on other sites

Can someone explain how this could be accomplished in the new system

 

I have a custom bbcode that goes to a php file that stores an array and looks up some data based on the option/content passed in.

 

So using the option and content I get 4 or 5 pieces of data and then return something like:

<a href="DATA1" class="popup" data-more="DATA2" data-stillmore="DATA3">CONTENT OPTION DATA4</a>

then I have a prototypejs or jQuery function watching which adds the ability to hover over the link and show the data.

 

Is something like this possible in the new system?

Share this comment


Link to comment
Share on other sites

Can someone explain how this could be accomplished in the new system

 

I have a custom bbcode that goes to a php file that stores an array and looks up some data based on the option/content passed in.

 

So using the option and content I get 4 or 5 pieces of data and then return something like:

<a href="DATA1" class="popup" data-more="DATA2" data-stillmore="DATA3">CONTENT OPTION DATA4</a>

then I have a prototypejs or jQuery function watching which adds the ability to hover over the link and show the data.

 

Is something like this possible in the new system?

 

The simplest way would be to make a CKEditor plugin that makes an AJAX request to that PHP file :)

Share this comment


Link to comment
Share on other sites

Custom addons for 3.x will not work on 4.x.  This is the nature of a major upgrade.  Custom bbcodes will no longer be available and authors will instead have to migrate them to custom CKEditor plugins.


Just to be clear: what will happen with a content [custom tag]...[/custom tag] already saved in a database (especially a portion from pre 3.4.x) and older posts display? Will the tags show unparsed in older posts stright after upgrade?

Share this comment


Link to comment
Share on other sites

The upgrader routine has not been written yet so it's a bit early to talk specifics about the upgrade.  I don't want to make any promises as to what will happen definitively until we've actually gotten that far.

Share this comment


Link to comment
Share on other sites

Just to be clear: what will happen with a content [custom tag]...[/custom tag] already saved in a database (especially a portion from pre 3.4.x) and older posts display? Will the tags show unparsed in older posts stright after upgrade?

I believe you should do something about that, so that posts are nicely rebuilt, and not completely destroyed.

 

And I'd also be interested in Saiga's question :

 

 

Another type of bbcode is the [you] bbcode available in the marketplace. Basically the bbcode tag is replaced with the name of the viewing member. Will such a custom bbcode still work and will there be documentation provided on how to make it function?

 

Thanks :)

Share this comment


Link to comment
Share on other sites

And I'd also be interested in Saiga's question :

 

Thanks :smile:

From a non-official standpoint, I don't see why this wouldn't be possible under the new system.... Store it like normal, then on display, parse out the tag with the members' name.

Share this comment


Link to comment
Share on other sites

 

The simplest way would be to make a CKEditor plugin that makes an AJAX request to that PHP file :smile:

Ah I see I actually already have a CKEditor plugin that I use in my 3.3 board that allows a user to search the contents of that file (in case they don't remember the specific option/content combo). So in the new system my plugin could basically do the same thing except it wouldn't insert the BBCode it would insert the custom HTML that the bbcode would have parsed to. That sound correct?

 

If it is, that works I suppose, but does it mean that it would be impossible to manually type in the old bbcode and have it work right?

Share this comment


Link to comment
Share on other sites

And I'd also be interested in Saiga's question :

 

Thanks :smile:

 

 

Custom editor plugins that require PHP code execution will still be possible.

 

Ah I see I actually already have a CKEditor plugin that I use in my 3.3 board that allows a user to search the contents of that file (in case they don't remember the specific option/content combo). So in the new system my plugin could basically do the same thing except it wouldn't insert the BBCode it would insert the custom HTML that the bbcode would have parsed to. That sound correct?

 

If it is, that works I suppose, but does it mean that it would be impossible to manually type in the old bbcode and have it work right?

 

Yes, effectively you'd just convert it to a CKEditor plugin and insert the correct HTML.

 

No, manually typed in bbcode would not work (unless you also created a hook to parse the bbcode).  See this line in the blog entry

 

For those who really want to be able to add the ability for custom BBCode, we've isolated the method that returns the supported BBCode (and information needed to parse them) into a specific method so that custom BBCode can be added with a very simple hook specific to that purpose.

 

Share this comment


Link to comment
Share on other sites

 

 

Custom editor plugins that require PHP code execution will still be possible.

 

 

Yes, effectively you'd just convert it to a CKEditor plugin and insert the correct HTML.

 

One other question, could the correct HTML be cut and paste and retain the data attributes?

Share this comment


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