我正在开发一个 JavaScript 小部件（我实际上有几个我想更新），并希望将嵌入代码片段提炼成一个在 onload 属性中带有 JavaScript 的单个 <img> 标记。过去我使用 a 和 <img> 标签。然后我切换到一个 <script> 标记以使小部件非阻塞。出于可用性原因，我正在研究 <img> 唯一选项。如果您不必切换到所见即所得编辑器的源视图，则复制和粘贴以移动小部件会更容易。在 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);" />
防止小部件在所见即所得中执行预保存的最佳方法是什么？小部件的加载不能更改编辑器中的 DOM。
我的想法：
从 tinyMCE 变量的存在来看。如果已定义，请勿处理小部件。TinyMCE 是我需要兼容的编辑器。但我可能也需要其他所见即所得的“修复”。
检查 DOM 并查找仅存在于 WYSIWYG 中的属性，例如在 iframe 中。但我需要小部件在 iframe 中工作。
这两个选项都有问题。当我的小部件执行时，可能尚未定义 TinyMCE。由于某种原因，图像加载事件被多次触发。最终，我会喜欢一个通用的解决方案。
想法？出色的解决方案？