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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KF富文本编辑器</title>
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <script type="text/javascript">
    $(function(){
    $d = $("#editor")[0].contentWindow.document; // IE、FF都兼容
    $d.designMode="on"; //分别设置designMode属性为’on’,contentEditable属性为’true’让iframe可编辑
    $d.contentEditable= true;
    $d.open(); //但是在实际运行的时候,你是否发现除了chrome浏览器外(用IETester, Firefox, Chrome测试)打开这个页面都处于正在加载的状态(那个轮子转啊转,转个不停…)只要在doc.write()方法前后加上doc.open(), doc.close()就可以了(在写之前开启,写完之后关闭)。
    $d.close();
    // 在iframe中插入一张图片
    $('#insert_img').click(function(){
    var img = '<img src="' + $('#path').val() +'" />';
    $("body", $d).append(img);
    });
    // 获取iframe的body内容,用于显示或者插入到数据库
    $('#preview').click(function(){
    alert($('#editor').contents().find('body').html());
    $('#preview_area').html($('#editor').contents().find('body').html());
    });

    //粗体
    $('#bBtn').click(function(){
    var win=document.getElementById("editor").contentWindow;
    $d.execCommand("Bold",false,null);

    });
    //字体大小
    $('#sss').click(function(){
    var win=document.getElementById("editor").contentWindow;
    win.document.execCommand("FontSize",false,'18px');
    win.focus();
    });


    });
    </script>
    </head>
    <body>
    <p>
    <input type="button" id="sss" value="s" style="font-weight:bold" />
    </p>
    <p>
    <input type="button" id="bBtn" value="B" style="font-weight:bold" />
    </p>
    <p><iframe id="editor" width="600px" height="200px" style="border:solid 1px;"></iframe></p>
    <input type="text" id="path" value="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png"/>
    <input type="button" id="insert_img" value="插入图片" />
    <input type="button" id="preview" value="预览" />
    <p style="border: 1px dashed #ccc;" id="preview_area"></p>
    </body>
    </html>

  • 相关阅读:
    XML相关知识点
    MLPlatform开发日志
    1.0 es6 箭头函数
    基本数学概念
    4.4 thymeleaf使用补充
    vim操作手册
    eclise创建后台项目
    正则表达式
    数据库隔离级别
    1. gradle的使用教程
  • 原文地址:https://www.cnblogs.com/my2018/p/10203594.html
Copyright © 2011-2022 走看看