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.
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.
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?
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.
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/
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.
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
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.
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.
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.
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?
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!
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.)
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).
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?
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.
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.
> 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".
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?
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
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?
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.
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.
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.
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.
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.
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 :)
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.
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, ...
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.
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/