今天要帮同学解决一个问题,关于富文本图片,用户选择图片完成以后图片就会上传到服务器,然后获取URl展示到富文本内容区,但是又存在用户对于图片不满意需要删除的情况。因此存在服务器文件冗余问题。因此就要想办法用在富文本区将图片删除的时候同时同步到服务器将对应的图片删除,因此就要获得对应图片的URL。观察得知,富文本内容其实根本是一个<div>加上contenteditable = "true"的属性。
<div contenteditable="true" style="width:100px;height:100px;border:1px solid black;" id=“testDiv”>
<!--这是一个可编辑的div-->
</div>
插入图片和删除图片其实就是在div里插入和删除节点
<div contenteditable="true" style="width:100px;height:100px;border:1px solid black;" id=“testDiv” οnclick="keyDown()">
<img src="file:///C:/Users/%E4%BF%8A%E6%9D%B0/Pictures/%E6%A1%8C%E9%9D%A2/9-not-need-happy.jpg"
style="height:60px;" id="testImg">
</div>
因此只要给img绑定事件,当img被删除就获取其url,经过搜索发现 DOMNodeRemoved 事件(当然插入元素也有对应的事件 domnodeinserted)因此可以这样写
$("img").bind('DOMNodeRemoved',function(e) {
console.log($(this).attr("src"));
});