流星和鹅毛笔编辑器集成
[英]Meteor and Quill editor Integration
问题描述
I'm looking to incorporate the Quill editor into my 1.1.0.3 Meteor application. 
我希望将Quill编辑器合并到我的1.1.0.3 Meteor应用程序中。
Specifically I have a messaging template that could use more advanced editor, more than the simple textarea control I'm using now, but I'm having a little trouble getting started. 具体来说，我有一个消息传递模板，可以使用更高级的编辑器，而不仅仅是我现在使用的简单textarea控件，但是开始时遇到了一些麻烦。
I'm using a Quill Meteor wrapper to Quill Editor v0.19.14, found here: https://github.com/themeteorites/quilljs 我使用的是Quill编辑器v0.19.14的Quill流星包装，可在此处找到： https : //github.com/themeteorites/quilljs
This is what I think needs to be in place to get things working: 我认为这是使事情正常运行所需的条件：
The main messaging template: 主要消息传递模板：
<template name="messages_detail">
<textarea id="message" rows="3"></textarea>
<button type="submit" id="submit-message" class="btn-submit">Submit</button>
</template>
I would like to replace the textarea, I currently use for message input, with Quill. 我想将当前用于消息输入的textarea替换为Quill。
Would I build a sub template like the following: 我是否可以构建如下子模板：
<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>
And then in the quill_editor js file like so: 然后在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;
});
And now change the main template to incorporate Quill like this: 现在更改主模板以合并Quill，如下所示：
<template name="messages_detail">
{{> quill_editor}}
<button type="submit" id="submit-message" class="btn-submit">Submit</button>
</template>
I'm looking for this look and these controls: 我正在寻找这种外观和这些控件：
For some reason the drop downs do not work right, they look like this so far: 由于某些原因，下拉菜单无法正常运行，到目前为止，它们看起来像这样：
See how the drop down Text and Background color are blank -- it didn't matter if I have the dropdown select options in the HTML or not, nothing would show, so in the first case I took it out and in the second case I left it in to show no difference. 看看下拉文本和背景颜色如何为空白-是否在HTML中具有下拉选择选项都没有关系，什么都不会显示，因此在第一种情况下我将其取出，在第二种情况下我将其取出留下来没有区别。
Am I on the right track? 我在正确的轨道上吗？ There are no really good examples to find. 找不到真正好的例子。
1 个解决方案
解决方案1
2 已采纳 2015-08-12 15:09:29
what about including in your quill-editor template: 如何将其包含在羽毛笔编辑器模板中：
<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>
or try to remove basic-wrapper references from template and from onRendered 或尝试从模板和onRendered中删除基本包装器引用
for dropdown you also have to add the code, for example: 对于下拉菜单，还必须添加代码，例如：
<!-- 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
羽毛笔编辑器 - 在 cursor 的羽毛笔编辑器中插入内容 - Quill editor - insert content in quill editor at the cursor
在笔管编辑器中显示文字 - Display text in Quill editor
更改笔芯编辑器中的标签？ - Change tags in quill editor?
Quill 文本编辑器不工作 - Quill text editor is not working
羽毛笔编辑器字母列表 - Quill Editor Alphabetic List
这指向主轴编辑器工具栏 - this is pointing to the quill editor toolbar
Quill 编辑器未在 React 中呈现 - Quill editor not rendering in React
散焦鹅毛笔的文本编辑器 - Unfocus quill's text editor
在 Quill Rich Editor 中包含标题 - Include Headings in Quill Rich Editor
Shadow DOM 中的 Quill 编辑器 - Quill editor inside Shadow DOM
相关标签