码迷,mamicode.com
首页 > 其他好文 > 详细

KF富文本编辑器

时间:2018-12-31 23:42:31      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:command   val   fonts   1.0   内容   页面   das   exec   字体大小   

<!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>

KF富文本编辑器

标签:command   val   fonts   1.0   内容   页面   das   exec   字体大小   

原文地址:https://www.cnblogs.com/my2018/p/10203594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!