作为富文本编辑器,ckeditor提供了丰富的功能供使用,自然图片上传是比不可缺的。

对于服务端如何配合图片上传不在本文的讨论范围,这个相信搜索一下就不乏大面积的教程文章之类的。

飞尘在这里是遇到这样的功能需要,图片上传之后,需要一个删除功能,可能这样表述的不是很明确。就以一般论坛为例,发过帖子的都应该知道,可以上传附件,附件上传后也可以删除。这里的图片也做类似的处理,即有个图片附件的列表,显示所有已经上传的图片,图片上传后是可以直接插入到当前编辑的内容中的,此时如果在图片附件列表中删除了某个图片,而图片已经被插入到内容中,就会出现不同步的情况,编辑的内容在显示的时候就会引用一张被删除的图片,这是我们不希望看到的。

于是我们希望删除图片附件的同时,将编辑内容中的图片也一并删除,这样就可以保持同步了。

思路大概是这个样子,图片的地址在上传后我们是知道的,这样在删除图片附件时,从编辑内容中查找到该图片节点,并将其删除,看上去好像很简单哦,嗯,的确使得,嘿嘿。

那就不再多啰嗦了,附上一段样例代码吧:

1
2

// 删除编辑器中的图片 var obj = $(CKEDITOR.instances.richText.document.$.body); obj.find('img\[src="' + 'somepath/filename' + '"\]').remove(); \\n