[英]How can I add a new format (<hr> tag) to Quill.js?
I want to add a button which would add a <hr>
tag to the quill.js (beta) editor.我想添加一个按钮,该按钮会将
<hr>
标记添加到quill.js(测试版)编辑器。
<!-- Initialize Quill editor -->
<div id="toolbar-container">
<span class="ql-formats">
<button class="ql-hr"></button> //here my hr-button
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<hr> // this gets replaced by <p> tag automatically *strange*
<p>Some initial <strong>bold</strong> text</p>
</div>
I initialize my editor:我初始化我的编辑器:
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
Here I add a <h1>
tag functionality to my editor and it works very well:在这里,我向我的编辑器添加了一个
<h1>
标签功能,它运行良好:
$('.ql-hr').on("click",function(){
var range = quill.getSelection();
var text = quill.getText(range.index, range.length);
quill.deleteText(range.index, range.length);
quill.pasteHTML(range.index, '<h1>'+text+'</h1>');
})
Now I try the same for a <hr>
tag, which doesn't work at all:现在我对
<hr>
标签尝试相同的方法,但它根本不起作用:
$('.ql-hr').on("click",function(){
var range = quill.getSelection();
quill.pasteHTML(range.index, '<hr>');
})
the <hr>
tag in the initial div#editor
gets replaced with a <p>
tag.初始
div#editor
的<hr>
标签被替换为<p>
标签。 And the button functionality I added doensn't work for <hr>
tags, but for other tags it works.我添加的按钮功能对
<hr>
标签不起作用,但对其他标签却起作用。 I know the <hr>
tag is not implemented to Quill.js, that's also why I get this console output:我知道
<hr>
标签没有在 Quill.js 中实现,这也是我得到这个控制台输出的原因:
quill:toolbar ignoring attaching to nonexistent format hr select.ql-hr
quill:toolbar 忽略附加到不存在的格式 hr select.ql-hr
Is there any way to fix this?有没有办法解决这个问题?
I have still no idea why the question has downvotes, but however here is the solution:我仍然不知道为什么这个问题被否决了,但是这里是解决方案:
Import the embed blot - important: not "block", not "embed", "block/embed"!导入嵌入印迹- 重要:不要“阻止”,不要“嵌入”,“阻止/嵌入”!
var Embed = Quill.import('blots/block/embed');
Define a new class that extends that Embed定义一个扩展 Embed 的新类
class Hr extends Embed {
static create(value) {
let node = super.create(value);
// give it some margin
node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");
return node;
}
}
Define your tag定义你的标签
Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar
Hr.className = 'my-hr';
Hr.tagName = 'hr';
Write a custom handler for the <hr> button为 <hr> 按钮编写自定义处理程序
var customHrHandler = function(){
// get the position of the cursor
var range = quill.getSelection();
if (range) {
// insert the <hr> where the cursor is
quill.insertEmbed(range.index,"hr","null")
}
}
Register your new format注册您的新格式
Quill.register({
'formats/hr': Hr
});
Instantiate your Editor with the right selectors in your HTML使用 HTML 中的正确选择器实例化您的编辑器
var quill = new Quill('#editor', {
modules: {
toolbar: { container: '#toolbar-container',
handlers: {
'hr': customHrHandler
}
}
},
theme: 'snow'
});
The HTML part remains the same. HTML 部分保持不变。 The whole <hr> functionality can be done similar to the <img> format .
整个 <hr> 功能可以类似于<img> 格式来完成。
Thank you, you helpful community.谢谢你,你乐于助人的社区。
Not enough rep to comment, so posting as an answer, to address a minor issue.
没有足够的代表发表评论,所以作为答案发布,以解决一个小问题。
The default prompt box caused by the embed shown in @Suisse's great answer has to be seemingly handled in a toolbar handler (with a second parameter), like so:由@Suisse 很好的答案中显示的嵌入引起的默认提示框似乎必须在工具栏处理程序中处理(使用第二个参数),如下所示:
var toolbarOptions = {
handlers: {
// ...
'hr': function(value) {
this.quill.format('hr', true);
}
}
}
Source discussion -来源讨论——
Documentation: How to avoid default 'prompt' when invoking custom Embed blots via toolbar module文档:如何在通过工具栏模块调用自定义嵌入印迹时避免默认的“提示”
Prompt example in Toolbar Handler docs: https://quilljs.com/docs/modules/toolbar/#handlers工具栏处理程序文档中的提示示例: https : //quilljs.com/docs/modules/toolbar/#handlers
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.