Я расширяю текстовое пятно и пытаюсь использовать примечания к документации отсюда (копируя код разделителя), но вывод заканчивается просто печатью true в редактор.
In представленная ссылка говорит о том, как клонировать Medium, блот не создается, который расширяет blots/text. Делитель создан с использованием blots/block/embed. По сути, можно создать 3 типа блотов:
Чтобы помочь вам лучше понять, о чем я говорю, я предлагаю вам прочитать немного о Пергамент и помарки .
Теперь о самой проблеме ... Как вы можете видеть из своего примера, вы только что создали блот, но не добавили к нему никакого поведения, и вы установили имя созданного блот-тега NAME. Из всех существующих тегов в HTML нет ни одного с именем <NAME>. Смотрите:
Имя, которое вы даете tagName будет тегом HTML, используемым для результата, ie будет представлять ваш блот. Например, если вы хотите добавить image , вам нужно присвоить tagName значение IMG. Для заголовка заголовка вы можете использовать h1, h2, h3 и т. Д.
Глядя на свой код и видя написанное на нем имя «тег», мне кажется, что вы просто хотите добавить стилизованный текст. Будет ли это? Если это ваш случай, посмотрите на следующий пример:
let Inline = Quill.import('blots/inline');
class SchoolNameBlot extends Inline {
// Overriding this method, in this particular case, is what
// causes the Delta returned as content by Quill to have
// the desired information.
static formats(domNode) {
if(domNode.classList.contains('my-style')){
return true;
}
else{
return super.formats(domNode);
}
}
formats() {
// Returns the formats list this class (this format).
let formats = super.formats();
// Inline has the domNode reference, which in this
// case represents the SPAN, result defined in tagName.
formats['tag-name'] = SchoolNameBlot.formats(this.domNode);
// In the code above, it is as if we are adding this new format.
return formats;
}
}
SchoolNameBlot.blotName = 'tag-name';
SchoolNameBlot.tagName = 'span';
SchoolNameBlot.className = 'my-style';
Quill.register(SchoolNameBlot);
$(document).ready(function () {
var toolbarOptions = {
container: [['bold', 'italic'], ['link', 'image', 'tag-name']],
handlers: {
'tag-name': function(){
this.quill.insertText(0, 'Hello', 'tag-name', true);
}
}
};
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
'toolbar': toolbarOptions
}
});
});
.my-style{
background: rgb(254, 255, 171);
border-radius: 2px;
padding: 2px 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<p>Instructions:</p>
<ol>
<li>Press the invisible button (with no icon) next to the add image button.</li>
</ol>
<div id="editor">
</div>
Чтобы просто стилизовать текст, я не советую создавать новый блот, поскольку нет необходимости во что-то столь сложном. Вы можете использовать Attributors . Предыдущий код будет выглядеть так:
const Parchment = Quill.import('parchment')
var config = {
scope: Parchment.Scope.INLINE,
whitelist: ['yellow', 'red', 'blue' , 'green']
};
var SchoolName = new Parchment.Attributor.Class('my-attributor', 'style' , config);
Quill.register(SchoolName);
$(document).ready(function () {
var toolbarOptions = {
container: [['bold', 'italic'], ['link', 'image', 'my-button'] , ['clean']] ,
handlers: {
'my-button': function () {
let range = this.quill.getSelection();
this.quill.insertText(range.index, 'Hello', 'my-attributor' , 'yellow');
}
}
};
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
'toolbar': toolbarOptions
}
});
});
.style-yellow{
background: rgb(254, 255, 171);
border-radius: 2px;
padding: 2px 2px;
}
.style-red{
background: rgb(255, 171, 171);
border-radius: 2px;
padding: 2px 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<p>Instructions:</p>
<ol>
<li>Press the invisible button (with no icon) next to the add image button.</li>
</ol>
<div id="editor">
</div>
В качестве окончательного совета , вы всегда можете получить дополнительную информацию на официальном сайте Quill , а также а также из своих репозиториев . Для получения дополнительной информации, примеров и часто задаваемых вопросов (Quill FAQ), посмотрите здесь .