关于WYSIWYG的实现，IE下怎么实现insertimage

willko 2008-04-17 08:06:08
大家好，
document.execCommand('insertimage', false, 'http://xxx.cp');
这句在IE下，，无论焦点在哪，，都插入到最前面。。
请问应该怎么办?
谢谢
...全文
116 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
bcexe 2008-04-18
  • 打赏
  • 举报
 回复

编程动力 http://www.bcexe.com 专业的编程开发类网站,网络编程,软件开发,网站开发,

一切尽在这里!
willko 2008-04-18
  • 打赏
  • 举报
 回复
if (editor.contentDocument) {
this.doc = editor.contentDocument;
this.doc.designMode = "On";
}
else {
this.doc = editor.contentWindow.document;
this.doc.designMode = "On";
this.doc = editor.contentWindow.document;
}

this._win = editor.contentWindow;


editor 是iframe对象。。
我用this._win.focus().在FF下没问题。。在IE下只能查到前面，，无论焦点的位置
用this.doc.focus()在IE和FF下都不行。。
Ischema 2008-04-18
  • 打赏
  • 举报
 回复
帮顶
（专为一日一回）
Go 旅城通票 2008-04-18
  • 打赏
  • 举报
 回复
ie不是contentWindow,仔细看我的下面这个函数,ie是window.frames[objId].document.focus();



var IsIE=document.all;



//按id获取对象

function $(objId,IsFrame)

{

  if(IsFrame)

    return IsIE?window.frames[objId]:document.getElementById(objId).contentWindow;

  else

    return document.getElementById(objId);

}
willko 2008-04-18
  • 打赏
  • 举报
 回复
谢谢，，，但是我在执行这个操作之前会弹出DIV，让用户输入图片地址。。
而不是直接执行，，，IE不会记录之前的焦点

我用iframe.contentWindow.focus();
在ff下就正常
Go 旅城通票 2008-04-18
  • 打赏
  • 举报
 回复
没问题啊,应该是你没重新获取焦点
<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

    <title>Web编辑器</title>

    <style type="text/css">

    body{ font-size:10pt;}

    </style>

  </head>

  <body>

   <script type="text/javascript">

var IsIE=document.all;

//按id获取对象

function $(objId,IsFrame)

{

  if(IsFrame)

    return IsIE?window.frames[objId]:document.getElementById(objId).contentWindow;

  else

    return document.getElementById(objId);

}

document.write("<a href='#' onclick='InsertIMG();return false;'>插入图片</a><br/>");

document.write('<iframe ID="HtmlEditor" name="HtmlEditor" style="height:100px;width:300px;background:#ffffff;"'

         +' frameBorder="1px" marginHeight="0" marginWidth="0" src="about:blank"></iframe>');



var frm=$('HtmlEditor',true);

var doc=frm.document;       

if(doc.body)

{

   doc.body.style.backgroundColor='#ffffff';

   doc.body.style.fontSize='12px';

   doc.body.style.fontFamily='verdana';

   doc.body.style.margin='4px';

}

doc.designMode="On";

if(IsIE) doc.contentEditable="True";

function InsertIMG()

{

   var frm=$('HtmlEditor',true);

   var doc=frm.document;

   frm.focus();//=========要注意获取焦点

    doc.execCommand('InsertImage',false,"0.gif");

}

</script>

  </body>

</html>
willko 2008-04-18
  • 打赏
  • 举报
 回复
如果使用appendChild的话，，就无论焦点在哪都加到最后面了
willko 2008-04-18
  • 打赏
  • 举报
 回复
是iframe啊。。
我不知道怎么记录位置。。。和定位
谢谢
Go 旅城通票 2008-04-18
  • 打赏
  • 举报
 回复
下面的可以了

<html> 

   <head> 

     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 

     <title>Web编辑器 </title> 

     <style type="text/css"> 

    body{ font-size:10pt;} 

     </style> 

   </head> 

   <body> 

    <script type="text/javascript"> 

var IsIE=document.all; 

//按id获取对象 

function $(objId,IsFrame) 

