javascript 点点滴滴 富文本编辑器的学习

hello world:

  花了8天时间终于把大神的富文本编辑器学习完毕,例子也写了5遍。懂了大楷85%的样子 。其余15%主要是 对dom事件底层api的不熟悉 和 对不同浏览器下 dom事件的兼容问题。

  

  1. 为什么富文本编辑器要用iframe来做
  2.  跨浏览器兼容
  3. 2. iframe内容编辑 不会影响到 当前文档的内容
  4. 3. iframe是一个编辑即所得的容器
  5.   写这边博客 主要是记录一下学习中的要点 难点 和 巩固一下。
  6.   首先整个 设计是 最开始是面向过程 然后采用面向对象的写法封装了起来。
  7.    代码一开始 用js 写了一个动态设置css样式的 方法 下面是代码 
/*动态添加样式表规则*/
var _add_sheet = function(){
var doc,cssCode;
if (arguments.length == 1) {
doc = document;
cssCode = arguments[0];
} else if (arguments.length == 2) {
doc = arguments[0];
cssCode = arguments[1];
} else {
alert("addSheet函数最多接受两个参数!");
}
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if (styleElements.length == 0) { // 如果没有 就添加
if (!+"\v1") { // IE
doc.createStyleSheet();
} else {
var tempStyleElement = doc.createElement("style"); // w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
};
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if (media != null && !/screen/.test(media.toLowerCase())) {
styleElement.setAttribute("media", "screen");
};
if (!+"\v1") { // IE
styleElement.styleSheet.cssText += cssCode;
} else if (/a/[-1] == 'a') { // FF
styleElement.innerHTML += cssCode;
} else {
styleElement.appendChild(doc.createTextNode(cssCode));
}
}
 
这个方法的知识点  :
  一 :  getelmentsByTagName 方法是动态的。
  二 :  !+"\v1"可以判断是否是IE浏览器 
  三 :  在ie 下 创建style元素 直接    doc.createStyleSheet();搞定
  四 :  在ie下 和 FF下 还有w3c下为style元素 添加css样式 方法不一样
  
if (!+"\v1") { // IE
  styleElement.styleSheet.cssText += cssCode;
} else if (/a/[-1] == 'a') { // FF
  styleElement.innerHTML += cssCode;
} else {
  styleElement.appendChild(doc.createTextNode(cssCode));
}
 
  绑定事件的方法
  
addEvent : function(el, type, fn){
  if (!+"\v1") {
    el['e'+type+fn] = fn;
    el.attachEvent( 'on' + type, function(){
      el['e'+type+fn]();
    })
  } else {
    el.addEventListener(type, fn, false);
  }
},
 
  这里还学习到一个 创建闭包的方法:
  

for(var i = 0,l= buttons.length;i<l;i++){
  buttons[i].onclick = new function(){***********************创建闭包**************************代替了(function( i ) { })(i)这种匿名函数立即执行的写法
    var button=buttons[i];
    return function(){
      document.getElementById("exe").innerHTML ="调用了"+button.getAttribute("title")+"命令";
    }
  };
};

最为主要还是关于 iframe的用法和兼容 。由于时间关系 明天再写吧!!!
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2017-09-12 23:54  蜀-书心  阅读(195)  评论(0编辑  收藏  举报