javascriptwysiwygquill

QuillJS - require to click on first row to focus

On QuillJS I need to click first row to focus, while I would like to the whole editor be clickable.

I tried to add contenteditable="true" on the div and it worked, but this made a lot of mess (eg. problem with pasting text).

Configuration in JS:

let quill = new Quill(`#${quillId}`, {
    modules: {
        toolbar: toolbarOptions,
    },
    placeholder: 'Add a description',
    theme: 'snow'
});

HTML:

<div id="quill-editor-{{ form.vars.id }}" class="quill-editor"></div>

How it looks like

Solution

  • Just call the focus method when the click event is fired of the editor div element.

    $(`#${quillId}`).on('click', quill.focus());