H5富文本编纂器的细致介绍--百分百源码网

H5富文本编纂器的细致介绍-

发布时间：08/01 来源：未知浏览：关键词：

运用H5的全局属性contenteditable可以让DOM元素及其子元素变的可编纂<divcontenteditableid"editor"><div>样式代码html,body{overflow:hidden;width:100%;height:100%;}*{margin:0;paddi 运用H5的全局属性contenteditable可以让DOM元素及其子元素变的可编纂

样式代码

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}* {
  margin: 0;
  padding: 0;
}
#editor {
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 15px;
}

* chrome 49下测试有效

下列方式使得会员初始输入的文本内容在p元素的包裹下

默许法则如下

不然将直接作为#editor元素的文本节点，即文本内容同事点击Enter将新增div元素,即文本内容

View Code

#editor中的所用元素都是可被删除的,当#editor为空元素时,会员再次输出内容还会利用默许法则，这里要监听这一状态，产生时将

添入其中，而且定位光标到p元素的最后

定位光标代码

function cursorToEnd(element){
    
    element.focus();var range = window.getSelection();

    range.selectAllChildren(element);
    range.collapseToEnd();
    
}

window.getSelection() IE9已经支撑

不定位可能产生下列状况

111111

以上就是H5富文本编纂器的细致介绍的细致内容，更多请关注百分百源码网其它相干文章！

打赏