简单在线编辑器

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KF富文本编辑器</title>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js">
</script>
<script type="text/javascript">
$(function(){
    $d = $("#editor")[0].contentWindow.document; // IE、FF都兼容
    $d.designMode="on";
    $d.contentEditable= true;
    $d.open();
    $d.close();
    $("body", $d).append("<div>A</div><div>B</div><div>C</div>");

    $('#insert_img').click(function(){
        // 在iframe中插入一张图片                                   
        var img = '<img src="' + $('#path').val() +'" />';
        $("body", $d).append(img);
    });

    $('#preview').click(function(){
        // 获取iframe的body内容,用于显示或者插入到数据库
        alert($('#editor').contents().find('body').html());
        $('#preview_area').html($('#editor').contents().find('body').html());

    });
});

</script>
</head>

<body>

<p><iframe id="editor" width="600px" height="200px" style="border:solid 1px;"></iframe></p>
<input type="text" id="path" value="http://www.google.com/images/errors/robot.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>

 

《简单在线编辑器》有1个想法

  1. Along with everything which appears to be developing throughout this subject matter, many of your points of view tend to be quite refreshing. However, I appologize, because I can not subscribe to your entire plan, all be it refreshing none the less. It looks to everyone that your commentary are generally not totally rationalized and in actuality you are generally your self not even entirely confident of the assertion. In any case I did take pleasure i examining it.

发表评论

电子邮件地址不会被公开。 必填项已用*标注