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

     打赏支持方式

  • 相关阅读:
    在子Repeater调用父Repeater里的数据
    使用事务范围实现隐式事务
    关于TransactionScope分布式事务在Oracle下的运作
    C#枚举类型的使用示例
    ORACLE分区表发挥性能
    oracle 批处理 执行 sql
    连接查询_左连接/右连接/全连接的区别
    转: C#的25个基础概念
    bat文件编写
    Nginx 远程安全漏洞
  • 原文地址:https://www.cnblogs.com/resolvent/p/7128411.html
Copyright © 2011-2022 走看看