quill js embed + ops

Здравствуйте, сначала я публикую здесь, потому что нет ответов в stackru..

Я хочу создать код для переменных. (готово) Я запускаю модуль, который создает кнопку создания, которая будет вставлять переменные (готово), я отправляю его обратно, а после возврата отправляю мне резервные копии старого текста с переменными, которые я хочу повторно вставить в редактор. Но получил неопределенный, когда я хочу заново создать встраивание ** Воспроизвести **

нажмите на одну кнопку 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>

Ожидаемое поведение:

когда я вставляю ops с embed. Это должно показать мне то же самое

Фактическое поведение:

покажи мне неопределенный

Платформы:

Включить браузер, операционную систему и соответствующие версии

Версия:

1.3.1

Источник

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>

Проверь это и дай мне знать?

Источник
Другие вопросы по тегам