javascript开发随笔3，开发iframe富文本编辑器的一点体会

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 318 次

前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google。就把遇到的问题记录一下。写这篇文章时用的TinyMCE编辑器就很强大，但毕竟是第三方的，项目也考虑了这些

前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google。就把遇到的问题记录一下。写这篇文章时用的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像其他浏览器一样自动保持光标位置了

View Code

1 if(Util.browser.msie){
2             Util.bind(this.E.ifr_win.document, "beforedeactivate", function(){
3                 var Rng = _self.getRange().range;
4                 _self.rangeBookMark= Rng.getBookmark();
5             });
6             Util.bind(this.E.ifr_win.document, "activate", function(){
7                 var Rng = _self.getRange().range;
8                 Rng.moveToBookmark(_self.rangeBookMark);
9                 Rng.select();
10                 _self.rangeBookMark = null;
11             });
12         }

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模拟撤销与重做了。网络这方面的资源还是不少的，就不在此详细说明了

4. iframe自适应高度，依靠setInterval来获取iframe里body高度，赋值给iframe标签。不知道有没更好的办法呢？

5. 做下广告，开发的编辑器地址，算是宣传了现在公司和项目了不？需要注册才可以进去的哦

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。