代码改变世界

Web 版的 Html 编辑器的原理

  音乐让我说  阅读(332)  评论(0)  编辑  收藏  举报

本代码参考 http://www.cnblogs.com/keepfool/archive/2011/12/21/2295335.html

代码如下（可以点击“运行代码”按钮）：

复制代码
<!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>
    <title>Web 版的 Html 编辑器的原理</title>
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function()
        {
           var jDoc = $("#editor")[0].contentWindow.document;
           jDoc.designMode = "on";
           jDoc.contentEditable = true;
           jDoc.open();
           jDoc.close();        
           var jBody = $(jDoc).find("body");
           jBody.append("<h1>Hello World，这里是 IFrame 里面的初始化内容</h1>");
           
           $("#insert_img").click(function()
           {
               var imgHtml = "<img src='"+ $("#path").val() +"' alt='google logo' title='google logo'/>";
               jBody.append(imgHtml);
           });
           
           $("#preview").click(function()
           {
               var tempHtml = jBody.html();
               alert("IFrame 里面的源代码如下：\n" + tempHtml);
               $("#preview_area").html(tempHtml);
           });
           
        });
    </script>
</head>
<body>
    <p>
        <iframe id="editor" width="600px" height="200px" style="border: solid 1px red;"></iframe>
    </p>
    <input type="text" id="path" style="width:35%;" 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="预览" /><!-- #ccc -->
    <div style="border: 1px dashed green;" id="preview_area">
    </div>
</body>
</html>
复制代码

 

谢谢浏览！

点击右上角即可分享
微信分享提示