Quill BlockEmbeds 可以使用任意标签吗?
Can Quill BlockEmbeds use arbitrary tags?
我有一堆组件(html 和逻辑),我希望能够将它们嵌入到 Quill 文档中,但我不完全确定如何开始。每个组件都有一个根元素,但 tagName 是任意的(有 aside
、div
、section
等标签)。每个组件都有完全非 Quill 的编辑体验(在别处处理),因此理想情况下它们的增量看起来像这样:
{
ops: [
{ insert: 'Hello', attributes: { bold: true } },
{ insert: { component: 'domain.com/components/image/instances/foo' } },
{ insert: 'World!\n' }
]
}
我相信我在文档中的某处读到块级印迹必须指定 tagName
或 和 className
,但我找不到的参考。 All of the examples I can find using the BlockEmbed
specify a tagName
, and the Parchment docs 真的不解释了。是否有正确的方法可以做到这一点,是否有任何我应该注意的边缘情况?
所有这些组件都是块级的,所以(根据我对 this issue 的阅读)我认为选择应该不是问题,对吧?
如果您的目的是创建一个 QUILL 中不存在的标签
你要做的是这样的:
配置您的自定义标签
var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
static create(paramValue) {
let node = super.create();
node.innerHTML = paramValue;
//node.setAttribute('contenteditable', 'false');
//node.addEventListener('click', MyCustomTag.onClick);
return node;
}
static value(node) {
return node.innerHTML;
}
}
MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
//do something
}*/
Quill.register(MyCustomTag);
使用您的自定义标签
this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT,
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
'<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT
);
注意,默认情况下此自定义将获得属性 display: block
你可以通过 css 规则来定位它,例如
my-custom-tag {
display : inline;
}
我有一堆组件(html 和逻辑),我希望能够将它们嵌入到 Quill 文档中,但我不完全确定如何开始。每个组件都有一个根元素,但 tagName 是任意的(有 aside
、div
、section
等标签)。每个组件都有完全非 Quill 的编辑体验(在别处处理),因此理想情况下它们的增量看起来像这样:
{
ops: [
{ insert: 'Hello', attributes: { bold: true } },
{ insert: { component: 'domain.com/components/image/instances/foo' } },
{ insert: 'World!\n' }
]
}
我相信我在文档中的某处读到块级印迹必须指定 tagName
或 和 className
,但我找不到的参考。 All of the examples I can find using the BlockEmbed
specify a tagName
, and the Parchment docs 真的不解释了。是否有正确的方法可以做到这一点,是否有任何我应该注意的边缘情况?
所有这些组件都是块级的,所以(根据我对 this issue 的阅读)我认为选择应该不是问题,对吧?
如果您的目的是创建一个 QUILL 中不存在的标签 你要做的是这样的: 配置您的自定义标签
var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
static create(paramValue) {
let node = super.create();
node.innerHTML = paramValue;
//node.setAttribute('contenteditable', 'false');
//node.addEventListener('click', MyCustomTag.onClick);
return node;
}
static value(node) {
return node.innerHTML;
}
}
MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
//do something
}*/
Quill.register(MyCustomTag);
使用您的自定义标签
this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT,
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
'<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT
);
注意,默认情况下此自定义将获得属性 display: block
你可以通过 css 规则来定位它,例如
my-custom-tag {
display : inline;
}