Quill: How to disable Quilljs after editing done

[bhamesh]

when I click on edit button quilljs will open for editing.After done editing and click on save button ,quilljs still in editing mode.I want quilljs is READONLY when click on save button.
So how to disable quilljs after done editing?

[benbro]

To enable use:
quill.enable() or quill.enable(true)
To disable use:
quill.disable() or quill.enable(false)

http://quilljs.com/docs/api/#content

var quill = new Quill('#editor', {
    theme: 'snow'
  });
quill.disable();

@jhchen I'm not sure the docs for enable/disable are in the right place.
It will be nice to be able to link to a specific method in the docs.

[bhamesh]

Hi benbro ,

quill.disable(); ---------- not working

This is my code :
$(document).on("click", "[data-role='edit-question']", function(){
var postname = $(this).attr('data-post-key');
var editbutton = '#' + postname + "-li-edit-question";
var toolbar = '#' + postname + "-qjtoolbar";
var editorid = '#' + postname + "-qjeditor";
$(editbutton).addClass("hide");

    var quill = new Quill(editorid, {
      modules: {
        // toolbar: toolbar
        toolbar : true
      },
      theme: 'snow',

    })
    quill.disable(); ---> this not work

  });

when I put quill.disable() in my code ,It disable for every time.it not working properly.

I'm trying to editable quilljs only when I click on edit event fired on quilljs and when I save this changes and click on save button,then quill will disable i.e readonly.
So any other option ?

Thanks and regards,
bhamesh

[jhchen]

@bhamesh Can you elaborate on how it's not working properly?

@benbro You can actually link to methods ex. http://quilljs.com/docs/api/#enable works. I'm working on a new website that will have better UI for this though. enable/disable is listed under Extensions at the moment. Are you suggesting it might be better under Contents?

[bhamesh]

Hello jhchen,

When I click on edit button for quill,It switch to editing mode but when I click on save button for the quill it will be remain in editing mode.
So my question is how to disable quill after I click on save button ?

Thanks.

[benbro]

@jhchen yes, the Contents section is better for enable/disable.

[bhamesh]

Hi jhchen,
Can you please explained how can use content section in my following code -

# html code - 
<div id="{{ post.name}}-qjeditor" data-role="qj-edit-post-text" data-post-key="{{post.name}}">
        {{ post.pst_text }}
</div>
<div class="form-group text-right">
        <ul class="list-inline">
        <li id="{{ post.name + '-li-edit-question'}}">
        <a class="btn btn-primary btn-xs" data-role="edit-question" data-post-key="{{ post.name     }}">Edit</a>
  </li></ul></div></html>

#js code ->
$(document).on("click", "[data-role='edit-question']", function(){
        var postname = $(this).attr('data-post-key');
        var editbutton = '#' + postname + "-li-edit-question";
        var editorid = '#' + postname + "-qjeditor";
        $(editbutton).addClass("hide");

        var quill = new Quill(editorid, {
          modules: {
            // toolbar: toolbar
            toolbar : true
          },
          theme: 'snow',
           // readOnly: true,
        })
        // quill.enable();
        // quill.enable(false);   // Disables user input
        // quill.editor.enable(false);
      });

[jhchen]

@benbro enable/disable has been move to the content section

[servermachine]

@bhamesh I also have this issue. quill.enable(false) still keeps the text editable in the DOM.
I found a workaround by setting contenteditable="false" on the content div (div class="ql-editor")

[jhchen]

@servermachine quill.enable(false) is definitely working for me: http://codepen.io/quill/pen/WGVrRe. Can you demonstrate it not working on http://quilljs.com/playground/?

[servermachine]

Hi @jhchen.
I did a little more analysis. I fixed it 5 minutes ago. It seems it was an issue with my implementation of Quill with Vue.js.

[mattkoch614]

@servermachine Just wondering how you implemented Quill with Vue.js? I've tried several different ways and I've never been able to get the toolbar working.

[servermachine]

Hi @noleafclover614. I'm using a customised version of vue-quill. Did you try that?
If it didn't work, I can upload my version with the container vue component.

[karim10]

Is there a way to keep getting the cursor and navigate through the content but prevent adding new text.
This could be done with adding binding to the keyboard module but is there a cleaner way to do it?