{ 

  if(IsFrame) 

    return IsIE?window.frames[objId]:document.getElementById(objId).contentWindow; 

  else 

    return document.getElementById(objId); 

} 

document.write(" <a href='#' onclick='showInsertIMG();return false;'>插入图片 </a> <br/>"); 

document.write(' <iframe ID="HtmlEditor" name="HtmlEditor" style="height:100px;width:300px;background:#ffffff;"' 

         +' frameBorder="1px" marginHeight="0" marginWidth="0" src="about:blank" onload="SetEditor()"> </iframe>');

         



function SetEditor()

{ 

var frm=$('HtmlEditor',true); 

var doc=frm.document;       

try{ 

if(doc.body) 

{ 

   doc.body.style.backgroundColor='#ffffff'; 

   doc.body.style.fontSize='12px'; 

   doc.body.style.fontFamily='verdana'; 

   doc.body.style.margin='4px'; 

} 

doc.designMode="On"; 

if(IsIE) doc.contentEditable="True"; 

}catch(e){}

}

window.onload=SetEditor;



var IERange=null;

function InsertIMG() 

{ 

   var frm=$('HtmlEditor',true); 

   var doc=frm.document; 

   if(IsIE)//是ie时使用上次保存的range对象

   {  

     doc=IERange?IERange:doc;

   }

   frm.focus();//=========要注意获取焦点 

   

   doc.execCommand('InsertImage',false,"logo.gif");//frm.focus(); 

   IERange=null;

  //var b = document.getElementById("brume"); 

  //b.style.display = "none"; 

} 



function showInsertIMG() 

{ 

if(IsIE)

{

var frm=$('HtmlEditor',true);

frm.focus();

IERange=frm.document.selection.createRange();//保存Range对象

}

var b = document.getElementById("brume"); 

b.style.display = "block"; 

document.getElementById("xxx").focus(); 

} 

</script> 

<div id="brume" style="display:none;z-index:9999;"> 

<a href='#' onclick='InsertIMG();return false;'>插入图片 </a> <input type="text" id="xxx" /> </div> 

   </body> 

</html>
willko 2008-04-18
  • 打赏
  • 举报
 回复
这段会更加容易理解一点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Web编辑器</title>
<style type="text/css">
body{ font-size:10pt;}
</style>
</head>
<body>
<script type="text/javascript">
var IsIE=document.all;
//按id获取对象
function $(objId,IsFrame)
{
if(IsFrame)
return IsIE?window.frames[objId]:document.getElementById(objId).contentWindow;
else
return document.getElementById(objId);
}
document.write("<a href='#' onclick='showInsertIMG();return false;'>插入图片</a><br/>");
document.write('<iframe ID="HtmlEditor" name="HtmlEditor" style="height:100px;width:300px;background:#ffffff;"'
+' frameBorder="1px" marginHeight="0" marginWidth="0" src="about:blank"></iframe>');

var frm=$('HtmlEditor',true);
var doc=frm.document;
if(doc.body)
{
doc.body.style.backgroundColor='#ffffff';
doc.body.style.fontSize='12px';
doc.body.style.fontFamily='verdana';
doc.body.style.margin='4px';
}
doc.designMode="On";
if(IsIE) doc.contentEditable="True";
function InsertIMG()
{
var frm=$('HtmlEditor',true);
var doc=frm.document;
frm.focus();//=========要注意获取焦点
doc.execCommand('InsertImage',false,"http://localhost/img/logo.gif");frm.focus();

var b = document.getElementById("brume");
b.style.display = "none";
}

function showInsertIMG() {
var b = document.getElementById("brume");
b.style.display = "block";
document.getElementById("xxx").focus();
}
</script>
<div id="brume" style="display:none;z-index:9999;"><a href='#' onclick='InsertIMG();return false;'>插入图片</a><input type="text" id="xxx" /></div>
</body>
</html>



谢谢
willko 2008-04-18
  • 打赏
  • 举报
 回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Web编辑器</title>
