zoukankan      html  css  js  c++  java
  • H5富文本编辑器之初始化用于编辑的DOM-遁地龙卷风

    使用H5的全局属性contenteditable可以让DOM元素及其子元素变的可编辑

    <div  contenteditable id="editor">
       
    </div>

    样式代码

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

    * chrome 49下测试有效

    以下方式使得用户初始输入的文本内容在p元素的包裹下

    <div  contenteditable id="editor" spellcheck="false">
        <p><br/></p>
    </div>

    默认规则如下

    否则将直接作为#editor元素的文本节点,即
    <div  contenteditable id="editor" spellcheck="false">
        文本内容
    </div>
    同事点击Enter将新增div元素,即
    <div  contenteditable id="editor" spellcheck="false">
        文本内容
        <div></div>
    </div>
    View Code

    #editor中的所用元素都是可被删除的,当#editor为空元素时,用户再次输出内容还会应用默认规则,这里要监听这一状态,发生时将<p><br/></p>添入其中,并且定位光标到p元素的最后

    定位光标代码

    function cursorToEnd(element){
        
        element.focus();
        var range = window.getSelection();
    
        range.selectAllChildren(element);
        range.collapseToEnd();
        
    }
    View Code

    window.getSelection() IE9已经支持

    不定位可能发生以下情况

    <div  contenteditable id="editor" spellcheck="false">
        111111
        <p><br/></p>
    </div>
    View Code

     打赏支持方式

  • 相关阅读:
    BZOJ4223 : Tourists
    BZOJ3565 : [SHOI2014]超能粒子炮
    BZOJ3499 : PA2009 Quasi-template
    BZOJ3490 : Pa2011 Laser Pool
    BZOJ2828 : 火柴游戏
    BZOJ3070 : [Pa2011]Prime prime power 质数的质数次方
    BZOJ2138 : stone
    BZOJ2167 : 公交车站
    BZOJ1290 : [Ctsc2009]序列变换
    Ural2110 : Remove or Maximize
  • 原文地址:https://www.cnblogs.com/resolvent/p/7128411.html
Copyright © 2011-2022 走看看