问题分析

stackeditForArt.html 不同于 editormdForArt.html，它通过 iframe 内嵌编辑器，因此无法在父窗口的 document 对象上监听到 iframe 的事件。

解决方案

  • 父窗口可以在 iframe 元素的 contentWindow 窗口对象上绑定事件监听；
  • 因为 iframe 元素的 src 有被修改，所以确保在 src 修改后且 iframe 加载完成后，再在 contentWindow 上绑定事件监听，否则添加在 contentWindow 对象上的内容会被刷新移除；
  • 由于 stackedit 上传图片功能目前只兼容编辑器工具栏的上传图片按钮，不能兼容粘贴上传后的图片插入到编辑器，因此在 stackedit 代码上增加新的 uploadPasteImgCompleted 自定义事件解决问题；
    • 目前如果不打开上传图片弹框，编辑器窗口不会监听 uploadCompleted 自定义事件，也没法将粘贴上传后的图片插入到编辑器；

测试用例

  1. 测试 Markdown 编辑器截图粘贴功能

测试步骤：
（1）新增一个 test.md 文件，双击 test.md 打开（此时调用的 stackeditForArt.html 打开 markdown 文件）；
（2）截屏（所使用的截屏工具需要能把截屏结果保存到系统剪贴板，即截屏后，剪贴板应该已经复制了一张图片）；
（3）在 Markdown 编辑器里 Ctrl + V 粘贴；

期望结果：粘贴事件触发，粘贴的图片自动上传，上传完成后插入到编辑器。

  1. 回归测试 Markdown 编辑器文本粘贴功能

测试步骤：
（1）新增一个 test.md 文件，双击 test.md 打开（此时调用的 stackeditForArt.html 打开 markdown 文件）；
（2）复制一段纯文本；
（3）在 Markdown 编辑器里 Ctrl + V 粘贴；

期望结果：粘贴事件触发，文本直接插入到编辑器，因为不属于粘贴图片，所以没有触发图片上传功能。

  1. 回归测试 Markdown 编辑器工具栏原来的上传图片按钮功能

测试步骤：
（1）新增一个 test.md 文件，双击 test.md 打开（此时调用的 stackeditForArt.html 打开 markdown 文件）；；
（2）点击工具栏原来的上传图片按钮；
（3）选择本地一张图片上传；

期望结果：选择的图片自动上传，上传完成后插入到编辑器。

额外补充

修改 stackedit 代码时，查看到 stackedit 代码历史提交记录，发现目前项目对 stackedit 的扩展是直接修改 stackedit 的已构建版的代码，而不是改 stackedit 的源码然后重新构建供项目使用。

stackedit 已构建版的代码已经打包压缩过，本身不容易改动，但本次提交因为对 stackedit 的改动较少，还是选择了直接修改已构建版的代码实现功能。

了解到还有一个 stackedit_docsys 仓库，看起来去年 3 月之前的 stackedit 代码都是这个仓库修改后再构建得到的。

为了以后更好的维护 stackedit，建议有空把去年 3 月到现在的 stackedit 已构建版的改动同步回去。