javascript - 如何将元素中的对象引用存储为自定义属性？

Question

我在编辑器内容(在线应用程序)中有许多动态生成的小部件，并且需要将它们的引用存储在可单击的按钮中，以便稍后在单击其中一个按钮时检索自定义数据属性。

我想也许事情会这样发展:

var template = '<div class="simplebox">' +
   '<div class="simplebox-marker"><input class="timeMarker" type="button" value='+time+'></input></div >' +
   '<div  class="simplebox-title"><p>title here ...</p></div >' +
   '<div class="simplebox-content"><p></p>content here ... </div>'</div>';

...     
widget = CKEDITOR.dom.element.createFromHtml( template, editor.document );
timeMarkerButton.setAttribute('data-widget', widget);  // widget object ref
...

但是在源代码中我得到的只是这样:

data-widget="[object Object]"

• 这是 allowedContent 过滤的情况吗？如果是这样怎么允许呢？
• 如果没有，如何存储对象引用？

Answer 1

这与 CKEditor 或高级内容过滤器无关。基本上，元素属性是一个字符串，因此您的对象正在被字符串化(通过对其调用 .toString() )。

有几个解决方案:

• 如果它是普通对象，您可以重写该方法并使用 JSON.stringify()。您还可以在使用 setAttribute() 之前手动对其进行字符串化。
• 您可以使用自定义数据(类似于 jQuery 的 data() AFAIK)，您可以使用 element.setCustomData()它可以存储任何对象，但它不设置属性，因此该值不会保留在您的数据中。
• 最后，如果您需要将这些对象存储在数据中，则需要创建它们的哈希值并仅存储属性中的键，而不是整个对象。正如我所看到的，您尝试将小部件存储在属性中，因此您可以简单地存储其 id稍后通过 editor.widgets.instance 访问它.