網頁編輯器是個不錯的東西，在很多時候都需要使用到，用來編輯各種文字。然而使用網頁編輯器卻會存在一些各種各樣的問題，解決這些問題總會讓人頭疼。

最近使用編輯器編寫正文，在需要再在前臺展示的時候發現樣式衝突的厲害。然而又沒有辦法清除原有的樣式，只能將整個需要顯示的內容和當前的頁面隔離開才能使用完整的編輯器樣式。下面說下兩種展示的方法，可以完整的顯示編輯器樣式。

1.使用原有編輯器進行再展示

編輯器編輯的東西，在編輯器內再顯示一定是所見即所得。因此，使用編輯器再顯示原本的內容只需要再次呼叫編輯器，把內容寫入，清掉不需要的外掛，最後把編輯器設定為不可編輯即可。下面以ueditor為例：

<!--頁面調取editor-->
<script id="editor" name="content" type="text/plain" style="width:99.9%;min-height:350px;height:100%;"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor',{
	    toolbars: [],
	    autoHeightEnabled: true,
	    autoFloatEnabled: true,
	    enableAutoSave: false,
	    readonly:true,
	    wordCount:false
	});
	
	ue.addListener("ready", function () {
		var content = '${mail.content}';
		ue.setContent(content);
		}
	);
</script>
 

這麼做保證了原滋原味，羊毛出在羊身上，編輯的內容是什麼樣子，展示的也會一模一樣。

2.使用iframe進行頁面嵌入

iframe載入的頁面和當前頁無關，樣式自然頁不會有衝突，可以很好的展示編輯器編輯完成的html程式碼樣式，當然，還是會有些微的不同，但大致基本是一致的。

使用iframe的好處就是不需要再在頁面構造一個編輯器，畢竟編輯器的樣式，頁面內控制元件調整較為複雜。下面為iframe展示的想法：

<!--建立一個空的iframe,不需要指定地址-->
<iframe name="cmsCon" id="cmsCon" class="cmsCon" frameborder="0" width="100%" scrolling="no" height="auto"></iframe>
<script type="text/javascript">
$('#cmsCon').contents().find('body').html('展示內容');
autoHeight();  //動態調整高度

var count = 0;
	    var autoSet = window.setInterval('autoHeight()',500);
		function autoHeight(){
			var mainheight;
			count++;
			if(count == 1){
				mainheight = $('.cmsCon').contents().find("body").height()+50;
			}else{
				mainheight = $('.cmsCon').contents().find("body").height()+24;
			}
			$('.cmsCon').height(mainheight);
			if(count == 5){
				window.clearInterval(autoSet);
			}
			
		}
</script>
 

在上面提供的動態調整高度的方法存在一個缺陷，就是如果展示的內容中包含圖片，那麼會因為圖片的載入延時導致一開始獲取的高度不足，從而導致圖片無法完整的載入。這個問題我想了很久也沒有找到合適的方法來解決。因為內容是動態寫入，iframe不是展示一個全新的頁面，只是我們對這個iframe進行了內容設定，所以做起修改非常的麻煩。因此我做了一個方法的迴圈呼叫，多次設定高度，這樣就能在頁面圖片載入完成後進行正確的高度獲取。（動態寫入內容，導致了load事件不會觸發...）
網上也有不少動態調整高度的方法，也值得借鑑。