0
混合开发h5页面内需要做一个简易的富文本编辑器,需要有插入图片的功能(图文混排的),现在的问题是,点击插入图片按钮之后,可编辑div就失去焦点从而无法插入图片了,请问这个有什么解决方案?安卓下是可以在光标位置处插入图片的。但是IOS的webview下,点击插入图片的按钮就导致编辑区域失去了焦点。

我尝试在编辑区域失去焦点时记录下光标的位置,在执行插入图片的操作之前再在该位置插入光标。此方法在安卓下同样能生效,但在IOS下依然不生效。
失去焦点时,记录下光标位置:

var selection=window.getSelection();
_SELF.data.pos=selection.focusOffset;
_SELF.el.focusNode=selection.focusNode;

插入图片前,使原来位置插入光标:
setCaretPosition:function(selectorId,pos){

  var el=document.getElementById(selectorId);
  el.focus();
  if($.support.msie){
    var range = document.selection.createRange();
    this.last = range;
    range.moveToElementText(el);
    range.select();
    document.selection.empty(); //取消选中
  }else{
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    // alert(JSON.stringify(_SELF.el.focusNode));
    alert(pos);
    range.setEnd(_SELF.el.focusNode, pos);
    range.setStart(_SELF.el.focusNode, pos);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
},

结果发现在安卓下能获得正确的位置,在IOS下每次的位置都是0。且无法正常插入图片。

1个回答

0

已采纳

终于解决了,发现Safari在onblur时是获取不到光标的位置的(chrome可以)。所以改成监听可编辑div的input事件,记录下光标位置。考虑到用户可能想在一段文字中间插入图片,则用户会点击相应的位置,这时候也要记录下光标的位置。在执行插入图片的动作前再把光标位置还原即可。
记录光标位置:(监听可编辑div的input事件和点击事件时)
var selection=window.getSelection();
_SELF.data.lastRange=selection.getRangeAt(0);

恢复光标位置:
$("#editableDiv").focus();//先让可编辑框获焦
var selection=window.getSelection();
selection.removeAllRanges()
selection.addRange(_SELF.data.lastRange);

撰写答案