您好先发帖在这里因为stackoverflow没有响应..
我想为变量创建嵌入。 （完成） 我初始化一个模块创建按钮谁将插入变量（完成） 我把它发送到后面，然后用变量将旧文本发回给我 我想重新插入编辑器中。但是当我想重新创建嵌入时，我得到了不确定 **重现**
点击一个按钮prenom或Cool 点击按钮告诉我 它将擦除并尝试在编辑器中重新创建ops表
console.log(Quill.version);
window.document.querySelector('.show')
.addEventListener('click', function(){
var ops = quill.getContents().ops;
var _quill = quill;
setTimeout(function(){
_quill.deleteText(0, 10);
}, 3000);
setTimeout(function(){
_quill.setContents(ops);
}, 4000);
});
var Variables = function(quill, options){
this.quill = quill;
this.options = options;
var _this = this;
}
Variables.prototype.initInsertVariable = function(variables, lang, container){
var _this = this;
variables.variables.forEach(function(elem){
var btn = document.createElement("BUTTON");
var delim1 = document.createElement('span');
delim1.classList.add('delimiter');
delim1.appendChild(document.createTextNode('>'));
var delim2 = document.createElement('span');
delim2.appendChild(document.createTextNode('<'));
delim2.classList.add('delimiter');
btn.appendChild(delim2);
var printedMe = elem.printed[lang].replace(/</g,'').replace(/>/g,'');
var text = document.createTextNode(printedMe);
btn.appendChild(text);
btn.appendChild(delim1);
btn.classList.add('tool-button');
btn.classList.add('variables');
btn.addEventListener('click', function(){
_this.quill.insertEmbed(0, 'variable', {
value: printedMe,
key: elem.key
});
// _this.quill.setSelection(_this.indexStory + 1);
// _this.quill.focus();
});
container.appendChild(btn);
});
};
Quill.register('modules/variables', Variables);
var Embed = Quill.import('blots/embed');
class variable extends Embed {
static create(value) {
let node = super.create();
node.setAttribute('keyValue', value.key);
node.innerHTML = value.value;
// Sanitize url value if desired
// node.setAttribute('href', value);
// Okay to set other non-format related attributes
// These are invisible to Parchment so must be static
// node.setAttribute('target', '_blank');
return node;
}
static formats(node) {
return node.getAttribute('keyValue');
// We will only be called with a node already
// determined to be a Link blot, so we do
// not need to check ourselves
// return node.getAttribute('href');
}
};
variable.blotName = 'variable';
variable.tagName = 'variable';
Quill.register({
'formats/variable': variable
});
var Delta = Quill.import('delta');
var quill = new Quill('#editor', {
// debug: 'info',
modules: {
variables: true,
history: {
delay: 2000,
maxStack: 500,
userOnly: true
},
toolbar: '#toolbar'
},
theme: 'snow',
});
var variables = quill.getModule('variables');
// vars mock from back
var Vars = {
variables : [{
key: '*|FNAME|*',
printed: {
'fr': '<Prenom>'
}
},
{
key: '*|COOL|*',
printed: {
'fr': '<Cool>'
}
}]
};
variables.initInsertVariable(Vars, 'fr', window.document.querySelector('#variables'));
quill.clipboard.addMatcher('.editor-variables', function(node, delta) {
return delta.compose(new Delta().retain(delta.length(), {
bold: true,
backgroundColor: '#ff0000'
}));
});.editor{
width: 400px;
height: 400px;
background-color: grey;
}<link href="//cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet"/>
<script src="//cdn.quilljs.com/1.3.1/quill.js"></script>
<body>
<div id="variables"></div>
<div id="toolbar">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
<button class="ql-link" ></button>
</div>
<div id="editor">
</div>
<button type="button" class="show">show me</button>
</body>
预期行为：
当我用嵌入插入操作时。它应该显示我相同的
实际行为：
告诉我未定义
平台：
包括浏览器，操作系统和相应版本
版本：
1.3.1
答案 0 :(得分：1)
我想你想要这样。
console.log(Quill.version);
window.document.querySelector('.show')
.addEventListener('click', function(){
ops = document.querySelector(".ql-editor").innerHTML;
var _quill = quill;
setTimeout(function(){
_quill.deleteText(0, 10);
}, 3000);
setTimeout(function(){
document.querySelector(".ql-editor").innerHTML = ops;
}, 4000);
});
var Variables = function(quill, options){
this.quill = quill;
this.options = options;
var _this = this;
}
Variables.prototype.initInsertVariable = function(variables, lang, container){
var _this = this;
variables.variables.forEach(function(elem){
var btn = document.createElement("BUTTON");
var delim1 = document.createElement('span');
delim1.classList.add('delimiter');
delim1.appendChild(document.createTextNode('>'));
var delim2 = document.createElement('span');
delim2.appendChild(document.createTextNode('<'));
delim2.classList.add('delimiter');
btn.appendChild(delim2);
var printedMe = elem.printed[lang].replace(/</g,'').replace(/>/g,'');
var text = document.createTextNode(printedMe);
btn.appendChild(text);
btn.appendChild(delim1);
btn.classList.add('tool-button');
btn.classList.add('variables');
btn.addEventListener('click', function(){
_this.quill.insertEmbed(0, 'variable', {
value: printedMe,
key: elem.key
});
// _this.quill.setSelection(_this.indexStory + 1);
// _this.quill.focus();
});
container.appendChild(btn);
});
};
Quill.register('modules/variables', Variables);
var Embed = Quill.import('blots/embed');
class variable extends Embed {
static create(value) {
let node = super.create();
node.setAttribute('keyValue', value.key);
node.innerHTML = value.value;
// Sanitize url value if desired
// node.setAttribute('href', value);
// Okay to set other non-format related attributes
// These are invisible to Parchment so must be static
// node.setAttribute('target', '_blank');
return node;
}
static formats(node) {
return node.getAttribute('keyValue');
// We will only be called with a node already
// determined to be a Link blot, so we do
// not need to check ourselves
// return node.getAttribute('href');
}
};
variable.blotName = 'variable';
variable.tagName = 'variable';
Quill.register({
'formats/variable': variable
});
var Delta = Quill.import('delta');
var quill = new Quill('#editor', {
// debug: 'info',
modules: {
variables: true,
history: {
delay: 2000,
maxStack: 500,
userOnly: true
},
toolbar: '#toolbar'
},
theme: 'snow',
});
var variables = quill.getModule('variables');
// vars mock from back
var Vars = {
variables : [{
key: '*|FNAME|*',
printed: {
'fr': '<Prenom>'
}
},
{
key: '*|COOL|*',
printed: {
'fr': '<Cool>'
}
}]
};
variables.initInsertVariable(Vars, 'fr', window.document.querySelector('#variables'));
quill.clipboard.addMatcher('.editor-variables', function(node, delta) {
return delta.compose(new Delta().retain(delta.length(), {
bold: true,
backgroundColor: '#ff0000'
}));
});.editor{
width: 400px;
height: 400px;
background-color: grey;
}<link href="//cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet"/>
<script src="//cdn.quilljs.com/1.3.1/quill.js"></script>
<body>
<div id="variables"></div>
<div id="toolbar">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
<button class="ql-link" ></button>
</div>
<div id="editor">
</div>
<button type="button" class="show">show me</button>
</body>
检查一下并告诉我？