`

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

IEFirefox浏览器prototypeOffice 
阅读更多

忙了几天终于搞出来了这么一个功能，因为是针对特定情况(比如不考虑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>

 

0
顶
0
踩
分享到：
| javascript节点操作DOM属性和方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    fckeditor 在线编辑器

    总而言之，fckeditor是一款强大的在线编辑器，它的强大功能和高度定制性使其成为许多Web应用的理想选择。通过对原始版本的修改，如"MyFckeditor"，你可以进一步满足特定项目的需求，提升用户体验。如果你正面临在线...

    百度编辑器ueditor

    ueditor支持多种浏览器环境，如Chrome、Firefox、Safari、IE6+等，能够满足用户在网页端进行文字编辑、图片上传、多媒体插入等多种操作的需求。 **1. 基本功能** ueditor的基础功能包括文本格式化、字体调整、字号...

    eWebEditor 7.0 商业版 在线HTML编辑器下载

    8. **安全性与兼容性**：这款编辑器被设计为跨平台，能在多种浏览器环境下正常运行，包括Chrome、Firefox、Safari和IE等。同时，它遵循W3C标准，确保了生成的HTML代码的规范性和与其他系统的良好兼容性。 在下载的...

    在线HTML编辑器

    8. **兼容性**：通常与各种浏览器（如Chrome、Firefox、Safari、IE等）兼容，确保不同平台的用户体验一致。 9. **API集成**：提供了JavaScript API，方便开发者将其集成到自己的应用中，控制编辑器的行为。 对于JSP...

    新浪博客HtmlEditor在线编辑器（OFFICE2007风格）编辑器.rar

    11. **兼容性**：考虑到不同的浏览器和设备，HtmlEditor通常会优化对IE、Firefox、Chrome、Safari、Opera等主流浏览器的支持。 12. **用户体验**：OFFICE2007风格的界面设计，使得用户上手快速，操作直观。 在使用...

    ueditor富文本编辑器

    ueditor经过优化，对主流浏览器（如Chrome、Firefox、Safari、IE等）有良好的兼容性，保证了在不同设备和平台上的稳定运行。 10. **移动适配** 针对移动设备，ueditor有相应的移动端适配方案，可以在手机或平板上...

    百度富文本编辑器-调试后无bug版本

    富文本编辑器是一种在线文本编辑工具，它允许用户在网页上进行类似Word的文本编辑操作，包括插入图片、格式化文字、添加链接等。百度富文本编辑器是百度公司开发的一款开源编辑器，广泛应用于博客、论坛、内容管理...

    新浪博客文本区编辑器

    10. **兼容性**：该编辑器通常会兼容主流的Web浏览器，如Chrome、Firefox、Safari和IE，确保不同平台和设备上的用户体验。 然而，描述中提到这个编辑器是“抠出来”的，意味着它可能不包含完整的后台处理功能。因此...

    ckeditor_3.3.zip

    10. **跨浏览器兼容**：CKEditor 3.3在主流浏览器（如IE、Firefox、Chrome、Safari和Opera）上表现良好，确保了广泛的用户覆盖。 在PHP和ASP环境中集成CKEditor，开发者需要将下载的zip文件解压，然后将CKEditor的...

    FCKeditor_2.6.4.1 demo

    6. **兼容性**：FCKeditor支持多种主流浏览器，包括IE6+、Firefox、Chrome、Safari和Opera，确保了广泛的应用场景。 7. **安全考虑**：FCKeditor提供了一些安全特性，如XSS过滤，以防止恶意代码通过编辑器注入到...

    硕正轻量级富Web应用套件–硕正报表主要指标及功能清单.pdf

    - 兼容主流浏览器，如Chrome、IE（包括64位）、Firefox，同时支持360极速浏览器、360安全浏览器、猎豹、百度、搜狗等国产浏览器。 3. **移动设备支持**： - 报表查询功能不限制于特定设备，支持所有带浏览器的...

    ckeditor_4.2_standard

    9. **浏览器兼容性**：在主流浏览器（如Chrome、Firefox、Safari、IE9+）中表现良好，确保广泛的用户覆盖。 关于"fck"标签，这可能是指早期的FCKeditor，它是CKEditor的前身。FCKeditor在2003年首次发布，后来发展...

Magicbox
Global site tag (gtag.js) - Google Analytics