<style type="text/css">
body{ font-size:10pt;}
</style>
</head>
<body>
<script type="text/javascript">
var IsIE=document.all;
//按id获取对象
function $(objId,IsFrame)
{
if(IsFrame)
return IsIE?window.frames[objId]:document.getElementById(objId).contentWindow;
else
return document.getElementById(objId);
}
document.write("<a href='#' onclick='showInsertIMG();return false;'>插入图片</a><br/>");
document.write('<iframe ID="HtmlEditor" name="HtmlEditor" style="height:100px;width:300px;background:#ffffff;"'
+' frameBorder="1px" marginHeight="0" marginWidth="0" src="about:blank"></iframe>');

var frm=$('HtmlEditor',true);
var doc=frm.document;
if(doc.body)
{
doc.body.style.backgroundColor='#ffffff';
doc.body.style.fontSize='12px';
doc.body.style.fontFamily='verdana';
doc.body.style.margin='4px';
}
doc.designMode="On";
if(IsIE) doc.contentEditable="True";
function InsertIMG()
{
var frm=$('HtmlEditor',true);
var doc=frm.document;
frm.focus();//=========要注意获取焦点
doc.execCommand('InsertImage',false,"http://localhost/img/logo.gif");frm.focus();
}

function showInsertIMG() {
var b = document.getElementById("brume");
b.style.display = "block";
document.getElementById("xxx").focus();
}
</script>
<div id="brume" style="display:none;z-index:9999;"><a href='#' onclick='InsertIMG();return false;'>插入图片</a><input type="text" id="xxx" /></div>
</body>
</html>

因为有输入表单，，所以焦点会丢失。。。可以看下这段代码，，
谢谢
蒋晟 2008-04-18
  • 打赏
  • 举报
 回复
createelement
appendchild
Go 旅城通票 2008-04-17
  • 打赏
  • 举报
 回复
你是在做iframe编辑器??还是什么的???

如果是你先时iframe/获取你需要插入图片的文字 获取焦点,然后使用iframe的document来执行execCommand
willko 2008-04-17
  • 打赏
  • 举报
 回复
顶
小而巧的富文本编辑器bootstrap-wysiwyg
关于： bootstrap-wysiwyg 是Bootstrap小插件（5KB, &lt; 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。 主要特色： 在Mac和Wndows平台上能够自动针对常用操作绑定标准热键； 可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）； 语音识别输入（仅限Chrome浏览器）； 允许自定义工具条；不生成额外标签；...
jquery.wysiwyg.js
http://code.google.com/p/jwysiwyg/ 做些小改动 (function( $ ) { $.fn.document = function() { var element = this[0]; if ( element.nodeName.toLowerCase() == 'iframe' ) ...
php简单富文本,简单实现JavaScript 富文本编辑器的方法
前段时间在寻找一些关于富文本编辑器的资料，然后发现了这个名为 Pell 的项目，它是一个所见即所得(WYSIWYG)的文本编辑器，虽然它的功能很简单，但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行，即使加上其它部分，总的 js 数量也不到200行。本文主要介绍了不到200行 JavaScript 代码实现富文本编辑器的方法,需要的朋友可以参考下，希望能帮助到...
html实现富文本编辑器,前端程序员福利，6款轻量级富文本编辑器，轻松实现富文本编辑...
1.国产富文本编辑wangEditor基于javascript跟css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费，样式可自定义typecho 富文本编辑器，菜单栏可以自定义配置。下载：使用：2.QuillQuill 是一个开源的富文本编辑器，基于可扩充的构架设计，提供丰富的 API 进行订制。特性：使用方式：3.bootstrap-wysiwyg为Bootstrap订制的微型所见即所...
怎么用文本文档写html框架,基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作...
在很多场合，我们需要在线编辑HTML内容，然后在页面上或者其他终端上(如小程序、APP应用等)显示，编辑HTML内容的插件有很多，本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和图片插入操作，这个控件的使用非常方便，并且用户群也很大。Summernote 是一个简单灵活，所见即所得(WYSIWYG)的编辑器，Summernote是一个轻量级、灵活基于Bootstr...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章