补(2006-3-15整理)
实现富文本编辑组件中的插入图片功能
图片成功上传后得到服务器路径
当要将其显示在web页面上时,发现HTML代码中 src="......" 都会自动加上http://服务器名
这样将来如果更换服务器将会导致很多图片无法正常显示,必须通过update数据库来解决
查看代码,发现调用了DHTML中的TextRange对象的pasteHTML(str)方法
该方法是
将 HTML 文本粘贴入给定文本范围,替换范围内任何先前的文本和 HTML 元素。
执行该方法时候,会自动获取Web服务器名,并自动在src属性值中加上"http://服务器名" 这一段
解决方法:可以手动给img赋一个id,然后通过img对象.src属性来强行写入相对路径
[贴上项目中的涉及的部分js代码]
var uploadimageid = 0;
//在文本框显示插入的图片的
function addimage(){
uploadimageid++;
var today=new Date();
today=today.getTime();
uploadimageid=uploadimageid+today; //保证唯一
var insertimagetext="";
insertimagetext='<IMG id="uploadimage' + uploadimageid + '" SRC="';
insertimagetext+=imageurl;
insertimagetext+='"';
insertimagetext+='>';
var xman=frames ['Editor'].document.selection.createRange();
xman.pasteHTML(insertimagetext);
//执行pasteHTML方法后,再次强行写入相对路径
Editor.document.all["uploadimage" + uploadimageid].src = imageurl;
}
分享到:
相关推荐
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的,而我们实际开发需要将图片存在自己的服务器中...
主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下
ckeditor_notion_pastehtml
如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....
修正:加载多个编辑器时,用于IE粘贴处理的临时隐藏iframe被重复加载问题的修正 修正:IE6下某些情况下全屏后再取消全屏导致浏览器崩溃问题的修正 调整:所有img图片强制添加alt标签,以使代码符合XHTML标准 调整...
软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点): Small:初始加载5个文件,包括:...
类似QQ空间里的留言编辑器. case 1: E.document.execCommand("Bold");break; case 2: E.document.execCommand("Italic");break; case 3: E.document.execCommand("Underline");break; case 6: var _Text=Remove...
代码如下://高亮显示搜索到的关键字function HeightLight(Keyword){ //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange();...
“点睛”的广告代码,很牛B,本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的,我看了大半天,楞是没有看出个所以然来!还是自己慢慢研究吧。
js高亮方法一: 代码如下:[removed] ... while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”); keyword.moveStart(‘character’,1); } } } function highword(nWord){ var array = nWo
可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^x00-xff]/ 汉字 /[u4e00-u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; ...