Question

我正在开发一个JavaScript小部件（我实际上有几个我想要更新），并希望将嵌入代码片段提取到一个单独的＆lt; img＆gt;在onload属性中使用JavaScript标记。在过去，我使用了一个＆lt; img＆gt;标签。然后我切换到了一个＆lt; script＆gt;标记以使小部件无阻塞。我正在研究＆lt; img＆gt;仅出于可用性原因的选择。如果您不必切换到WYSIWYG编辑器的源视图，则可以更轻松地复制和粘贴以移动窗口小部件。在WYSIWYG编辑器中看到可以直观看到的东西真的很不错。

以下是该片段的当前草稿示例：

<img id='NotablePAD80' class='NotablePAD' src='//dev.notable.webapp.msu.edu/n.png' 
data-section='nathanlounds' onload="(function(d){ var i=d.getElementsByTagName('IMG')[0], 
u='https://dev.notable.webapp.msu.edu/n.js', 
j=i.previousSibling||i; if(j.src!==u) { var s=d.createElement('SCRIPT'); 
s.type='text/javascript'; s.src=u; i.parentNode.insertBefore(s,i);}})(document);" />

阻止小部件在WYSIWYG中执行预先保存的最佳方法是什么？加载窗口小部件不能更改编辑器中的DOM。

我的想法：

从tinyMCE变量的存在看。不要处理小部件，如果它被定义。 TinyMCE是我需要的编辑兼容。但我也可能需要为其他所见即所得“修复”。
检查DOM并查找属性仅存在于WYSIWYG中，例如在iframe内。但我需要在iframe中使用小部件。

这两个选项都存在问题。当我的小部件执行时，可能尚未定义TinyMCE。由于某种原因，图像加载事件会被多次触发。最终，我会喜欢一种普遍适用的解决方案。

思考？精彩的解决方案？

Answer 1

检查图像的父级是否启用了contentEditable，或者文档正文是否在designMode中

图像onload上的JavaScript小部件代码段

1 个答案: