Meteor 和 Quill 编辑器集成

Question

我希望将 Quill 编辑器合并到我的 1.1.0.3 Meteor 应用程序中。

具体来说，我有一个消息传递模板可以使用更高级的编辑器，比我现在使用的简单文本区域控件更多，但我在开始时遇到了一些麻烦。

我在 Quill Editor v0.19.14 中使用 Quill Meteor 包装器，可在此处找到：https://github.com/themeteorites/quilljs

我认为这是让事情正常进行的必要条件：

主要消息模板：

<template name="messages_detail">
   <textarea id="message" rows="3"></textarea>
   <button type="submit" id="submit-message" class="btn-submit">Submit</button>
</template>

我想用 Quill 替换我目前用于消息输入的文本区域。

我会构建一个如下所示的子模板吗：

<template name="quill_editor">
  <div id="editor-container">
    <div class="quill-wrapper">
      <div id="full-toolbar" class="toolbar ql-toolbar ql-snow">
        <span class="ql-format-group">
          <span title="Bold" class="ql-format-button ql-bold"></span>
          <span class="ql-format-separator"></span>
          <span title="Italic" class="ql-format-button ql-italic"></span>
          <span class="ql-format-separator"></span>
          <span title="Underline" class="ql-format-button ql-underline"></span>
          <span class="ql-format-separator"></span>
          <span title="Strikethrough" class="ql-format-button ql-strike"></span>
        </span>
        <span class="ql-format-group">
          <span title="Text Color" class="ql-color ql-picker ql-color-picker">
          </span>
          <span class="ql-format-separator"></span>
          <span title="Background Color" class="ql-background ql-picker ql-color-picker">
            <span class="ql-picker-label"></span>
            <span class="ql-picker-options">
              <span data-value="rgb(0, 0, 0)" class="ql-picker-item ql-primary-color" style="background-color: rgb(0, 0, 0);"></span>
              <span data-value="rgb(230, 0, 0)" class="ql-picker-item ql-primary-color" style="background-color: rgb(230, 0, 0);"></span>
              <span data-value="rgb(255, 153, 0)" class="ql-picker-item ql-primary-color" style="background-color: rgb(255, 153, 0);"></span>
              <span data-value="rgb(255, 255, 0)" class="ql-picker-item ql-primary-color" style="background-color: rgb(255, 255, 0);"></span>
              <span data-value="rgb(0, 138, 0)" class="ql-picker-item ql-primary-color" style="background-color: rgb(0, 138, 0);"></span>
              <span data-value="rgb(0, 102, 204)" class="ql-picker-item ql-primary-color" style="background-color: rgb(0, 102, 204);"></span>
              <span data-value="rgb(153, 51, 255)" class="ql-picker-item ql-primary-color" style="background-color: rgb(153, 51, 255);"></span>
              <span data-value="rgb(255, 255, 255)" class="ql-picker-item ql-selected" style="background-color: rgb(255, 255, 255);"></span>
              <span data-value="rgb(250, 204, 204)" class="ql-picker-item" style="background-color: rgb(250, 204, 204);"></span>
              <span data-value="rgb(255, 235, 204)" class="ql-picker-item" style="background-color: rgb(255, 235, 204);"></span>
              <span data-value="rgb(255, 255, 204)" class="ql-picker-item" style="background-color: rgb(255, 255, 204);"></span>
              <span data-value="rgb(204, 232, 204)" class="ql-picker-item" style="background-color: rgb(204, 232, 204);"></span>
              <span data-value="rgb(204, 224, 245)" class="ql-picker-item" style="background-color: rgb(204, 224, 245);"></span>
              <span data-value="rgb(235, 214, 255)" class="ql-picker-item" style="background-color: rgb(235, 214, 255);"></span>
              <span data-value="rgb(187, 187, 187)" class="ql-picker-item" style="background-color: rgb(187, 187, 187);"></span>
              <span data-value="rgb(240, 102, 102)" class="ql-picker-item" style="background-color: rgb(240, 102, 102);"></span>
              <span data-value="rgb(255, 194, 102)" class="ql-picker-item" style="background-color: rgb(255, 194, 102);"></span>
              <span data-value="rgb(255, 255, 102)" class="ql-picker-item" style="background-color: rgb(255, 255, 102);"></span>
              <span data-value="rgb(102, 185, 102)" class="ql-picker-item" style="background-color: rgb(102, 185, 102);"></span>
              <span data-value="rgb(102, 163, 224)" class="ql-picker-item" style="background-color: rgb(102, 163, 224);"></span>
              <span data-value="rgb(194, 133, 255)" class="ql-picker-item" style="background-color: rgb(194, 133, 255);"></span>
              <span data-value="rgb(136, 136, 136)" class="ql-picker-item" style="background-color: rgb(136, 136, 136);"></span>
              <span data-value="rgb(161, 0, 0)" class="ql-picker-item" style="background-color: rgb(161, 0, 0);"></span>
              <span data-value="rgb(178, 107, 0)" class="ql-picker-item" style="background-color: rgb(178, 107, 0);"></span>
              <span data-value="rgb(178, 178, 0)" class="ql-picker-item" style="background-color: rgb(178, 178, 0);"></span>
              <span data-value="rgb(0, 97, 0)" class="ql-picker-item" style="background-color: rgb(0, 97, 0);"></span>
              <span data-value="rgb(0, 71, 178)" class="ql-picker-item" style="background-color: rgb(0, 71, 178);"></span>
              <span data-value="rgb(107, 36, 178)" class="ql-picker-item" style="background-color: rgb(107, 36, 178);"></span>
              <span data-value="rgb(68, 68, 68)" class="ql-picker-item" style="background-color: rgb(68, 68, 68);"></span>
              <span data-value="rgb(92, 0, 0)" class="ql-picker-item" style="background-color: rgb(92, 0, 0);"></span>
              <span data-value="rgb(102, 61, 0)" class="ql-picker-item" style="background-color: rgb(102, 61, 0);"></span>
              <span data-value="rgb(102, 102, 0)" class="ql-picker-item" style="background-color: rgb(102, 102, 0);"></span>
              <span data-value="rgb(0, 55, 0)" class="ql-picker-item" style="background-color: rgb(0, 55, 0);"></span>
              <span data-value="rgb(0, 41, 102)" class="ql-picker-item" style="background-color: rgb(0, 41, 102);"></span>
              <span data-value="rgb(61, 20, 102)" class="ql-picker-item" style="background-color: rgb(61, 20, 102);"></span>
            </span>
          </span>
        </span>
        <span class="ql-format-group">
          <span title="Link" class="ql-format-button ql-link"></span>
        </span>
      </div>
      <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>
        <div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">
          <div>
            <span style="font-size: 18px;">One Ring to Rule Them All</span>
          </div>
          <div><a href="http://en.wikipedia.org/wiki/One_Ring">http://en.wikipedia.org/wiki/One_Ring</a></div>
          <div>
            <br>
          </div>
          <div>Three Rings for the <u>Elven-kings</u> under the sky,</div>
          <div>Seven for the <u>Dwarf-lords</u> in halls of stone,</div>
          <div>Nine for <u>Mortal Men</u>, doomed to die,</div>
          <div>One for the <u>Dark Lord</u> on his dark throne.</div>
          <div>
            <br>
          </div>
          <div>In the Land of Mordor where the Shadows lie.</div>
          <div>One Ring to <b>rule</b> them all, One Ring to <b>find</b> them,</div>
          <div>One Ring to <b>bring</b> them all and in the darkness <b>bind</b> them.</div>
          <div>In the Land of Mordor where the Shadows lie.</div>
        </div>
        <div class="ql-paste-manager" contenteditable="true"></div>
      </div>
    </div>
  </div>
