zoukankan      html  css  js  c++  java
  • 富文本编辑器

    方式一就是通过嵌入一个frame里面包含一个空白html,通过designMode 设置这个空白的HTML为可编辑,然后你就可以修改它body的内容了,但只有当前页面加载完成以后,才能设那个frame的designMode 为on
     
    <iframe name=”richedit” style=”height: 100px; 100px” src=”blank.htm”> 
    <!DOCTYPE html>
    <html>
        <head>
            <title>Blank Page for Rich Text Editing</title>
        </head>
        <body>
        </body>
    </html>
    </iframe>
     
    这个脚本是用于containing页面的,监听是否加载完成:
    <script type=”text/javascript”> 
        EventUtil.addHandler(window, “load”, function(){  frames[“richedit”].document.designMode = “on”; });
    </script>
     
    另一种方式,能够把任何元素设为可编辑的:
    <div class=”editable” id=”richedit” contenteditable></div>
     
    脚本:
    var div = document.getElementById(“richedit”); richedit.contentEditable = “true”;    这样那个元素就变成可编辑的了
    contentEditable有三个可选值:true,false,inherit(继承父元素的设置,因为一个contenteditable 元素里面的元素可以被创建或者销毁)
     
     
    使用frame的,与脚本进行交互:
    //toggle bold text in an iframe 
    frames[“richedit”].document.execCommand(“bold”, false, null);
    //toggle italic text in an iframe 
    frames[“richedit”].document.execCommand(“italic”, false, null);
    //create link to www.wrox.com in an iframe 
    frames[“richedit”].document.execCommand(“createlink”, false,“http://www.wrox.com”);
    //format as first-level heading in an iframe 
    frames[“richedit”].document.execCommand(“formatblock”, false, “<h1>”);
     
    如果是contenteditable直接在当前document调用方法:
    //toggle bold text 
    document.execCommand(“bold”, false, null);
    //toggle italic text
    document.execCommand(“italic”, false, null);
    //create link to www.wrox.com 
    document.execCommand(“createlink”, false,“http://www.wrox.com”); document.execCommand(“formatblock”, false, “<h1>”);
    //format as first-level heading
     
    注意:每个浏览器实现方式可能不同,例如执行bold,有些是添加strong,有些用b
     
     
    检测能不能执行,这就是加粗按钮的原理:
    var result = frames[“richedit”].document.queryCommandEnabled(“bold”);
     
     
    检测是否执行了:
    var isBold = frames[“richedit”].document.queryCommandState(“bold”);
     
     
    获取选中部分执行过的的样式值:
    var fontSize = frames[“richedit”].document.queryCommandValue(“fontsize”);
     
     
    你可以检测当前选取的文字,配合range来进行相应的操作:
    var selection = frames[“richedit”].getSelection();
    //get selected text
    var selectedText = selection.toString();
    //get the range representing the selection var range = selection.getRangeAt(0);
    //highlight the selected text
    var span = frames[“richedit”].document.createElement(“span”); span.style.backgroundColor = “yellow”; range.surroundContents(span);
     
    IE8以及之前使用
    var range = frames[“richedit”].document.selection.createRange();
    var selectedText = range.text;
     
     
    如果要做成表单提交的话,需要创建一个hidden的表单才行,然后提取编辑的内容进去:
    EventUtil.addHandler(form, “submit”, function(event){ event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.elements[“comments”].value = frames[“richedit”].document.body.innerHTML; });
     
    另一个contenteditable 方式的话:
    EventUtil.addHandler(form, “submit”, function(event){ event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
              target.elements[“comments”].value = document.getElementById(“richedit”).innerHTML;
     
    });
  • 相关阅读:
    slurm.conf系统初始配置
    MySQL数据库服务器(YUM)安装
    Slurm任务调度系统部署和测试(源码)(1)
    并行管理工具——pdsh
    Munge服务部署和测试
    NTP服务部署和测试
    LDAP-openldap服务部署和测试(YUM安装)
    KVM虚拟机管理——虚拟机创建和操作系统安装
    KVM虚拟机管理——虚拟机克隆
    KVM虚拟化环境准备
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5166447.html
Copyright © 2011-2022 走看看