在线编辑器添加设置行距功能(兼容ie和firefox)

最新推荐文章于 2019-04-04 16:33:00 发布

SailingLee

最新推荐文章于 2019-04-04 16:33:00 发布

阅读量185

点赞数

分类专栏： HTML & JS & DOM & CSS 文章标签： IE Firefox 浏览器 prototype Office

HTML & JS & DOM & CSS 专栏收录该内容

87 篇文章

订阅专栏

本文介绍了一种用于调整文本行高的功能，该功能可在不同浏览器（如IE和Firefox）中实现一致的效果。通过分析选定文本所在的段落或表格元素，并递归地应用样式更改，实现了对嵌套表格的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

忙了几天终于搞出来了这么一个功能，因为是针对特定情况(比如不考虑div)作做的开发，真正使用的话一些地方仍需要改进。做的时候是参考office word的功能来做的，为了用户能够更容易使用。贴上代码（初稿，有点乱，此版本是做了修改之后的版本，兼容ie和firefox）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>create text range</title>
   <script>
	
	var LineHeight = function(){
		this.selectedE = document.selection?document.selection:(window.getSelection?window.getSelection():null);
		this.isIE = this.isIE();
	}
	
	
	LineHeight.prototype.isIE = function(){
		if (window.navigator.userAgent.indexOf("MSIE")>=1){//如果浏览器为IE
			return true;
		}else{ //如果浏览器为Firefox
			if (window.navigator.userAgent.indexOf("Firefox")>=1){
				return false;
			}
		}
	}


	LineHeight.prototype.dowithParagragh = function(element){
		if(element == null || element == 'undefined') return;

		if(element.nodeName.toLowerCase() == 'p'){
			element.style.lineHeight = "200%";

		}
	}
	
	LineHeight.prototype.dowithTable = function(element){
		if(element == null || element == 'undefined') return;
		if(element.nodeName.toLowerCase() == 'table'){
			var oTds = element.getElementsByTagName('td');
			for(var j=0;j<oTds.length;j++){
				oTds[j].style.lineHeight = "200%";
			}
		}
	}

	LineHeight.prototype.dowithTableInTable = function(element){
		if(element == null || element == 'undefined') return;
		if(element.nodeName.toLowerCase() == 'table'){
			var oTds = element.getElementsByTagName('td');
			for(var j=0;j<oTds.length;j++){
				var oTd = oTds[j];
				oTd.style.lineHeight = "200%";
				if(oTd.hasChildNodes()){
					for(var k=0;k<oTd.childNodes.length;k++){
						var oChild = oTd.childNodes[k];
						if(oChild.nodeType == 1 && oChild.nodeName.toLowerCase() == 'table'){
							this.dowithTableInTable(oChild);
						}
					}
				}
			}
		}
	}

	LineHeight.prototype.dowithParagraghOrTable = function(element){
		if(element == null || element == 'undefined') return;
		if(element.nodeName.toLowerCase() == 'p'){
			element.style.lineHeight = "200%";
			var oTables = element.getElementsByTagName('table');
			if(oTables == null || oTables.length == 0) return;

			for(var i=0;i<oTables.length;i++){
				this.dowithTableInTable(oTables[i]);
			}
			
		}else if(element.nodeName.toLowerCase() == 'table'){
			this.dowithTableInTable(element);
		}
	}



	/*HTMLElement.prototype.contains=function(o){
		while(o!=null){
			if(o==this)return true;
			o=o.parentNode;
		}
		return false;
	}*/


	LineHeight.prototype.contains = function(a, b){//扩展的contains
		return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
	}

	LineHeight.prototype.test = function(){
		var range;
		var startPE;
		var endPE;
		var oDiv;
		var rng;

		if(this.isIE){
			range = this.selectedE.createRange();
			rng = range.duplicate();
			oDiv = document.createElement('div');
			oDiv.innerHTML = range.htmlText;

			range.collapse();
			startPE = range.parentElement();
		
			rng.collapse(false);
			endPE = rng.parentElement();
		}else{
			range = this.selectedE.getRangeAt(0);

			startPE = range.startContainer.parentNode;
			endPE = range.endContainer.parentNode;
		}
		
		
		
		if(startPE.nodeName.toLowerCase() == 'td' && endPE.nodeName.toLowerCase() == 'td'){
				while(startPE.nodeName.toLowerCase() != 'table'){
						startPE = startPE.parentNode;
				}

				while(endPE.nodeName.toLowerCase() != 'table'){
						endPE = endPE.parentNode;
				}

				if(startPE == endPE || this.contains(startPE,endPE)){
						this.dowithTableInTable(startPE);
						return;
				}else if(this.contains(endPE,startPE)){
						this.dowithTableInTable(endPE);
						return;
				}else{
						startPE = this.isIE?range.parentElement():range.startContainer.parentNode;
						endPE = this.isIE?rng.parentElement():range.endContainer.parentNode;
				}
		}else if(startPE.nodeName.toLowerCase() == 'td' ^ endPE.nodeName.toLowerCase() == 'td'){
			
				while(startPE.nodeName.toLowerCase() != 'p'){
						if(startPE.nodeName.toLowerCase() == 'body') break;
						startPE = startPE.parentNode;
				}

				while(endPE.nodeName.toLowerCase() != 'p'){
						if(endPE.nodeName.toLowerCase() == 'body') break;
						endPE = endPE.parentNode;
				}
				//document.getElementsById('d');//debug
				if(startPE == endPE){
						this.dowithParagraghOrTable(startPE);
						return;
				}else{
						startPE = this.isIE?range.parentElement():range.startContainer.parentNode;
						endPE = this.isIE?rng.parentElement():range.endContainer.parentNode;
				}
		}

		//document.getElementsById('d');//debug

		while(startPE.nodeName.toLowerCase() != 'p'){
				if(startPE.nodeName.toLowerCase() == 'body') break;
				this.dowithTable(startPE);
				startPE = startPE.parentNode;
		}
		
		

		

		//document.getElementsById('d');//debug

		while(endPE.nodeName.toLowerCase() != 'p'){
			if(endPE.nodeName.toLowerCase() == 'body') break;
			this.dowithTable(endPE);
			endPE = endPE.parentNode;
		}
		
		if(startPE == endPE){
				this.dowithParagraghOrTable(startPE);
				return;
		}

		this.dowithParagraghOrTable(startPE);
		this.dowithParagraghOrTable(endPE);

		if(this.isIE){
			if(oDiv.hasChildNodes() && oDiv.childNodes.length >= 3){
				var nextE = startPE.nextSibling;
				this.dowithParagraghOrTable(nextE);
				for(var i=2;i<oDiv.childNodes.length-1;i++){
					nextE = nextE.nextSibling;
					this.dowithParagraghOrTable(nextE);
				}
			}
		}else{
			var docFragment = range.cloneContents();
			var count = 0;
			if(docFragment.hasChildNodes()){
				for(var i=0;i<docFragment.childNodes.length;i++){
						var oChild = docFragment.childNodes[i];
						if(oChild.nodeType == 3 && oChild.nodeValue == '\n') 
							continue;
						else
							count++;
				}
			}

			var nextE = startPE.nextSibling;
			this.dowithParagraghOrTable(nextE);
			for(var i=0;i<count-2;i++){
				nextE = nextE.nextSibling;
				this.dowithParagraghOrTable(nextE);
			}
		
		}
		
	}


	function test1(){
		var o = new LineHeight();
		o.test();
	}
 </script>
 </head>

 <body onmouseup='test1();'>
  <p>
  this is a function <span style="background-color:red">text of object of textrange</span>.you will find out how to use it.<br/>
  this is the <strong>second line for test the</strong> object of textrange.<br/>
  this is the third line for <strike>test the object</strike> of textrange.
  </p>
  <p>
  this is the <strong>second paragragh for</strong> test,<br/>
  this is the second line in paragragh two for test.
  </p>
  <p>
  this <strong>is the third paragragh for test,</strong><br/>
  this is the second line in paragragh three for test.
  </p>  
  <p>
  this is a function <span style="background-color:red">text of object of textrange</span>.you will find out how to use it.<br/>
  this is the <strong>second line for test the</strong> object of textrange.<br/>
  <table border=1>
  <tr>
	<td>sdfasdfasdf</td>
	<td>sadfdsafsaf</td>
	<td>sdfasdf</td>
	<td>asdfasdfasf</td>
  </tr>
  <tr>
	<td>sadfsaf</td>
	<td>asdfasf</td>
	<td>asdfsadfsda</td>
	<td>asdfsadfsaf</td>
  </tr>
  </table>
  this is the third line for <strike>test the object</strike> of textrange.
  </p>
  <p>
  this is the <strong>second paragragh for</strong> test,<br/>
  this is the second line in paragragh two for test.
  </p>
    <table border=1>
  <tr>
	<td>sdfasdfasdf</td>
	<td>sadfdsafsaf</td>
	<td>sdfasdf</td>
	<td>asdfasdfasf</td>
  </tr>
  <tr>
	<td>sadfsaf</td>
	<td>asdfasf</td>
	<td>asdfsadfsda</td>
	<td>asdfsadfsaf</td>
  </tr>
  </table>
  <p>
  this <strong>is the third paragragh for test,</strong><br/>
  this is the second line in paragragh three for test.
  </p>
   <p>
  this is a function <span style="background-color:red">text of object of textrange</span>.you will find out how to use it.<br/>
  this is the <strong>second line for test the</strong> object of textrange.<br/>
  <table border=1>
  <tr>
	<td>sdfasdfasdf</td>
	<td>sadfdsafsaf</td>
	<td>sdfasdf</td>
	<td>asdfasdfasf</td>
  </tr>
  <tr>
	<td>
	<table border=1>
		<tr>
			<td>gggggggggggggggggggggggggggg<br/>gggggggggggggggggggggggggggg</td>
			<td>hhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
		</tr>
		<tr>
			<td>bbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>bbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
			<td>mmmmmmmmmmmmmmmmmmmmmmmmmmmmm<br/>mmmmmmmmmmmmmmmmmmmmmmmmmm</td>
		</tr>
	</table>
	</td>
	<td>asdfasf</td>
	<td>asdfsadfsda</td>
	<td>asdfsadfsaf</td>
  </tr>
  </table>
  this is the third line for <strike>test the object</strike> of textrange.
  </p>
   <p>
  this <strong>is the third paragragh for test,</strong><br/>
  this is the second line in paragragh three for test.
  </p>
 </body>

</html>