如何在quilljs中制作不可选择的嵌入自定义格式
How to make non selectable embed custom format in quilljs
我想创建一个可以设置样式但不能更改其文本的自定义嵌入格式。我的用例与标签用例非常相似。我想要一个外部按钮,可以将标签添加到编辑器的当前 selected 范围。但是在这样做之后我希望主题标签表现为 "block" 这样用户就不能去那里更改它的文本。
我能做到这一点的唯一方法是说格式的节点是 contenteditable=false 但我不确定我的方法是否正确,因为我在使用这种方法时遇到了一些问题,主要是:
如果主题标签是编辑器上的最后一件事,我将无法越过它(使用箭头或光标)
双击它到 select 应该 select 整个事情(而不是单个单词)(用于样式)
如果光标紧跟在主题标签后面,按向右并书写将在主题标签内写入
您可以查看我在试验时制作的代码笔:
Quill.import('blots/embed');
class QuillHashtag extends Embed {
static create(value) {
let node = super.create(value);
node.innerHTML = `<span contenteditable=false>#${value}</span>`;
return node;
}
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';
这是完整的代码笔:
http://codepen.io/emanuelbsilva/pen/Zpmmzv
如果你们能给我任何关于我如何才能做到这一点的提示,我会很高兴。
谢谢。
您需要做的就是在主跨度上将 contenteditable 属性设置为 false。目前,您正在嵌套跨度上执行此操作。
node.setAttribute('contenteditable', false);
我修改了您 post 的 hashtag code 并应用了更改。
var Embed = Quill.import('blots/embed');
class QuillHashtag extends Embed {
static create(value) {
let node = super.create(value);
node.setAttribute('contenteditable', false);
node.innerHTML = value;
return node;
}
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';
Quill.register({
'formats/hashtag': QuillHashtag
});
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
document.getElementById('b').addEventListener('click', () => {
var range = quill.getSelection();
if (range) {
var hashtag = prompt("Select hashtag", "foobar");
quill.insertEmbed(range.index, 'hashtag', hashtag);
}
});
#editor-container {
height: 375px;
}
.quill-hashtag {
background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<div id="editor-container"></div>
<button id="b">add hashtag</button>
我想创建一个可以设置样式但不能更改其文本的自定义嵌入格式。我的用例与标签用例非常相似。我想要一个外部按钮,可以将标签添加到编辑器的当前 selected 范围。但是在这样做之后我希望主题标签表现为 "block" 这样用户就不能去那里更改它的文本。
我能做到这一点的唯一方法是说格式的节点是 contenteditable=false 但我不确定我的方法是否正确,因为我在使用这种方法时遇到了一些问题,主要是:
如果主题标签是编辑器上的最后一件事,我将无法越过它(使用箭头或光标) 双击它到 select 应该 select 整个事情(而不是单个单词)(用于样式) 如果光标紧跟在主题标签后面,按向右并书写将在主题标签内写入 您可以查看我在试验时制作的代码笔:
Quill.import('blots/embed');
class QuillHashtag extends Embed {
static create(value) {
let node = super.create(value);
node.innerHTML = `<span contenteditable=false>#${value}</span>`;
return node;
}
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';
这是完整的代码笔: http://codepen.io/emanuelbsilva/pen/Zpmmzv
如果你们能给我任何关于我如何才能做到这一点的提示,我会很高兴。
谢谢。
您需要做的就是在主跨度上将 contenteditable 属性设置为 false。目前,您正在嵌套跨度上执行此操作。
node.setAttribute('contenteditable', false);
我修改了您 post 的 hashtag code 并应用了更改。
var Embed = Quill.import('blots/embed');
class QuillHashtag extends Embed {
static create(value) {
let node = super.create(value);
node.setAttribute('contenteditable', false);
node.innerHTML = value;
return node;
}
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';
Quill.register({
'formats/hashtag': QuillHashtag
});
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
document.getElementById('b').addEventListener('click', () => {
var range = quill.getSelection();
if (range) {
var hashtag = prompt("Select hashtag", "foobar");
quill.insertEmbed(range.index, 'hashtag', hashtag);
}
});
#editor-container {
height: 375px;
}
.quill-hashtag {
background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<div id="editor-container"></div>
<button id="b">add hashtag</button>