Forum Documentation Showcase Pricing Learn more

Rich Text Editors: Which do you use and why?


#1

Hi all,

I need a Rich Text Editor for my next project. The content I’ll be putting in there might be one to a few pages long if it was printed out. I’m aware of the following options (are there others?):

  • Rich Text Input
  • bdk Text Editor
  • Trix Rich Text Editor
  • Vanilla Rich Text Editor Pro
  • ZQ Rich Text Editor

I would love to know which one you use, why you chose it, and what’s great about it.

Thanks, Andrew


#2

I’m really curious how @renelonngren made his text editing in his recently launched app. That was pretty dang slick.


#3

I thought so too :smile:


#4

@renelonngren used @zeroqode ZQ text editor in its “air-mode”.

I’m using @gaurav’s bdk text editor which is based on QuillJS and also has an “air-mode” The ZQ Rich Text Editor is also based on QuillJS.

I personally love working with plugins that Gaurav builds. They almost always work, unlike other 3rd party plugins that seem to be half baked with many bugs. He also prices them very reasonably and quickly makes suggested improvements/enhancements when requested.


#5

I am actually using the ZQ Rich Text editor in air mode (I did try the Vanilla editor first).

There are two slight inconveniences to the air mode btw:

a) user needs to mark text to get the editor to pop up, I wonder @levon if there is a way to force the inline editor into view using a button?

b) when inserting images you can not paste an url but need to upload the image from local - this can perhaps be fixed?


#6

The bdk editor allows pasting images from the clipboard, among other improvements that Zerocode’s implementation of QuillJS editor is lacking.


#7

we’ll try to implement both of these, and i will update if we succeed


#8

Hey @andrew4… great post, and thanks for initiating the discussion!

My users will create a lot of rich text, and my app will be doing lots of concatenation of that text with plain text, hence the most important thing for me is that the editor works in bbcode rather than HTML. But then I want to email that text, and it seems it needs converting to HTML to do that!

So currently, in development, I am using the Bubble Rich Text editor as it works in bbcode. It sometimes introduces a few extra line feeds, and you have to be careful to only paste plain text into it, or things can go a bit odd if you forget that. But it generally works okay.

I’d love to know what format the other editors work in, as I’m really short of time to evaluate them all. I tried the Zeroqode one and it works only in HTML so doesn’t work for me. The ideal editor will work in bbcode but export in HTML… or I find a bbcode to HMTL converter.

Best wishes,
Antony.


#9

Just switched to ZQ Rich Text Editor :slight_smile: @levon


#11

Hi @renelonngren we have updated the plugin and added workflow to set focus inside the editor, so now you can do that with a button.

you mean you want to paste URL so that it shows the image inside the editor instead of simply a link? We are working to add copy/paste from buffer (like if you make a screenshot on your device it goes to a buffer and then with Cmd+V it gets pasted inside the editor). But please let me know what you meant exactly


#12

Thanks Paul! :slight_smile:


#13

Hi @antony. I’ve been testing the bdk Text editor. You can save from it in text, rich text (but not bbcode, I think) or HTML. I know there are javascript libraries out there, as well as websites that do bbcode/HTML conversions, so one way or another it should be possible.

FYI, here’s some sample output from the bdk Text Editor:

Original (approximately)
Test Heading

  • List Item One
  • List Item Two
  • List Item Three
    A short paragraph.

Text
Test Heading
List Item One
List Item Two
List Item Three
A short paragraph.

Rich Text
{“ops”:[{“insert”:“Test Heading”},{“attributes”:{“header”:1},“insert”:"\n"},{“insert”:“List Item One”},{“attributes”:{“list”:“bullet”},“insert”:"\n"},{“insert”:“List Item Two”},{“attributes”:{“list”:“bullet”},“insert”:"\n"},{“insert”:“List Item Three”},{“attributes”:{“list”:“bullet”},“insert”:"\n"},{“insert”:“A short paragraph.\n”}]}

HTML
<h1>Test Heading</h1><ul><li>List Item One</li><li>List Item Two</li><li>List Item Three</li></ul><p>A short paragraph.</p>


#14

we’ve actually just enabled it, please check it out to see if it’s what you had in mind.
thanks!


#15

Thanks Levon for the updates. I will need to rebuild some aspects of my app to be able to update, will do that once I have some more time on my hands.

A couple of reflections:

a) I am pretty sure I was always able to paste images directly into the editor when in full mode. I even told Guarav about that being a feature he needed before I would consider his editor, he has since added it.

b) what I meant by being able to paste in url’s is that in the airmode you were (are?) only able to upload images from local, there was no field to paste in urls - which you can do in full mode.


#16

What would be cooool, is a keyboard shortcut for add image to save scrolling up and down :wink: