Quill Editor updating existing text

help
1

I have @seeekr Quill editor working when I’m in insert mode. For example if I want to input some rich text and save it off to a mongo collection, I simply attach an event and do a find by id to get the html and i’m off to the races.

But I’m having trouble when I want to populate the Quill editor with existing data from a mongo collection. I tried the following but it creates an alternative editor structure outside my div. This is partial code/html:

<template name="quillEditor">
...
  <div id="full-editor" class="editor ql-container ql-snow">
    <div class="ql-multi-cursor">
      <span class="cursor hidden" style="top: 218px; left: 277px; height: 15px;">
        <span class="cursor-flag">
          <span class="cursor-triangle top" style="border-bottom-color: rgba(255, 153, 51, 0.901961);"></span>
          <span class="cursor-name" style="background-color: rgba(255, 153, 51, 0.901961);">Gandalf</span>
          <span class="cursor-triangle bottom" style="border-top-color: rgba(255, 153, 51, 0.901961);"></span>
        </span>
        <span class="cursor-caret" style="background-color: rgba(255, 153, 51, 0.901961);"></span>
      </span>
    </div>
    {{#if content}}
      <div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
        <div class="ql-editor authorship ql-content" contenteditable="true">
          <span class="author-test">{{content}}</span>
        </div>
      </div>
    {{else}}
      <div class="ql-editor authorship ql-content" contenteditable="true"></div>
    {{/if}}
    <div class="ql-paste-manager" contenteditable="true"></div>
  </div>
...
</template>

Above, if I do NOT pass in {{content}} the editor is basically in insert mode. In this mode the editor creates the following…

header div like so (where the index in the id can change):

<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true"> ...

And subsequent text additions get created in dynamically added divs like this:

<div class="ql-editor authorship ql-content" contenteditable="true"><span class="author-test">so cool</span></div>
<div class="ql-editor authorship ql-content" contenteditable="true"><span class="author-test">love this!</span></div>

This is fine, but sometimes I want the editor to contain content that I already have, like a edit mode. This is a problem. Taking a snip from the code above:

 {{#if content}}
   <div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
       <div class="ql-editor authorship ql-content" contenteditable="true">
          <span class="author-test">{{content}}</span>
       </div>
   </div>
{{else}}

What I did here was try to replicate the div structure the Quill Editor creates dynamically, by wrapping my {{content}} in all the divs I usually see the Quill Editor makes dynamically.

It renders it, but it’s in an alternative div structure beside the one that Quill makes.

<div id="full-editor" class="editor ql-container ql-snow">
 <!-- editors content that gets created no matter what -->
 <!-- all additions go here no matter what -->
 <div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
  <div class="ql-editor authorship ql-content" contenteditable="true">
   <span class="author-test">so cool</span>
  </div>
 <div class="ql-editor authorship ql-content" contenteditable="true">
  <span class="author-test">love this!</span>
 </div>
</div>

<!-- my {{content}} -->
<!-- alternative structure that doesn't get added to dynamically -->
 <div class="ql-paste-manager" contenteditable="true"></div>
  <div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
    <div class="ql-editor authorship ql-content" contenteditable="true">
       <span class="author-test">this is a test</span>
     </div>
    </div>
</div>

What am I doing wrong? How do I add existing text to the editor and create a situation where I can add/modify the existing text, allow me to save the additions off to a mongo collection.

2

Quilljs has an API: http://quilljs.com/docs/api/#quillprototypesethtml http://quilljs.com/docs/api/#quillprototypegethtml

3

Thanks.

Right now I my onRendered for the quillEditor template looks sort of like this:

Template.quillEditor.onRendered(function () {
  var fullEditor;
  fullEditor = new Quill('#full-editor', {
    modules: {
      'authorship': {
        authorId: 'test', //Meteor.user().profile.user_name,
        enabled: true
      },
      'multi-cursor': true,
      'toolbar': {
        container: '#full-toolbar'
      },
      'link-tooltip': true
    },
    theme: 'snow'
  });


  return fullEditor;
});

If I’m going to pass the text content down to this quillEditor sub template, from a parent template, I’ll usually do something like this:

Template.quillEditor.helpers({
  messageContent: function () {
    var content = Template.parentData(1).textContent;
  }
});

Where textContent is passed in like:

{{> quill_editor content=textContent}}

My question now is, how do I get the editor handle from within the helper so I could so something like so:

Template.quillEditor.helpers({
  messageContent: function () {
    var content = Template.parentData(1).textContent;
    // get editor handle somehow:
    editor.setHTML(content);
  }
});
4

Complicated thinking. Make it simpler. In your onRendered call the setHTML method. No need for additional helpers.

6

Thanks.

I got things working, kind of, within the autorun like so:

// code above
Template.quillEditor.onRendered(function () {
  this.autorun(function () {
    var text = Template.parentData(0).content;
    var fullEditor = new Quill('#full-editor', {
      modules: {
        'authorship': {
          enabled: true
        },
        'multi-cursor': true,
        'toolbar': {
          container: '#full-toolbar'
        },
        'link-tooltip': true
      },
      theme: 'snow'
    });

    if (text) {
      //fullEditor.setHTML(text);
    }
    else {
      //fullEditor.setHTML('');
    }


    return fullEditor;
  });
});

My only problem is, now on the first autorun pass, the editor acts as expect, I get the dropdowns with the rich text editor options. But on the second onRendered autorun, the editor seems to get confused.

1102×362 16 KB

Removing the setHTML just to show it has nothing to do with setting the text.

Now if it autoruns because the parentData changed (again, just nothing text wise is set, it just runs just as it did the first time), the editor seems to mess up.

Now, I get a Visited URL (with no text was set) and the drop downs don’t have anything within them (in this example the color is not there). What’s going on the second time it creates an editor? Is this because somehow there is a conflict because there could be two instances of the editor?

1120×337 18.2 KB

By the way, the setHTML does work – thank you.

9

how do i test the quill editorusing testcase anyone pls tell me