基于WebView实现富文本编辑

在webView 编辑中，对于键盘遮挡是一个非常头疼的事情，一般做法有：
一、采用控制 WebView 可视区域与键盘的高度关系，并实时的滑动 WebView
注：原始空间 frame 变化频繁，容易在复杂UI情况下照常 controller逻辑过于复杂
二、通过JS获取光标位置，并计算与WebView坐标位置，然后与键盘高度的关系进行换算
注：换算过程容易造成WebView 抖动问题
三、纯粹通过 JS 控制光标显示位置，通过JS 实现window滑动

经过多个方案实现比较，方案三实现存储 JS控制，容易维护，并且效果是最优的一种。

WebView 设置可编辑

contenteditable 是将html中某一标签设置成可编辑状态，允许调起键盘输入内容

    
        
        ${script}
    
    

        

            ${content}
        
    

    

避免键盘遮挡

1、通过 JS 监听 input 输入事件，每一次自动调整window滑动位置
2、获取光标位置，采用临时插入 标签，获取其坐标，然后在从父节点将其删除。
注：

• 在正常字符输入，获取当前光标位置可以通过

var sel = document.getSelection();               // change the selection
var ran = sel.getRangeAt(0);                        // into a range
var rec = ran.getClientRects()[0];   
var top = rec.top;               // Y coord of selection top edge
var bottom  = rec.bottom; // Y coord of selection bottom edge
var left = rec.left;             // X coord of selection left edge
var right = rec.right;        // X coord of selection right edge

• 但是在输入换行符时，该方法就无法实现准确获取坐标位置了，只能通过取巧的方式，临时插入 标签 的方法

  
  

var gCursorOffset = 200;
function setCursorOffset(offset) {
    // 设置光标 相对于顶部 的偏移量
    if (offset > 0 ) {
        gCursorOffset = offset;
    }
}

// 获取当前光标的位置坐标
function getCursorPosition() {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var span = document.createElement('span');
    range.collapse(false);
    range.insertNode(span);
    var topPosition = span.offsetTop;
    var spanParent = span.parentNode;
    spanParent.removeChild(span);
//    spanParent.normalize();
    return topPosition;
}

function autoScroll(y)
{
    var position = getCursorPosition();
    console.log('position: ' + position);
    window.scrollTo(0,position - gCursorOffset);
}

// 监听输入事件
document.addEventListener("input", function(e){
                          autoScroll();
                          },false);