Skip to content

Commit

Permalink
添加preview方法
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Aug 17, 2015
1 parent c35a9e6 commit 3d5eb5f
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 38 deletions.
42 changes: 23 additions & 19 deletions build/MDEditor.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand All @@ -896,32 +896,21 @@
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() {
var self = this, box = self.obj[0], index = 0;
if (box) {
if (box.innerHTML !== "") self.opts.value = box.innerHTML.replace(/\&gt\;/g, ">").replace(/\&lt\;/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) {
Expand All @@ -936,14 +925,29 @@
overflow: "auto"
});
}
css(self.preview, {
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: function() {
return this.textarea.value;
},
Expand All @@ -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) {
Expand Down
40 changes: 21 additions & 19 deletions lib/MDEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -152,26 +152,15 @@
.replace(/\&gt\;/g,'>')
.replace(/\&lt\;/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) {
Expand All @@ -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字符串]
Expand All @@ -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;
},
/**
Expand Down

0 comments on commit 3d5eb5f

Please sign in to comment.