当前位置：首页 → 问答吧 → IE下html编辑器问题（图）

IE下html编辑器问题（图）

时间：2010-05-20

来源：互联网

ie8下的html编辑器当给一个容器设置了宽度和高度(如<div style="width:100px;height:100px">sample</div>)时用户需要双击该区域才能激活编辑状态，如下：
下图为双击以后进入编辑状态：

现有如下情形：当我激活该区域进入编辑状态后我想往里面插入一张图片，步骤如下：
1 将光标移该该区域，
2 点击html编辑器的插入图片按钮，打开插入图片面板，面板将通过iframe打开插入图片页面（这里以插入网络图片为例）
3 在面板输入图片地址，点击确定，插入图片

问题：
当我提交准备插入时光标丢失，于是我尝试在步骤2，面板打开之前执行一次选中当前选区的操作。出现的情形如下：可以看到面板打开时确实依然文字被选中

但是当我将光标移入面板输入框(input)时，选中状态丢失，区域的可编辑状态也失效，如下：

单击确定，插入失败，

而当如果需要插入的区域并非一个设置了宽高的容器（也就是在ie下不需要先双击激活进入可编辑状态的情况），同样的情况，却可正常插入。
当输入框（input）没有获取焦点直接点击插入图片时（这里给input预设一个值）也可以正常插入
如下：

应该是将焦点移到面板iframe中页面输入框时丢失了焦点，为找到解决办法，求有各位有经验的帮忙解释一下

以下为插入图片面板页面代码：

<body>
  <input type="text" id="url" name="url" />
  <a href="#" onclick="test()">提交</a>
  <script type="text/javascript">
   function test(){
      var url = document.getElementById('url').value;
      var f = parent.window.frames['mainPreview'];
         parent.mainEditor._selectRange();    //获取选中范围的函数
      parent.mainEditor.insertImage({       //向编辑区插入图片的方法
                     'url':url
      });
      parent.iframeWin.hide();                //隐藏面板
   }
  </script>
</body>

[ 本帖最后由 daoying2000 于 2010-5-20 18:13 编辑 ]

作者: daoying2000 发布时间: 2010-05-20

劳请解释解释

作者: daoying2000 发布时间: 2010-05-21

过来学习一下

作者: shbijiben 发布时间: 2010-05-21

又琢磨了一下午终于找到了解决办法，需要在回调函数之前再次获取选区然后将焦点定位到编辑区域，不过偶尔还是会丢失，不知道是ie实现的问题还是代码的问题了，没辙先将就用着了

作者: daoying2000 发布时间: 2010-05-21