After many months of development, we are very excited to unveil a new Rich Editor, an enhanced WYSIWYG (what you see is what you get) experience. This project has been the culmination of much work amongst several developers on our team and we are so happy to finally share it with you.
(left to right: Vanilla Forums Developer, Adam Charron and Vanilla Forums co-Founder Todd Burry chat with Head of Community, Adrian Speyer about the new rich editor)
Why even bother with a new editor?
Certainly, there are many people who will wonder why we bothered. Wasn’t our current advanced editor adequate? As with most things in Vanilla, we always strive for a better user experience and we drove to rethink the editor from the core. We paid careful attention to the kinds of editors people are now used to using, and what they have to expect.
As co-founder of Vanilla, Todd Burry noted “For most people our Advanced Editor was good enough, but we couldn’t have a true WYSIWYG experience, so we needed to move to a more modern architecture. Making this change will allow us to expand the editor for future features and projects we have planned in the not too distant future. This is only the first step, and the initial release for this project, but many exciting things are planned.”
What are some of the new benefits of the Rich Editor?
I sat down with Adam Charron, the lead product developer on this project, to discuss the finer details of the new editor and get under the hood.
Adam was quick to reinforce Todd’s comment on the new architecture; “We decided to reboot with a simpler UI and try to get a really good foundation for the future. With our current editor, we had challenges with edge cases and lack of flexibility because we were using mostly 3rd party libraries to make the WYSIWYG editor work. Now we have much more flexibility which translates into ease of use such as being able to support @mention in custom communities where user names have spaces or special characters.”
Smaller learning curve and exquisite experience
One of the the first things you will notice with the new rich editor is that the preview post option is gone. Truly “what you see is what you get” is at the heart of this. We wanted to provide a more real time experience using direct 1 to 1 mapping from keyboard to screen. Only the 'spoilers' do not work this way - these are placed in a defined box until the reader chooses to see it.
The way we store the data of posts is now different. We generate the output of the post right away, with the old editor we did a lot of HTML sanitization on every render. As Adam told me, “We are storing the data in a more structured format, so we can see right away if something is allowed or not allowed in the content. This way we can ensure only safe content comes out. This makes the new editor much more efficient.”
Everyone loves emojis! In our old editor, we had a limited set of emojis available - a user could always input emojis from their browser/app but the render would be dependent by the readers OS. With the new editor we offer a full gamut of emojis! Over 1000+ emojis will be available, categorized by type. It should render across devices, and if not there are image fallbacks for all of them. (Thanks to Stephane for all his hard work with this!)
For a long time Vanilla has had a feature called auto embed - this idea was that if someone posts a link from Twitter or Youtube, the content should render and be interactive in the community. We have brought over all the services we had before including: Pinterest, Soundcloud, Instagram, Twitter, YouTube, Vimeo, Wistia, Giphy (thanks Chris!) and many more. We have made it easier to add new services in the future too.
With the new editor we are also bringing Rich Link Embeds, which allows content from a link shared from the web to grab an image and content, so you can get a preview before you click - this is great in communities where people may share news stories or other resources. Members will get a much better idea of the content shared.
With the new flexibility added, we have built in automated tests for the editor which can be run before we deploy any new code.
We are very concerned about accessibility so our developer Stephane has done lots of work following the best practices to ensure we use the latest browser standards so that we are compatible with assistive technologies. This enables us to be more accessible friendly, because we have more control over how things work.
Ready to get started?
If you are excited to get started with the new rich editor, it’s relatively simple. Keep note this new editor is an option for those communities currently or wanting to use a WYSIWYG editor. If you want to use BBCode or Markdown you are free to still use the advanced editor. We have plans for enhancements for those in the future.
To get started, all you need to do is toggle on the Rich Editor Add-on, and then select Rich from the Posting settings in the Discussion side menu of your dashboard .
One quick note: new posts will use the rich editor, old post will use the Advanced editor. That’s it, you are ready to go!
If you are looking for more in-depth info about the editor, you can can check out the docs here.
We hope you and your community enjoy using it!