首頁 > 開發者 > JavaScript

javascript開發隨筆3 開發iframe富文字編輯器的一點體會

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

就把遇到的問題記錄一下。寫這篇文章時用的TinyMCE編輯器就很強大，但畢竟是第三方的，項目也考慮了這些，如果做些自訂的東西不太方便。
1. 判斷游標位置的元素（或者選中的部分）的樣式。游標位置改變的時候更新工具列對應按鈕的樣式。什麼情況下游標的位置會改變呢？是鍵盤方向鍵和滑鼠點擊，於是就判斷鍵盤事件和滑鼠事件來執行游標移動的處理。
a. 獲得游標位置或選中元素：首先getSelection，建立range。然後獲得元素，擷取到元素之後就可以或得樣式、tagName等等，做更多的操作,運行代碼： 複製代碼 代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
p{width:600px;text-align: left;text-indent:2em;line-height:20px;font-size:12px}
textarea{width:600px;height:100px;font-size:12px;overflow:auto}
</style>
</head>
<body>
<span style="display:block;height:150px; font-size:12px;line-height:150%">資訊</span>
<script type="text/javascript">
function createEditor(){
var iframe = document.createElement('iframe');
iframe.id = 'iframe';
iframe.frameBorder = 1;
iframe.width = 400;
iframe.height = 200;
document.body.appendChild(iframe);
return iframe;
}
var bind = function(element,eventType,fn,useCapture){
useCapture = useCapture || false;
if(arguments.length < 3){
return true
};
if(window.addEventListener){
element.addEventListener(eventType, fn, useCapture);
}else{
element.attachEvent('on'+eventType,fn, useCapture);
}
}
//from 司徒正美
var css = document.defaultView ? function(el,style){
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
} : function(el,style){
style = style.replace(/\-(\w)/g, function($, $1){
return $1.toUpperCase();
});
return el.currentStyle[style];
}
function bindEditor(){
var iframe = createEditor();
var ifr_win = iframe.contentWindow;
var ifr_doc = ifr_win.document;

var editorContent = '<span style="font-family: 黑體; font-weight: bold;">阿四大四大四</span>大<span style="font-style: italic; text-decoration: underline;">四大四大打算</span>打打<span style="font-style: italic; color: #ff0000;">雙打薩斯</span>大師';
ifr_doc.designMode='On';//可編輯
ifr_doc.contentEditable = true;
ifr_doc.open();
ifr_doc.writeln('<html><head><style type="text/css">body{padding:10px;margin:0;font-size:13px;font-family:宋體;text-align:left;overflow:auto;word-wrap: break-word;cursor:text;background-color: transparent; }body,p,font,div,ul,li {line-height: 1.5;}p,font,div,ul,li {line-height: 1.5;margin:0;padding:0}a{color:#548DD4}</style></head><body>'+ editorContent +'</body></html>');
ifr_doc.close();

var getRange = function(){
var range = window.getSelection ? ifr_win.getSelection() : ifr_win.document.selection;
if (!range) {
return {
node : null,
range : null,
text : null
};
}
range = range.createRange ? range.createRange() : range.getRangeAt(0);
var text = window.getSelection ? range : range.text;
var rangeNode = null;
if (range.commonAncestorContainer) {
rangeNode = range.commonAncestorContainer;
} else {
if (range.parentElement) rangeNode = range.parentElement();
}
return {
node : rangeNode,
range : range,
text : text
}
}
var info = document.getElementsByTagName('span')[0];
var getStyle = function(node){
//console.log(node)
var html = '';
html+= '<span style="font-family:'+ css(node,'font-family') +'">字型:'+ css(node,'font-family') + '</span><br />';
html+= '<span style="color:'+ css(node,'color') +'">顏色：'+ css(node,'color') + '</span><br />';
html+= '<span style="font-style:'+ css(node,'font-style') +'">斜體：'+ css(node,'font-style') + '</span><br />';
html+= '<span style="font-weight:'+ css(node,'font-weight') +'">粗體：'+ css(node,'font-weight') + '</span><br />';
html+= '<span style="text-decoration:'+ css(node,'text-decoration') +'">底線：'+ css(node,'text-decoration') + '</span><br />';
html+= 'tagName:'+ node.tagName + ',style:'+ node.getAttribute('style') +'<br />';

info.innerHTML = html;
}
//當游標位置改變時候執行
var onselectionchange = function(event){
var e = event || window.event;
if(!e.keyCode)e.keyCode = e.which;
//方向鍵移動游標,擷取游標位置的dom
if((e.keyCode >= 37 && e.keyCode <= 40 )|| e.type == "click"){

var node = getRange().node;//擷取游標位置元素
if(node !== null){
while(node.nodeType != 1){
node = node.parentNode;
}
getStyle(node);
}
}
}

bind(ifr_doc,'click',onselectionchange,false);
bind(ifr_doc,'keydown',onselectionchange,false);
}
window.onload = function(){
bindEditor();
}
</script>
</body>
</html>

