zoukankan      html  css  js  c++  java
  • 所见即所得RichEditor的简单实现

    整体思路如下:
      1. 创建一个iframe;
      2. 将designMode设为"on"表示允许编辑;
      3. 点击按钮(可改为图片)时,使用execCommand添加Tag等。
      关于designMode:
      表示是否允许编辑网页内容。IE中对应的是document.body.contentEditable。
    以下是一个包含“加粗”、“斜体”和“下划线”三种功能的所见即所得编辑器,当然实际上还算不上“Rich”,不过我们可以采用类似的思路增加其他功能。少数地方用到了jQuery,实际上自己实现也不难。

    <input type="button" value="B" onclick="editor.doc.execCommand('bold')">
    <input type="button" value="I" onclick="editor.doc.execCommand('italic')">
    <input type="button" value="U" onclick="editor.doc.execCommand('underline')">

    <br />债务追讨
    <iframe id="frame" frameborder="0" style="border:1px solid"></iframe>
    <br />
    <input type="button" value="Get Value" onclick="alert($(editor.doc.body).html())">
     
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="editor.js"></script>

    editor.js的内容:

    editor = {
        init: function() {
            var ie = $.browser.msie;
            editor.doc = $('#frame')[0].contentWindow.document;
       
            if (ie) {
                editor.doc.body.contentEditable = true;
            } else {
                editor.doc.designMode = "on";
            }
        }风之境地 java-javascript 蘑菇街女装
    };

    $(function() {
        editor.init();
    });

  • 相关阅读:
    fetch用法说明
    正则表达式贪婪与非贪婪模式
    export ,export default 和 import 区别 以及用法
    理解MVC 框架
    HTTP 请求方法介绍
    Http协议--请求报文和响应报文
    一、Web 如何工作的
    前端工程师进阶之路-总纲
    前端知识体系之CSS及其预处理器SASS/LESS
    进度条
  • 原文地址:https://www.cnblogs.com/sky7034/p/2034987.html
Copyright © 2011-2022 走看看