`

实现富文本编辑组件时pasteHTML的问题

阅读更多

补(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

    quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的,而我们实际开发需要将图片存在自己的服务器中...

    JS实现pasteHTML兼容ie,firefox,chrome的方法

    主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    JS中innerHTML和pasteHTML的区别实例分析

    主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下

    ckeditor_notion_pastehtml

    ckeditor_notion_pastehtml

    xheditor-1.1.14

    如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....

    xheditor v1.0.0 rc2 build 100401

    修正:加载多个编辑器时,用于IE粘贴处理的临时隐藏iframe被重复加载问题的修正 修正:IE6下某些情况下全屏后再取消全屏导致浏览器崩溃问题的修正 调整:所有img图片强制添加alt标签,以使代码符合XHTML标准 调整...

    xhEditor编辑器 v0.9.7 简体中文

    软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点): Small:初始加载5个文件,包括:...

    类似qq空间中的留言编辑器

    类似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...

    js正文内容高亮效果的实现方法

    代码如下://高亮显示搜索到的关键字function HeightLight(Keyword){ //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange();...

    firefox下javascript实现高亮关键词的方法

    “点睛”的广告代码,很牛B,本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的,我看了大半天,楞是没有看出个所以然来!还是自己慢慢研究吧。

    javascript高亮效果的二种实现方法

    js高亮方法一: 代码如下:[removed] ... while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”); keyword.moveStart(‘character’,1); } } } function highword(nWord){ var array = nWo

    js使用小技巧

    可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^x00-xff]/ 汉字 /[u4e00-u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; ...

Global site tag (gtag.js) - Google Analytics