New Editor: Redactor (Part 2)

  • In the previous spotlight WBB4.1 — New Editor: Redactor (Part 1) we have shown the common functions and the general integration into the upcoming version Burning Board 4.1. We have added a few more features which should assist the user in the everyday use and to provide a better WYSIWYG experience.


    Visual Quotes



    Quotes are now rendered as closely as possible and can be easily worked with in the WYSIWYG-mode instead of facing a rather large BBCode which caused a lot of distraction. All the changes to the quick reply feature in Burning Board 4.0 and 4.1 were pointed towards a more realistic work-flow where your users type in their message and once submitted will be presented their message just like they saw it in the editor (sadly CKEditor wasn't cooperative, preventing us to do that with Burning Board 4.0). General speaking, we're looking forward to implement more visual representations for BBCodes in future releases.




    If you click on the quote header, you'll be presented a small button to edit the quote, both the author and the link to the original source.



    Neither the author nor the link to the source are mandatory for quotes and there are always reason why you would provide only a blank quote. In the final post the quote header is hidden in case there is nothing to display, but for usability reasons the system will show a pseudo header, allowing to add an author and a source at any time.


    Drag & Drop



    Burning Board 4.1 adds the ability to utilize the attachment system by dragging files from your local computer into the Redactor editor. The screenshot above shows the editor state once a file is being dragged over the browser window and shows the possible drop location.



    Once the file is dragged right over the drop area, it will change its color from yellow to green along with an updated message being displayed. The updated visuals indicate that the editor is ready to receive the file and should aid less-experienced users to properly use the system.



    The dropped file is directly uploaded using the attachment system and will be available for insertion once the upload has been completed.


    Automatic Save


    Losing a written message can have various different reasons, e.g. accidentally closing the tab or a full browser crash. Burning Board 4.1 adds an automatic save of messages to restore them once you open the editor again. These saves occur in the background every minute and utilize the browser's built-in localStorage, a persistent and website-specific storage.


    This has a few advantages over saving it on the server:

    • Saving on the server requires periodic requests, this creates an additional load on the server and a lot of hosting companies considers this a violation (treated as chats which are usually disallowed)
    • Most plans for internet on mobile devices come with very low included bandwidth (and astronomical charges if you exceed it), even though every request is rather small, each save adds a small chunk on the pile which could grow big by the time
    • Especially mobile devices can lose their network connectivity due to bad and/or unstable network coverage, storing the message on the local storage works regardless of this
    • Some browsers on mobile devices limit periodic requests to save bandwidth, since all is done locally the automatic save will continue to work
  • Would be really nice if you can wrap text around the photo. That would be a big plus (desired feature) for blogging.


    You can set an image to float left/right. This is even possible in Burning Board 3 and 4, but requires manually adding an attribute to the BBCode: [img=left]http://example.com/example.png[/img] (floats left). In Burning Board 4.1 you can click on the image and open the edit overlay, allowing you set it directly without manual editing.


  • You can set an image to float left/right. This is even possible in Burning Board 3 and 4, but requires manually adding an attribute to the BBCode: [img=left]http://example.com/example.png[/img] (floats left). In Burning Board 4.1 you can click on the image and open the edit overlay, allowing you set it directly without manual editing.


    So just so we are clear and there is no misunderstanding, you will be able to wrap text around a photo?


    See demo of it here http://imperavi.com/redactor/

  • Exactly, floating means it will align to the left or right and other elements will float around it. The example shows it perfectly.

  • Funktioniert auch mit Anhängen, siehe hier ;)
    Und noch eine Zeile ;)


    Code
    1. [attach=93972,left][/attach]

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • But one has to type the commands (alignment) manually and not as Alex described it with an overlay?


    I was referring to images using the img-bbcode, not attachments :P I'll look if I can get it to work on image attachments too.


  • I was referring to images using the img-bbcode, not attachments :P I'll look if I can get it to work on image attachments too.


    This would be a big plus in my book. I prefer and strongly encourage people to attach photos and not just randomly hotlink things. Namely because I don't want those images changing or vanishing or making things slower to load (dependent on the source location).


    So if this can work with attached photos, this would be very good.

  • I have looked into it and it will take some time to implement it. Chances are this will not be implemented in the first beta, but I intend to add it before the gold release.


  • That's cool because the new API is more straight-forward and better organized.
    That's bad because I now have to rework major parts of the plugins which takes some time.


    Let's pretend I was bored anyway :P


    I actually have access to a copy of Redactor myself and I can only imagine what crazy changes you needed in v9. But looking over v10 it does seem as though you'll have to rework your magic, but they have made it A LOT easier to "plug in" (for a lack of a better phrase), which means it does appear less tweaking (code and notes) to add it into the core of WBB. So this will be worth the add.



    Thank you @Alexander Ebert

  • I actually have access to a copy of Redactor myself and I can only imagine what crazy changes you needed in v9. But looking over v10 it does seem as though you'll have to rework your magic, but they have made it A LOT easier to "plug in" (for a lack of a better phrase), which means it does appear less tweaking (code and notes) to add it into the core of WBB. So this will be worth the add.


    I have to do the change because otherwise things will most likely break with Burning Board 4.2 so it's better to do it now while it has no been published yet.


    Even though you are right that the plugin interface is a lot easier now, I have written some plugins which modify the core of Redactor both to resolve issues and to add required features. That's the great thing compared to CKEditor, with CKEditor we had to rely on the developers to get things fixed and since they take ages to address issues, that was simply unacceptable. With Redactor I resolve issues on my own and report them to the developers to get my fixes added to the next release.


  • I have to do the change because otherwise things will most likely break with Burning Board 4.2 so it's better to do it now while it has no been published yet.


    Even though you are right that the plugin interface is a lot easier now, I have written some plugins which modify the core of Redactor both to resolve issues and to add required features. That's the great thing compared to CKEditor, with CKEditor we had to rely on the developers to get things fixed and since they take ages to address issues, that was simply unacceptable. With Redactor I resolve issues on my own and report them to the developers to get my fixes added to the next release.



    This is what I like about Woltlab Burning Board. I've used many other developments in the past and anytime something new came along, we all had to wait for the next release, especially if development was getting closer to releasing something (even beta). And I know you and the team have been working hard and with the screenshots, things have clearly progressing.


    Yet unlike other developments, you don't let that deter you from adapting new technology. And despite having coded your hearts out on Redactor 9, you're willing to take the time and reassess things to apply Redactor 10.


    Looking forward to WBB 4.1 :D