
Quill – An Open Source Rich Text Editor with an API - jhchen
http://quilljs.com/
======
rattray
As someone who had tried to implement a modern rich text editor with custom
plugins, this seems like a terrific solution to a real problem. I had used a
fairly nice wrapper around contenteditable[0], but this seems like a much more
featureful, easily extensible option. The other options (CKEditor seemed most
popular) are heavyweight, complex, poorly documented solutions that don't seem
amenable to easily creating lightweight plugins, modules, etc.

I have high hopes for what these guys produce.

EDIT: Just wanted to add that looking through the API docs, it seems to solve
exactly the problems I had. Would have made a measurable difference to my
business to have had this, if it does what it says it does.

[0] [http://mindmup.github.io/bootstrap-
wysiwyg/](http://mindmup.github.io/bootstrap-wysiwyg/)

~~~
jhchen
Thank you for the high praise. We definitely view the API as our main
differentiator vs other editors. Hope you will not be disappointed!

~~~
slight
Oh is this the one from the Guardian? Great to see a release, I've been
meaning to have a proper look since the announcement.

~~~
jhchen
This project was started originally at Stypi where we needed an editor with a
better API than just getting/setting the text to support coauthoring. We
didn't find any good enough and because it was core to our product, we started
to build our own.

Stypi was acquired by Salesforce in 2012 but we continued to work on Quill
because we felt it was a missing piece of the web. We're now working for
GoInstant (also acquired by Salesforce in 2012), who are also working on some
very cool stuff.

Quill was originally called Scribe but then another editor released a bit ago
with the same name so we changed it to Quill.

------
annnnd
This project looks nice, but I have used a few of WYSIWYG editors (mainly
HTMLarea/Xinha and FSCK/CKeditor) and must say I was NOT impressed with the
calls I got from customers: "If I am using IE6 and when edit text I get lots
of newlines... But if I edit the same text in FF, it is all garbled. Why is
that?"

Granted, it's been a few years so this might be solved by now, but to me the
final solution was WYMeditor [0]. It makes sense too - user should enter
content and mark it as title / text / subtitle, add images and similar... but
the design of the final page should be left to designer, not to user. What if
you want to change the design sometime later?

[0] [http://www.wymeditor.org/](http://www.wymeditor.org/)

------
habosa
This looks excellent, I think I'll use it to replace my current solution. I
use hallo.js (on blogmask.com) which is also great but falls short when you
want to add custom controls or styling. I've had a lot of trouble with images,
etc.

~~~
kordless
blogmask.com looks interesting. Have you thought about Markdown support?

~~~
habosa
I have, I think I might switch to Quill for that.

Blogmask is an interesting side project but I don't have much time for it.
Always looking for open-source contributors though.

------
leeoniya
this looks cool and super easy to add bidirectional HTML <> markdown support
similar to the demo i did for redactor-js here:
[http://leeoniya.github.io/redactor-js/](http://leeoniya.github.io/redactor-
js/)

using
[https://github.com/leeoniya/reMarked.js](https://github.com/leeoniya/reMarked.js)
and [https://github.com/chjj/marked](https://github.com/chjj/marked)

may just have to do this after work today if no one gets to it first.

~~~
yaddayadda
Quill's WYSIWYG + HTML<->MD bidirectional support (e.g. leeoniya's example) +
ShareJS' operational transformation [1] == awesome collaborative JS-ish web
editor stack

Throw in a ShareJS script to autosave [2], an it's even more awesome!

[1] [http://sharejs.org/](http://sharejs.org/)

[2]
[https://gist.github.com/josephg/1341527](https://gist.github.com/josephg/1341527)

Relevant Githubs:

\- [https://github.com/quilljs/quill](https://github.com/quilljs/quill)

\- [https://github.com/josephg/ShareJS](https://github.com/josephg/ShareJS)

Edited: to account for leeoniya's explanation that follows

~~~
leeoniya
just to clarify, Redactor has nothing to do with the bidirectinal support. I
implemented it using the listed HTML > markdown and markdown > HTML libs and
about 10 lines of code. This support can just as easily be added to any
WYSIWYG editor that can bind keyup, and has getHtml() and setHtml() methods.

EDIT: and to really come full circle, instead of rendering the markdown in a
plain textarea like the example, render it inside of Codemirror with syntax
coloring.

------
solotraveller
Quill looks promising,but pasting from word doesn't seem to work.Most editors
built today focus a lot on semantic tags generated for bold(<strong>) and not
much on paste from word.Would love to see an editor that implements proper
paste from ms word

~~~
virtualwhys
Word is a quite a PITA indeed, have yet to find a client-side editor that
reliably strips out the boatloads of extraneous markup that a simple copy-
paste from Word generates.

------
elwell
Source [0] is sane oop coffeescript. Will probably find a use for this.

[0] - [https://github.com/quilljs/quill](https://github.com/quilljs/quill)

------
nicklovescode
As someone who has struggled with this problem recently, thank you. I've spent
a good portion of the last week battling irritating Redactor issues such as
global variable conflicts and literally hardcoded PHP path values.

I will be very happy if this turns out to work as good as it looks at a first
glance.

~~~
scraplab
FWIW: we tried to submit a patch to Redactor, but it was refused, partly
because they didn't use version control.

------
jdp23
Looks promising! Looking through the toolbar customization, I couldn't tell
how easy it would be to add a toolbar element that isn't one of the existing
behaviors -- for example, a toolbar element to bring up an emoticon pallette.
Is that something that's currently supported?

~~~
jhchen
It's intended to be simple though we can definitely use some better
documentation in this area. All you need to do is pass in a config. You can
take a look at some configs in src/format.coffee. Most are just a few lines
(though we need to document what they mean). For example link is just { tag:
'A', attribute: 'href' }.

Realistically though will probably end up adding all of the common formats
leaving just custom ones for the user. But even custom ones should be simple.
For example all we did to define a custom authors format in the Authorship
module was quill.addFormat('editor', { class: 'author-' }).

Better documentation (and more predefined formats) to come!

~~~
jdp23
Seems straightforward, thanks for the reply!

------
OliverJAsh
Just to clear up any confusion: this is not the same as the Guardian’s
“Scribe” project
([https://github.com/guardian/scribe](https://github.com/guardian/scribe)). I
believe Quill did used to be called Scribe, but they are not the same.
(Similar in purpose - take your pick.)

~~~
aleem
This had me confused until I read your comment, thanks for clearing it up.

I love scribe, it's the most consistent of all the editors I have tried (and I
have pretty much tried them all). Would love to see image support though. I
know there is a pull request pending for some time on this issue but hope it
can make it to the core. Even nicer would be to have hover controls on
inserted image (using shadow DOM I presume) that allow modifying its
attributes (right/left align, alt text etc).

------
tesin
Your 'try me out' section is cut in half, with a need to scroll down, on a
large laptop screen.

Having that footer be a fixed overlay may be fine on giant desktop monitor,
but the website is pretty terrible on a smaller one.

edit: I stand corrected. It stays awful no matter what the screen size...

------
brc
Forgive the TL;DR; - the examples on the site don't include any image
inserting. How would I go about adding image insertion capability? Would the
idea be that I build/find an image handler plugin module and add it in?

~~~
jhchen
If you want to use the same image tooltip as the homepage, you just need to
add the 'image-tooltip' module and have a toolbar button with the class 'sc-
image'. We didn't add it to the examples page editors for aesthetics (the
tooltip is bigger than the editor) and thought it was sufficient to just demo
the capability on the front page.

We realize and apologies for the lack of documentation for modules. One reason
is the module interface is not finalized because we're not sure what the
community will dream up and wanted to get feedback before making a decision
that might unintentionally exclude certain use cases or encourage
unsustainable designs. Depending on what's decided we will probably add
functionality to the existing image tooltip. We'd love for you to be involved
in the discussion if this is an area of interest.

------
nkozyra
Next to CKEditor, I presume this is significantly less complicated and
smaller, but how does it compare in terms of compatibility? As I understand it
CKEditor does well on a lot of older browsers.

------
darkstar999
This looks much better than its counterparts so far!

I couldn't figure out how to remove a URL from a selection of text.

It would be awesome to see an example of how to let the user upload an image.

~~~
byronm
> I couldn't figure out how to remove a URL from a selection of text.

If you highlight the text, and click the link hyperlink icon in the toolbar,
the URL will be removed. The link overlay UI doesn't support that though;
we'll add a "remove" action in addition to "change".

------
smnrchrds
Does it support right-to-left and bi-directional documents?

------
scottmessinger
Congrats on releasing Quill! I've been following the development since it was
called "Scribe" and I'm excited it's released.

I noticed there seems to be support for block level formatting (e.g. "h1"),
but it doesn't look like it's been implemented yet. What's your plan for
handling bullets, headings, block quotes, and other block level formatting
options?

~~~
misiti3780
I was using scribe recently, but quill seems more promising. as far as i can
tell, they both have basically the same functionality but quill works in a
browser with require.js

------
kijin
Looks fantastic, but I can't use it in my projects because it only seems to
support very recent versions of IE (9+), Android (4.3+) and iOS/Safari (7+). I
don't care about IE, but I do need to support Android phones from 2012.

Is there really no way to write a modern rich text editor that remains
compatible (and/or degrades gracefully) with slightly older browsers?

------
grey-area
The biggest issue I've had with this sort of editor is pasting from word or
other programs which attempt to insert formatting, how are you planning
handling that? Do you currently strip out spurious tags received like comment
tags? It'd be great to see everything stripped except b and i tags for
example.

~~~
OliverJAsh
Scribe comes with a “sanitizer” plugin. See
[http://www.theguardian.com/info/developer-
blog/2014/mar/20/i...](http://www.theguardian.com/info/developer-
blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-
editor)

~~~
grey-area
Thanks, definitely going to take a look at Scribe. We're currently using
redactor, but would prefer something open source. Scribe looks really good but
I haven't had time to play with it yet.

------
Sir_Cmpwn
Doesn't work great on Firefox for Android, despite claims to the contrary. It
looks great for desktop, though.

~~~
jhchen
Quill developer here. I'll look into the issue for Firefox for Android. It
appears to be doing something different than its desktop counterpart. Feel
free to submit an issue on Github for tracking though. It will be tough to
officially support Firefox on Android though as we use Sauce for automation
and it does not appear to be supported there.

~~~
laurent123456
Regular Firefox doesn't seem to be fully supported either. I've tried to
select a line by double-clicking on it then clicking on the "B" button, but
instead of making the line bold, it unselected it, selected the first
character or word (depending on the line), and made it bold.

If I only select a few words it seems to work though.

------
tortilla
This looks great, I've been using Summernote but that's tightly coupled with
Bootstrap.

[http://hackerwins.github.io/summernote/](http://hackerwins.github.io/summernote/)

------
elwell
Not to sound greedy, but LaTeX support would be a great addition.

~~~
paultannenbaum
From a quick glance of the project, that feature would just be a building
plugin that leverages the existing api.

------
svnehruji
Great guys! I'm looking for one feature in rich text editor, which is bulletin
points with checkmark instead of rounded dots, but I couldn't that in any
RTEs.

------
sevilo
looks great, was really desperately looking for something like this for a
personal project earlier this year, but couldn't find anything that I was
perfectly happy with... ended up using a jQuery plugin, but bugs out quite a
bit across browsers. Guess I'll give this a try and see if I could replace the
old one :)

------
rpwverheij
looks really nice! Though the most important thing for me would be an easy way
to add image upload functionality. Most opensource editors seem to only
support insert image from URL, but some standard plugin for PHP upload, or any
other language, would make it a winner for me.

------
shaohua
I like it. After spending half a year building something in-house, I just wish
this was out earlier.

------
bronson
3 clause BSD license. Kind of an odd choice these days.

~~~
theallan
I have no relationship to the project, but I'm curious to know why you think
that? The BSD license is extremely liberal.

~~~
bronson
Because the 2 clause BSD exists now. The 3 clause makes some things a little
weird. What actions are included by 'endorse'? Exactly what is a
'contributer'?

And even the 2 clause has the documentation requirement. Different projects
interpret it different ways, and many projects ignore it. But, if you have
documentation (exactly what is meant by that?), you had better include therein
the disclaimers of all the BSD-licensed projects you used. It can be a lot to
keep track of.

There are other licenses out there that do a much better job of being liberal.
MIT is the most popular, but there's also ISC, Fair, even LGPL, ...

------
derengel
do you guys plan to add tables editing support? :)

~~~
noisy_boy
That and the ability to indent text.

------
ilaksh
Why do we need yet ANOTHER rich text editor? Especially why do we need another
one with no support for tables?

~~~
rattray
No rich text editors I have found are built for lightweight extensibility,
especially when it comes to realtime support.

The core value proposition here doesn't require feature-completeness in my
opinion; with a great API for modules, table support (for example) could
easily be added by a developer. I would encourage the core devs not to build
things like that just yet, personally.

------
mrottenkolber
Pleaaaaase stop using icon fonts. I will not load your fonts.

~~~
nkozyra
You already did!

~~~
mrottenkolber
I did not. I wouldn't have noticed if I did.

