diff --git a/build/MDEditor.min.js b/build/MDEditor.min.js index 2f83eb8..909f627 100644 --- a/build/MDEditor.min.js +++ b/build/MDEditor.min.js @@ -884,7 +884,7 @@ "class": "mde_textarea", placeholder: "请在这里输入内容" }); - self.preview = _createElement("div", { + self.preview_el = _createElement("div", { "class": "mde_preview markdown_body" }); self.tools = _createElement("div", { @@ -896,7 +896,7 @@ self.btn_preview.innerHTML = "预览"; self.tools.appendChild(self.btn_preview); css(self.textarea, "min-height", opts.minheight + "px"); - css(self.preview, "min-height", opts.minheight + "px"); + css(self.preview_el, "min-height", opts.minheight + "px"); } MDEditor.prototype = { load: function() { @@ -904,24 +904,13 @@ if (box) { if (box.innerHTML !== "") self.opts.value = box.innerHTML.replace(/\>\;/g, ">").replace(/\<\;/g, "<"), box.innerHTML = ""; - box.appendChild(self.preview), box.appendChild(self.tools), box.appendChild(self.textarea); + box.appendChild(self.preview_el), box.appendChild(self.tools), box.appendChild(self.textarea); } self.setMD(); addEvent(self.btn_preview, "click", function(event) { - index = parseInt(self.preview.style.zIndex); - if (index === 9) { - self.preview.style.zIndex = 0; - this.innerHTML = "预览"; - } else { - self.preview.style.zIndex = 9; - this.innerHTML = "编辑"; - } - self.setHTML(self.getMD()); - css(self.preview, { - height: self.textarea.offsetHeight + "px" - }); + self.preview(); }); - css(self.preview, { + css(self.preview_el, { height: self.textarea.offsetHeight + "px" }); addEvent(self.textarea, "input propertychange", function(event) { @@ -936,7 +925,7 @@ overflow: "auto" }); } - css(self.preview, { + css(self.preview_el, { height: self.textarea.offsetHeight + "px" }); self.opts.value = this.value; @@ -944,6 +933,21 @@ }); return this; }, + preview: function() { + var self = this, index = parseInt(self.preview_el.style.zIndex) || 0; + if (index === 9) { + self.preview_el.style.zIndex = 0; + self.btn_preview.innerHTML = "预览"; + } else { + self.preview_el.style.zIndex = 9; + self.btn_preview.innerHTML = "编辑"; + } + self.setHTML(self.getMD()); + css(self.preview_el, { + height: self.textarea.offsetHeight + "px" + }); + return this; + }, getMD: function() { return this.textarea.value; }, @@ -953,10 +957,10 @@ return this; }, getHTML: function() { - if (marked) return marked(this.getMD()); else return this.preview.innerHTML; + if (marked) return marked(this.getMD()); else return this.preview_el.innerHTML; }, setHTML: function(val) { - if (marked) this.preview.innerHTML = marked(val ? val : this.opts.value); + if (marked) this.preview_el.innerHTML = marked(val ? val : this.opts.value); return this; }, input: function(evn) { diff --git a/lib/MDEditor.js b/lib/MDEditor.js index 0e00868..12c9303 100644 --- a/lib/MDEditor.js +++ b/lib/MDEditor.js @@ -131,14 +131,14 @@ class:"mde_textarea", placeholder:"请在这里输入内容" }); - self.preview = _createElement('div',{class:"mde_preview markdown_body"}); + self.preview_el = _createElement('div',{class:"mde_preview markdown_body"}); self.tools = _createElement('div',{class:"mde_tools"}); self.btn_preview = _createElement('i',{class:"btn_preview"}); self.btn_preview.innerHTML = "预览"; self.tools.appendChild(self.btn_preview); css(self.textarea,'min-height',opts.minheight + "px"); - css(self.preview,'min-height',opts.minheight + "px"); + css(self.preview_el,'min-height',opts.minheight + "px"); } MDEditor.prototype = { @@ -152,26 +152,15 @@ .replace(/\>\;/g,'>') .replace(/\<\;/g,'<'), box.innerHTML=''; - box.appendChild(self.preview), + box.appendChild(self.preview_el), box.appendChild(self.tools), box.appendChild(self.textarea); } self.setMD(); - addEvent(self.btn_preview,'click', function(event) { - index = parseInt(self.preview.style.zIndex) - if(index === 9){ - self.preview.style.zIndex = 0 - this.innerHTML = "预览" - }else{ - self.preview.style.zIndex = 9 - this.innerHTML = "编辑" - } - self.setHTML(self.getMD()) - css(self.preview,{'height':self.textarea.offsetHeight + "px"}); - }); + addEvent(self.btn_preview,'click', function(event) {self.preview();}); - css(self.preview,{'height':self.textarea.offsetHeight + "px"}); + css(self.preview_el,{'height':self.textarea.offsetHeight + "px"}); //实时监听输入框值变化 HTML5事件 addEvent(self.textarea,'input propertychange', function(event) { @@ -186,12 +175,25 @@ 'overflow':"auto" }); } - css(self.preview,{'height':self.textarea.offsetHeight + "px"}); + css(self.preview_el,{'height':self.textarea.offsetHeight + "px"}); self.opts.value = this.value self.callback(event,self.opts) }); return this; }, + preview:function(){ + var self = this,index = parseInt(self.preview_el.style.zIndex) || 0; + if(index === 9){ + self.preview_el.style.zIndex = 0 + self.btn_preview.innerHTML = "预览" + }else{ + self.preview_el.style.zIndex = 9 + self.btn_preview.innerHTML = "编辑" + } + self.setHTML(self.getMD()) + css(self.preview_el,{'height':self.textarea.offsetHeight + "px"}); + return this; + }, /** * [getMD 获取markdown的字符串] * @return {[type]} [返回markdown字符串] @@ -213,13 +215,13 @@ */ getHTML:function(){ if(marked) return marked(this.getMD()); - else return this.preview.innerHTML + else return this.preview_el.innerHTML }, /** * [setHTML 设置预览的HTML] */ setHTML:function(val){ - if(marked) this.preview.innerHTML = marked(val?val:this.opts.value); + if(marked) this.preview_el.innerHTML = marked(val?val:this.opts.value); return this; }, /**