ckeditor5图片上传_图片url地址怎么获取

(5) 2024-06-18 14:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
ckeditor5图片上传_图片url地址怎么获取,希望能够帮助你!!!。

最近的项目中使用了KindEditor作为富文本编辑器进行文本编辑处理。KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。官网地址:http://www.kindsoft.net/。

KindEditor能够进行图片上传,上传完毕后可以马上在文本编辑器中看到刚刚上传的图片,具体实例下载KindEditor之后,包里面有一个demo,可以参考。

使用KindEditor上传图片,图片上传的路径是由用户自行指定的,KindEditor展示上传的图片时,需要一个路径作为图片img的src,这个路径由处理图片的JSP指定,当拼接好url之后,使用PageContext的getOut,获取输出流进行输出:

       

 //传送给KE,作为图片路径 JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", saveUrl + newFileName); out.println(obj.toJSONString());

这个放在JSONObject中的url,KindEditor.js会接收,并获取url作为图片src属性的处理,具体在kindeditor.js中:

insertimage : function(url, title, width, height, border, align) {
		title = _undef(title, '');
		border = _undef(border, 0);
		var html = '<img src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
		if (width) {
			html += 'width="' + _escape(width) + '" ';
		}
		if (height) {
			html += 'height="' + _escape(height) + '" ';
		}
		if (title) {
			html += 'title="' + _escape(title) + '" ';
		}
		if (align) {
			html += 'align="' + _escape(align) + '" ';
		}
		html += 'alt="' + _escape(title) + '" ';
		html += '/>';
		return this.inserthtml(html);
	}

insertimage的function参数url就是在处理图片上传的JSP中放入JSONObject的url。如果我们需要对上传的图片属性在入库之前做一些处理,就可以通过更改这个函数来改变img的属性。

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复