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