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或高级内容过滤器无关。基本上，element属性是一个字符串，因此您的对象被字符串化（通过调用它上面的.toString()）。

有几种解决方案：

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

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

1 个答案: