quill

According to the documentation, Quill can handle the Enter key but I can't make it work. I have followed these steps listed on their site: Import Keyboard module: const Keyboard = Quill.import('modules/keyboard'); Quill.js Extension import documentation. Add the custom event called key binding. Quill.js Key binding documentation Call a function to handle the event. My code is the following: quill.keyboard.addBinding({ key: Keyboard.keys.ENTER, handler: function(range, context) { console.log('Enter Key!!!'); result.innerText = 'Key presset = ENTER'; } }) Code example I have tried on Chrome

I am using the quill text editor in a javascript app and I need to retrieve the contents of the text editor as a string with the HTML included but the docs are a little sparse on this subject. Quite simply by accessing the editor's innerHTML: var quill = new Quill('#editor', { theme: 'snow' }); // .... var editor_content = quill.container.innerHTML // or quill.container.firstChild.innerHTML could also work Hope this helps! Depends what you want to get, here's an example showing a few ways: http://codepen.io/k3no/pen/amwpqk var delta = editor.getContents(); var text = editor.getText(); var

I successfully implemented a form with quill wysiwyg but now I want to create a component to reuse it. This is my working implementation: <template name="form"> <form> <div id="toolbar"> ... html with toolbar buttons </div> <div id="editor"></div> <input type="submit" value="save"/> </form> </template> Template.form.rendered = function () { this.quill = new Quill('#editor', { modules: { 'toolbar': { container: '#toolbar' }, 'link-tooltip': true }, theme: 'snow' } ); } Template.form.events({ 'submit form': function(e, tmpl) { e.preventDefault(); var html = tmpl.quill.getHTML(); // code to save

I'm investigating the use of Quill for a project, and I need to know if it's possible to create a custom format/blot with more complexity than a single element and a single parameter. An example of one of the layouts I want would be: <span class="format-container"> <span class="format-info" data-attr="param 1 (non-displayed)"> param 2 (displayed to user -- click to invoke application UI to edit) </span> <span class="format-content"> User's text/child elements go here </span> </span> In all cases I'm looking into, the custom formats are of inline scope and still have a single parent container

I want to add a couple of pre-built labels like <div class="label"> Label Text <span>x</span><div> to the html content in the quill editor. Add such a tag should not be a problem in itself. However I don't want the user to be able to edit the text inside the label. The cursor should not even be allowed to be placed inside the label. On delete the whole div should be deleted. The whole label should act like an image in some sense. Is it possible ? You should be able to achieve this by writing your own Blot : class Label extends Parchment.Embed { static create(value) { const node = super.create

I have what I think is a very common scenario. I would normally have this form: <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> Then with PHP I would capture the data from the form ($_POST['text']) and I could use that in another variable. Now, I'd like to use Quill so users have a nice rich text editor instead. Quill seems very well suited for this and the documentation is very detailed. However, for some reason I can not find how I can "post" the data to the form. There is one single sample page that sort of does what I want, but I am

I'm trying to create a custom class attributer in QuillJS. I've got this far: let config = { scope: Parchment.Scope.BLOCK, }; let MClass = new Parchment.Attributor.Class('mark', 'dom-mark', config); Quill.register(MClass,true) But when attempting: this.quillEditor.format('mark', 'MarkThisHere'); I get: ERROR TypeError: BlotClass.create is not a function What am i doing wrong? Works for me in this example . Parchment = Quill.import('parchment'); let config = { scope: Parchment.Scope.BLOCK, }; let MClass = new Parchment.Attributor.Class('mark', 'dom-mark', config); Quill.register(MClass,true)

I would like to create a custom embed format which can be styled but it's text cannot be changed. My use case is pretty similar to the hashtag case. I want to have an external button that will add an hashtag to the current selected range on the editor. But after doing this i want the hashtag to behave as a "block" so that the user cannot go there and change its text. The only way i could accomplish this was by saying that the format's node is contenteditable=false but i'm not sure i'm going the right way as i'm having some issues with this approach, mainly: If the hashtag is the last thing on