我希望将 Quill 编辑器合并到我的 1.1.0.3 Meteor 应用程序中。
具体来说，我有一个消息模板可以使用更高级的编辑器，而不是我现在使用的简单 textarea 控件，但我在开始时遇到了一些麻烦。
我正在使用 Quill Meteor 包装器到 Quill Editor v0.19.14，在此处找到：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 替换我目前用于消息输入的 textarea。
我会构建一个如下所示的子模板：
<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 中有下拉选择选项并不重要，什么都不会显示，所以在第一种情况下我把它拿出来，在第二种情况下我留下它以显示没有区别。
我在正确的轨道上吗？没有真正好的例子可以找到。