</template>

然后在 quill_editor js 文件中像这样：

Template.quill_editor.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'
  });

  // Add basic editor's author
  var authorship = fullEditor.getModule('authorship');
  authorship.addAuthor('gandalf', 'rgba(255,153,51,0.4)');

  // Add a cursor to represent basic editor's cursor
  var cursorManager = fullEditor.getModule('multi-cursor');
  cursorManager.setCursor('gandalf', fullEditor.getLength()-1, 'Gandalf', 'rgba(255,153,51,0.9)');

  // Sync basic editor's cursor location
  basicEditor.on('selection-change', function(range) {
    if (range) {
      cursorManager.moveCursor('gandalf', range.end);
    }
  });

  // Update basic editor's content with ours
  fullEditor.on('text-change', function(delta, source) {
    if (source === 'user') {
      basicEditor.updateContents(delta);
    }
  });

  // basicEditor needs authorship module to accept changes from fullEditor's authorship module
  basicEditor.addModule('authorship', {
    authorId: 'gandalf',
    color: 'rgba(255,153,51,0.4)'
  });

  // Update our content with basic editor's
  basicEditor.on('text-change', function(delta, source) {
    if (source === 'user') {
      fullEditor.updateContents(delta);
    }
  });

  return fullEditor;
});

现在更改主模板以像这样合并 Quill：

<template name="messages_detail">
  {{> quill_editor}}
   <button type="submit" id="submit-message" class="btn-submit">Submit</button>
</template>

我正在寻找这种外观和这些控件：

由于某些原因，下拉菜单无法正常工作，到目前为止它们看起来像这样：

看看下拉文本和背景颜色是如何空白的——如果我在 HTML 中有下拉 select 选项并不重要，什么也不会显示，所以在第一种情况我把它拿出来，第二种情况我把它留在里面以显示没有区别。

我走在正确的轨道上吗？找不到很好的例子。

Answer 1

如何在您的 quill-editor 模板中包含：

<div class="basic-wrapper">
    <div class="toolbar-container">
        <button class="ql-bold">Bold</button>    
    </div>
    <div class="editor-container">
        <div>Some initial <b>bold</b> text</div>
    </div>
</div>

或尝试从 template 和 onRendered[= 中删除 basic-wrapper 引用12=]

对于下拉菜单，您还必须添加代码，例如：

<!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="10px">Small</option>
    <option value="13px" selected>Normal</option>
    <option value="18px">Large</option>
    <option value="32px">Huge</option>
  </select>

Meteor 和 Quill 编辑器集成

Meteor and Quill editor Integration

javascript

meteor

quill