2

クイル wysiwyg を使用してフォームを正常に実装しましたが、コンポーネントを作成して再利用したいと考えています。これは私の実用的な実装です:

<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 the form data
}

これは再利用できるようにしたいものです。私の質問はコード内にあります:

<template name="form">
  <form>
    {{> editor }}
    <input type="submit" value="save"/>
  </form>
</template>

<template name="editor">
  <div id="toolbar"> ... html with toolbar buttons </div>
  <div id="editor"></div>
</template>
Template.editor.rendered = function () {
  this.quill = new Quill('#editor', { 
    modules: {
     'toolbar': { container: '#toolbar' },
     'link-tooltip': true
    },
    theme: 'snow' }
  );

  // How can I pass quill to the parent template?

}

Template.form.events({
  'submit form': function(e, tmpl) {
    e.preventDefault();

    // How can I access quill variable on the nested template, so I can 
    // call quill.getHTML()?

}
4

1 に答える 1