1
Я ищу, чтобы включить редактор Quill в мое приложение Meteor 1.1.0.3.Редактор Meteor и Quill Интеграция
В частности, у меня есть шаблон обмена сообщениями, который может использовать более продвинутый редактор, больше, чем простой элемент управления textarea, который я использую сейчас, но у меня возникли проблемы с запуском.
Я использую обертку Quill Метеор в Quill редактор 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.
ли я создать шаблон суб вроде следующего:
<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 расслоение плотной файл следующим образом:
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 или нет, ничего не будет видно, поэтому в первом случае я взял его, а во втором случае я оставил его, чтобы не было никакой разницы.
Есть ли я на правильном пути? Нет никаких хороших примеров для поиска.
Это, вероятно, относится к комментарию, а не как ответ - как вы думаете? – Aaron
, если вы хотите, чтобы полный редактор просмотрел полный пример здесь: http://quilljs.com/examples/ – vioan
@ Аарон может быть комментарием, да, но также решил вашу начальную проблему. – vioan