PDA

View Full Version : htmleditor bbcode support



vahid4134
25 Dec 2009, 10:22 AM
Just in htmleditr
set getBBCode true to get value in bbocde
set setBBCode true to convert input value from bbcode to html


Ext.override(Ext.form.HtmlEditor,{
getBBCode:false,
setBBCode:false,
HelpBBCode:false,
h2bItems:{
//tags
br : function (node){
return {start:"\n",end:""}
},
div : function (node){
return {start:"\n",end:""}
},
a : function (node){
return {start:"",end:" (+node.href+)"}
},
img : function (node){
return {start:""+node.src,end:""}
},
b : function (node){
return {start:"",end:""}
},
strong : function (node){
return {start:"",end:""}
},
i : function (node){
return {start:"",end:""}
},
em : function (node){
return {start:"",end:""}
},
u : function (node){
return {start:"",end:""}
},
s : function (node){
return {start:"",end:""}
},
p : function (node){
return {start:"\n\n",end:""}
},
ul : function (node){
return {start:"",end:""}
},
li : function (node){
return {start:"",end:""}
},
blockquote : function (node){
return {start:"
",end:""}
},
pre : function (node){
return {start:"
",end:""}
},
},
getValue : function() {
this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
var value=Ext.form.HtmlEditor.superclass.getValue.call(this);
value=this.convertBBCode(value);
return value;
},
setValue : function(v){
if(this.setBBCode)
v=this.convertHTML(v);
Ext.form.HtmlEditor.superclass.setValue.call(this, v);
this.pushValue();
return this;
},
createHelpBBCode : function(){
this.HelpBBCode=Ext.getBody().createChild({tag:"span",style:"display:none"});
},
convertHTML : function (value){
value=value.replace(/\n/gi,"<br />");
value=value.replace(/\/gi,"<b>");
value=value.replace(/\[\/b\]/gi,"</b>");
value=value.replace(/\[i\]/gi,"<i>");
value=value.replace(/\[\/i\]/gi,"</i>");
value=value.replace(/\[u\]/gi,"<u>");
value=value.replace(/\[\/u\]/gi,"</u>");
value=value.replace(/\[url=([^\]]+)\](.*?)\[\/url\]/gi,"<a href=\"$1\">$2</a>");
value=value.replace(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>");
value=value.replace(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />");
value=value.replace(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>");
value=value.replace(/\[code\](.*?)\[\/code\]/gi,"<pre>$1</pre>");
value=value.replace(/\[quote\](.*?)\[\/quote\]/gi,"<blockquote>$1</blockquote>&nbsp;");
},
convertBBCode : function(value){
if(!this.HelpBBCode){
this.createHelpBBCode()
}
this.HelpBBCode.update(value);
var dom=this.HelpBBCode.dom;
while(node=Ext.DomQuery.selectNode("*:first",dom)){
var s={start:"",end:""}
if(this.h2bItems[node.nodeName.toLowerCase()]){
s=this.h2bItems[node.nodeName.toLowerCase()](node);
}
else{
s={start:"",end:""};
}
text=s.start+style.start+node.innerHTML+style.end+s.end;
dom.innerHTML=dom.innerHTML.replace(this.getOuterHTML(node),text);
}

var t=dom.innerHTML;
t=t.replace(/&nbsp;/gi," ");
t=t.replace(/&quot;/gi,"\"");
t=t.replace(/&lt;/gi,"<");
t=t.replace(/&gt;/gi,">");
t=t.replace(/&amp;/gi,"&");
return t;
},

getOuterHTML: function (object) {
var element;
if (!object) return null;
element = document.createElement("div");
element.appendChild(object.cloneNode(true));
return element.innerHTML;
},
geBBCodeStyle:function (dom){
el=Ext.get(dom);
style=el.getAttribute("style");
fontFamily=((/font-family/gi.test(style))?el.getStyle("font-family"):false) || el.getAttribute("face");
fontSize=((/font-size/gi.test(style))? el.getStyle("font-size"):false) || (dom.nodeName.toLowerCase()=="font")?el.getAttribute("size"):"";
isBold=(el.getStyle("font-weight")=="bold" && /font-weight/gi.test(style))?true:false
isItalic=(el.getStyle("font-style")=="italic" && /font-style/gi.test(style))?true:false;
isUnderline=(el.getStyle("text-decoration")=="underline" && /text-decoration/gi.test(style))?true:false;
isLinethrough=(el.getStyle("text-decoration")=="line-through" && /text-decoration/gi.test(style))?true:false;
align=el.getAttribute("align");
color=el.getStyles("color")|| (dom.nodeName=="font")?el.getAttribute("color"):"";
s=[];
e=[];
if(fontFamily){
s.push("");
e.push("")
}
if(fontSize){
s.push("");
e.push("")
}
if(isBold){
s.push("[b]");
e.push("")
}
if(isItalic){
s.push("");
e.push("")
}
if(isUnderline){
s.push("");
e.push("")
}
if(isLinethrough){
s.push("[s");
e.push("[/s]");
}
if(align){
s.push("");
e.push("")
}
if(color){
s.push("");
e.push("");
}

return {start:s.join(""),end:e.reverse().join("")}
}
});

vahid4134
26 Dec 2009, 2:01 AM
beacuse conflict my code and forum bbcode attachment js file :D

pumuckleee
11 May 2010, 6:14 PM
Hello i want to use this modification but when i insert the code i've got error:
dom is undefined


in this line:
dom.innerHTML=dom.innerHTML.replace(this.getOuterHTML(node),text);

pls help me to make this work

vahid4134
23 May 2010, 10:22 AM
this line
createHelpBBCode : function(){
this.HelpBBCode=Ext.getBody().createChild({tag:"span",style:"display:none"});
},

must create this dom