Quill – An Open Source Rich Text Editor with an API

by jhchen • 12 years ago

387 60 12 years ago

leeoniya2• 12 years ago

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/

using https://github.com/leeoniya/reMarked.js and https://github.com/chjj/marked

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

yaddayadda• 12 years ago

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/

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

Relevant Githubs:

- https://github.com/quilljs/quill

- https://github.com/josephg/ShareJS

Edited: to account for leeoniya's explanation that follows

leeoniya2• 12 years ago

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.

jlu• 12 years ago

If anyone's interested in two-way markdown/HTML editing, give visual-marks.com a try, it syncs contents both way.

Sir_Cmpwn• 12 years ago

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

jhchen5• 12 years ago

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• 12 years ago

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.

tesin• 12 years ago

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

darkstar999• 12 years ago

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• 12 years ago

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

rattray2• 12 years ago

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/

jhchen5• 12 years ago

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• 12 years ago

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.

bronson2• 12 years ago

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

theallan• 12 years ago

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

sergiotapia• 12 years ago

It's odd because I think it's only

bronson2• 12 years ago

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

tortilla• 12 years ago

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

http://hackerwins.github.io/summernote/

scottmessinger• 12 years ago

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• 12 years ago

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

ilaksh• 12 years ago

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

rattray2• 12 years ago

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.

jdp232• 12 years ago

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?

jhchen5• 12 years ago

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!

jdp232• 12 years ago

Seems straightforward, thanks for the reply!

smnrchrds• 12 years ago

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

mrottenkolber2• 12 years ago

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

nkozyra2• 12 years ago

You already did!

mrottenkolber2• 12 years ago

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

angersock• 12 years ago

Porque?

habosa2• 12 years ago

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• 12 years ago

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

habosa2• 12 years ago

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.

nkozyra2• 12 years ago

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.

elwell2• 12 years ago

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

[0] https://github.com/quilljs/quill

elwell2• 12 years ago

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

paultannenbaum• 12 years ago

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

nicklovescode• 12 years ago

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• 12 years ago

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

OliverJAsh2• 12 years ago

Just to clear up any confusion: this is not the same as the Guardian’s “Scribe” project (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• 12 years ago

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

sevilo• 12 years ago

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

derengel• 12 years ago

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

noisy_boy• 12 years ago

That and the ability to indent text.

kijin• 12 years ago

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?

brc• 12 years ago

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?

jhchen5• 12 years ago

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.

solotraveller• 12 years ago

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• 12 years ago

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.

decad• 12 years ago

Support for copy and pasting from ms word is the biggest issue I currently have at my day job. We are creating online learning environments where the majority of the content has been created in other formats and is copy and pasted into our systems. We currently use TinyMCE but it is a pig to work with and I'm desperate for a better solution.

crucialfelix• 12 years ago

yep, real world problems. I use lxml (python) on the server to remove the crap.

the ms markup is often much larger than the content

rpwverheij• 12 years ago

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.

annnnd• 12 years ago

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/

grey-area2• 12 years ago

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.

OliverJAsh2• 12 years ago

Scribe comes with a “sanitizer” plugin. See http://www.theguardian.com/info/developer-blog/2014/mar/20/i...

grey-area2• 12 years ago

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.

jagi4• 12 years ago

I tried to paste text from Word 2013 on chrome and it's possible to only as plain text. The normal Paste did not do anything..

svnehruji• 12 years ago

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.

shaohua• 12 years ago

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

Quill – An Open Source Rich Text Editor with an API

Related Stories