您的位置：首页 > Web前端 > HTML

html 富文本编辑（WYSIWYG）

2016-01-16 21:56 726 查看

HTML 富文本编辑
1.富文本编辑有两种形式：第一种：iframe 设置属性designMode="on" ,designMode 的默认值“off” ；第二种：使用contenteditable 属性，可以作用于页面中任何元素。contenteditable 有三个可能的值：true(打开编辑),false(关闭编辑),inherit (从父元素继承)。兼容性：IE，Firefox，Chrome，Safari,Opera,IOS
5+ (Safari),Android 3+(Webkit) 。

richText.html 源码:创建空白区域

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<iframe  name="richEidt" style="height:200px;width:200px;backgroud-color:gray" src="richText.html" designMode="on" ></iframe>
<button type="button"  onClick="setBold()";><strong>BOLD</strong></button>
<button type="button"  onClick="setSelectBold()";><strong>高亮</strong></button>
<script type="text/javascript">
// 页面加载完成绑定事件
window.addEventListener("load",function(){
frames["richEidt"].document.designMode="on";
frames["richEidt"].document.contentEditable= true;
});
// 设置字体加粗
function setBold(){
debugger;
frames["richEidt"].document.execCommand('bold',false,null);
}
// 设置选中区域加粗
function setSelectBold(){
var selection=frames["richEidt"].getSelection();
// 取得选中文本
var selectText=selection.toString();
//取得代表选区范围
var range=selection.getRangeAt(0);
//突出显示选择的文本
var span=frames["richEidt"].document.createElement("span");
span.style.backgroundColor="yellow";
range.surroundContents(span);

}
</script>
</body>
</html>

Firefox 43.0.4下效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航