时间戳

首页 > 解决方案 > 自定义嵌入印迹无法重新实例化已经存在的对象

javascript - 自定义嵌入印迹无法重新实例化已经存在的对象

问题描述

QuillJS 自定义内联印迹

我正在尝试在编辑器中插入一个自定义印迹（使用印迹/嵌入），并且该部分的工作原理与操场上显示的一样。但是，如果我尝试重新实例化提交的内容，它会在给类的参数中返回 undefined。

我创建了一个显示这种行为的代码笔。其内容如下所示。

HTML

<div id="editor-container"><br/><span class="proc-link" style="text-decoration: underline;background-color : lightgreen;" data-proc="value">&lt;span contenteditable="false">Test</span>&lt;/span></div>

CSS

#editor-container {
  height: 375px;
}

JS

var Embed = Quill.import('blots/embed');
class ProcLink extends Embed {
    static create(value) {
        let node = super.create(value);
        // give it some margin
        node.setAttribute('style', "text-decoration: underline;background-color : lightgreen;");
        node.setAttribute('data-proc', value.value);
        node.innerHTML = value.text;
        return node;
    }
}

ProcLink.blotName = 'proc-link'; 
ProcLink.className = 'proc-link';
ProcLink.tagName = 'span';

Quill.register({
    'formats/proc-link': ProcLink
});

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

var index = quill.getSelection(true).index;//quill is the reference to my instantiated quill obj
 var cObj = {text : 'Test', value : 'value'};
 quill.insertEmbed(0,"proc-link",cObj)

标签： javascriptquill

解决方案

我认为你应该使用value(node)方法来实现这一点。它返回有关相关印迹的 DOM 信息。它提供了重新实例化。

    class ProcLink extends Embed {
      static create(value) {
        let node = super.create(value);
        // give it some margin
        node.setAttribute('style', "text-decoration: underline;background-color : lightgreen;");
        node.setAttribute('data-proc', value.value);
        node.innerHTML = value.text;
        return node;
      }
      static value(node) {
        return {
          value: node.attributes.dataProc,
          text: node.innerHTML,
          style: node.attributes.style,
        }
      }
    }

推荐阅读