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

Love it!

 

Question about the skins (sorry!) - can you "include" a CKEditor skin in with your community skin or does it have to be a separate import?

 

I understand if you can't answer. :p

Share this comment


Link to comment
Share on other sites

Can you show us how the BBCode interface looks like in the Admin CP?

 
Please review the second to last paragraph in the blog entry

custom BBCodes can no longer be added through the Admin CP

Share this comment


Link to comment
Share on other sites

Could you touch on my concern regarding the WYSIWYG-editor being to hard to get a overview in? 

 

What I mean is that when all images, videos etc. are parsed and shown in the editor window, it can get hard to get an overview of the post. Especially when the images are very large. 

 

Will you do anything to resolve this? 

 

 

Will it be possible to "debug" posts for members and admins in order to sort out problems with a post? 

Share this comment


Link to comment
Share on other sites

Does this editor mangle the original bbcode by converting it to html or does it retain the original formatting for someone editing the post?   That is, will I still see what I *originally* saved when I go back to edit the post or will it be mangled into whatever blob of html the bbcode produces?

Share this comment


Link to comment
Share on other sites

Does this editor mangle the original bbcode by converting it to html or does it retain the original formatting for someone editing the post?   That is, will I still see what I *originally* saved when I go back to edit the post or will it be mangled into whatever blob of html the bbcode produces?

 

It will be WYSIWYG.

Share this comment


Link to comment
Share on other sites

I am guessing that part 4 will answer this.  All I need to know is that you will be able to create Tables through the editor in forum, blog and content areas. Please tell me that will be possible without have to do super duper special HTML stuff that will break if you switch back to the editor :)

Share this comment


Link to comment
Share on other sites

 

It will be WYSIWYG.

 

 

Okay, so from my understanding:

 

1.  bbcode is essentially going to be reduced to a programmer-only plugin deal

2.  bbcode html CANNOT be updated for all posts if you need to make changes to the bbcode html.. that is if you update the plugin it will only impact NEW posts

3.  If you use bbcode you cannot edit the posts unless all the embedded html is whitelisted

4.  If you use this editor for an article in IP.Content or a blog and include bbcode.. you better nail it on the first try

 

My money is that you are going to upset a number of existing clients with this..  Is the editor pluggable at least?  I know you are clearly proud of your CKEditor adaptation but this solution doesn't work.   In fact, it's worse than the current editor (not entirely, but at least for bbcode).

 

I just hope that I'm mistaken here.

Share this comment


Link to comment
Share on other sites

I am guessing that part 4 will answer this.  All I need to know is that you will be able to create Tables through the editor in forum, blog and content areas. Please tell me that will be possible without have to do super duper special HTML stuff that will break if you switch back to the editor :smile:

 

 

Yes. There is a CKEditor plugin for tables - you can add it just like I added the "symbol" plugin in the example :)

 

So, does that mean items that are available in the default installation of CKEditor can be turned on? (Tables, horizontal rules, for example)

 

 

We won't ship with them, but yes, you can download them from CKEditor and drop them in :)

 

 

 

 

Okay, so from my understanding:

 

1.  bbcode is essentially going to be reduced to a programmer-only plugin deal

2.  bbcode html CANNOT be updated for all posts if you need to make changes to the bbcode html.. that is if you update the plugin it will only impact NEW posts

3.  If you use bbcode you cannot edit the posts unless all the embedded html is whitelisted

4.  If you use this editor for an article in IP.Content or a blog and include bbcode.. you better nail it on the first try

 

My money is that you are going to upset a number of existing clients with this..  Is the editor pluggable at least?  I know you are clearly proud of your CKEditor adaptation but this solution doesn't work.   In fact, it's worse than the current editor (not entirely, but at least for bbcode).

 

I just hope that I'm mistaken here.

 

You're mistaken. If you could give an example of what scenario you're thinking of (if you have a custom BBCode that is required for your community, let me know what it does) I'll try to explain better how that scenario will work in 4.0 :)

Share this comment


Link to comment
Share on other sites

I don't know if its me, but the font looks different, doesn't look like standard basic web fonts, could just be me though lol

looking nice n sleek so far, keep up the good work IPB ;)

Share this comment


Link to comment
Share on other sites

Could you touch on my concern regarding the WYSIWYG-editor being to hard to get a overview in? 

 

What I mean is that when all images, videos etc. are parsed and shown in the editor window, it can get hard to get an overview of the post. Especially when the images are very large. 

 

Will you do anything to resolve this? 

 

 

Will it be possible to "debug" posts for members and admins in order to sort out problems with a post? 

 

Please could you shed some light on this? Maybe have a setting to turn off image parsing on the fly? Or just display thumbnails. Something.

 

The problem being when an image is 800px tall and you have five in a post. it's going to be a little clumsy scrolling through the whole post to make changes.

Share this comment


Link to comment
Share on other sites

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

Share this comment


Link to comment
Share on other sites

You're mistaken. If you could give an example of what scenario you're thinking of (if you have a custom BBCode that is required for your community, let me know what it does) I'll try to explain better how that scenario will work in 4.0 :smile:

May I?

 

I have a [sparkle] bbcode. Users type in [sparkle]text[/sparkle] which becomes

<span class='sparkle'>text</span>

and in my skin I have

.sparkle{
background: url(http://url.to.a.sparkle.gif.here.gif) repeat-x;
}

Is the editor a wysiwig in the sense that when people click on my sparkle BBCode's button then the sparkle class will be assigned to that text within the editor and they'll see that effect in the editor? If so, that is extremely impressive. But then the question being asked here is what happens when I come back later and decide to change the bbcode and make it replace with

<span class='sparkle'><strong>text</strong></span>

Will the change be applied to all posts or only future posts? Basically, how is the post being stored? You've talked about the bbcode/html split repeatedly and how it's a problem. From the front end it seems you've got it down solid and things will work flawlessly, but admins like myself want to know what you did to the backend and if we're going to be seeing ALTER queries on our post tables and if we're going to have to rebuild our posts.

 

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?

 

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

Share this comment


Link to comment
Share on other sites

The downside to this approach is that custom BBCodes can no longer be added through the Admin CP.

 
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?

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