html 富文本编辑（WYSIWYG）

最新推荐文章于 2024-03-06 10:39:54 发布

春馨梦

最新推荐文章于 2024-03-06 10:39:54 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： html html富文本编辑

本文链接：https://blog.csdn.net/tannongchun/article/details/50529860

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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下效果：

春馨梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 富文本编辑（WYSIWYG）

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

扫一扫