2. ie不能保持游標位置，這個是在添加超連結時候出現的問題，當不使用瀏覽器內建的輸入框，游標移動其他的文本域裡，ie會失去所選中的部分，無法對選中的部分加連結了，解決辦法就是：利用range的getBookmark和moveToBookmark，然後給iframe的document綁定onbeforedeactivate(getBookmark)、onactivate（moveTo），這2個事件的大致意思就是，當被啟用和失去啟用狀態。增加事件之後，就不必儲存lastRang或者再其他地方設定bookmark了，可以讓ie像其他瀏覽器一樣自動保持游標位置了 複製代碼 代碼如下:if(Util.browser.msie){
Util.bind(this.E.ifr_win.document, "beforedeactivate", function(){
var Rng = _self.getRange().range;
_self.rangeBookMark= Rng.getBookmark();
});
Util.bind(this.E.ifr_win.document, "activate", function(){
var Rng = _self.getRange().range;
Rng.moveToBookmark(_self.rangeBookMark);
Rng.select();
_self.rangeBookMark = null;
});
}

3. ie中的撤銷與重做 。 當iframe外部有快顯視窗、或者修改html撤銷、重做功能將失效。只能歸為ie的bug了。。。。也許ie沒分清iframe和頁面的document，把他們的撤銷、重做混道義了。
如下： 複製代碼 代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
p{width:600px;text-align: left;text-indent:2em;line-height:20px;font-size:12px}
textarea{width:600px;height:100px;font-size:12px;overflow:auto}
</style>
</head>
<body>
<span style="display:block;height:150px; font-size:12px;line-height:150%">資訊</span>
<div id="J_tool">
<input type="button" command="Undo" value="撤銷" unselectable="on" />
<input type="button" command="Redo" value="重做" unselectable="on" />
<input type="button" command="Bold" value="粗體" unselectable="on" />
<input type="button" command="Italic" value="斜體" unselectable="on" />
</div>
<br />
<input type="button" onclick="changeLayout()" value="點擊下，ie將無法撤銷、重做" />
<br />
<script type="text/javascript">
function changeLayout(){
var popwin = document.getElementById('popwin');
if(!popwin){
popwin = document.createElement('div');
popwin.id = 'popwin';
popwin.style.cssText = 'display:none;width:300px;height:150px;background-color:#ccc;position:absolute;left:0;top:0px;text-align:center;line-height:150px;';
popwin.innerHTML = '改變了layoud渲染，ie將無法撤銷、重做';
document.body.appendChild(popwin);
popwin.onclick= function(){this.style.display = 'none'};
}
popwin.style.display = popwin.style.display == 'none' ? 'block' : 'none';
}
function createEditor(){
var iframe = document.createElement('iframe');
iframe.id = 'iframe';
iframe.frameBorder = 1;
iframe.width = 400;
iframe.height = 200;
document.body.appendChild(iframe);
return iframe;
}
var bind = function(element,eventType,fn,useCapture){
useCapture = useCapture || false;
if(arguments.length < 3){
return true
};
if(window.addEventListener){
element.addEventListener(eventType, fn, useCapture);
}else{
element.attachEvent('on'+eventType,fn, useCapture);
}
}
//from 司徒正美
var css = document.defaultView ? function(el,style){
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
} : function(el,style){
style = style.replace(/\-(\w)/g, function($, $1){
return $1.toUpperCase();
});
return el.currentStyle[style];
}
function bindEditor(){
var iframe = createEditor();
var ifr_win = iframe.contentWindow;
var ifr_doc = ifr_win.document;
var editorContent = '<span style="font-family: 黑體; font-weight: bold;">阿四大四大四</span>大<span style="font-style: italic; text-decoration: underline;">四大四大打算</span>打打<span style="font-style: italic; color: #ff0000;">雙打薩斯</span>大師';
ifr_doc.designMode='On';//可編輯
ifr_doc.contentEditable = true;
ifr_doc.open();
ifr_doc.writeln('<html><head><style type="text/css">body{padding:10px;margin:0;font-size:13px;font-family:宋體;text-align:left;overflow:auto;word-wrap: break-word;cursor:text;background-color: transparent; }body,p,font,div,ul,li {line-height: 1.5;}p,font,div,ul,li {line-height: 1.5;margin:0;padding:0}a{color:#548DD4}</style></head><body>'+ editorContent +'</body></html>');
ifr_doc.close();
var getRange = function(){
var range = window.getSelection ? ifr_win.getSelection() : ifr_win.document.selection;
if (!range) {
return {
node : null,
range : null,
text : null
};
}
range = range.createRange ? range.createRange() : range.getRangeAt(0);
var text = window.getSelection ? range : range.text;
var rangeNode = null;
if (range.commonAncestorContainer) {
rangeNode = range.commonAncestorContainer;
} else {
if (range.parentElement) rangeNode = range.parentElement();
}
return {
node : rangeNode,
range : range,
text : text
}
}
var info = document.getElementsByTagName('span')[0];
var getStyle = function(node){
//console.log(node)
var html = '';
html+= '<span style="font-family:'+ css(node,'font-family') +'">字型:'+ css(node,'font-family') + '</span><br />';
html+= '<span style="color:'+ css(node,'color') +'">顏色：'+ css(node,'color') + '</span><br />';
html+= '<span style="font-style:'+ css(node,'font-style') +'">斜體：'+ css(node,'font-style') + '</span><br />';
html+= '<span style="font-weight:'+ css(node,'font-weight') +'">粗體：'+ css(node,'font-weight') + '</span><br />';
html+= '<span style="text-decoration:'+ css(node,'text-decoration') +'">底線：'+ css(node,'text-decoration') + '</span><br />';
html+= 'tagName:'+ node.tagName + ',style:'+ node.getAttribute('style') +'<br />';
info.innerHTML = html;
}
//當游標位置改變時候執行
var onselectionchange = function(event){
var e = event || window.event;
if(!e.keyCode)e.keyCode = e.which;
//方向鍵移動游標,擷取游標位置的dom
if((e.keyCode >= 37 && e.keyCode <= 40 )|| e.type == "click"){
var node = getRange().node;//擷取游標位置元素
if(node !== null){
while(node.nodeType != 1){
node = node.parentNode;
}
getStyle(node);
}
}
}
bind(ifr_doc,'click',onselectionchange,false);
bind(ifr_doc,'keydown',onselectionchange,false);
bind(document.getElementById('J_tool'),'click',function(event){
event = event || window.event;
var target = event.srcElement || event.target;
var command = target.getAttribute('command');
var param = target.getAttribute('param') || '';
ifr_doc.execCommand(command,false,param);
return false;
})
}
window.onload = function(){
bindEditor();
}
</script>
</body>
</html>

如何解決呢？ 只能依靠javascript類比撤銷與重做了。網路這方面的資源還是不少的，就不在此詳細說明了

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript random number between 0 and 3 javascript round to 3 decimal places chrome 6 3 2 with javascript enabled download javascript iframe w3school iframe host squarespace iframe
相關文章
javascript的indexOf忽略大小寫方法_javascript技巧
用js一招破解所有網頁的加密原始碼的方法
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More