WYSIWYG Editor Style Problem (nicedit)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • WYSIWYG Editor Style Problem (nicedit)

    Halli Hallo,

    derzeit habe ich auf meiner Homepage eine WYSIWYG von Nicedit, dieser ist auch praktisch. Allerdings da meine JS Künste etwas dürftig noch sind, habe ich ein Problem mit dem Style, ich würde gerne den Background des Textarea auf Grau oder irgend eine andere Farbe änden. Im Browser klappt es wunderbar allerdings finde ich im Javscript die Funktion nicht dazu.

    [Blockierte Grafik: http://i.epvpimg.com/6Apug.png]




    Der JS part:


    JavaScript-Quellcode

    1. var nicEditors={nicPlugins:[],editors:[],registerPlugin:function(B,A){this.nicPlugins.push({p:B,o:A})},allTextAreas:function(C){var A=document.getElementsByTagName("textarea");for(var B=0;B<A.length;B++){nicEditors.editors.push(new nicEditor(C).panelInstance(A[B]))}return nicEditors.editors},findEditor:function(C){var B=nicEditors.editors;for(var A=0;A<B.length;A++){if(B[A].instanceById(C)){return B[A].instanceById(C)}}}};var nicEditor=bkClass.extend({construct:function(C){this.options=new nicEditorConfig();bkExtend(this.options,C);this.nicInstances=new Array();this.loadedPlugins=new Array();var A=nicEditors.nicPlugins;for(var B=0;B<A.length;B++){this.loadedPlugins.push(new A[B].p(this,A[B].o))}nicEditors.editors.push(this);bkLib.addEvent(document.body,"mousedown",this.selectCheck.closureListener(this))},panelInstance:function(B,C){B=this.checkReplace($BK(B));var A=new bkElement("DIV").setStyle({width:(parseInt(B.getStyle("width"))||B.clientWidth)+"px"}).appendBefore(B);this.setPanel(A);return this.addInstance(B,C)},checkReplace:function(B){var A=nicEditors.findEditor(B);if(A){A.removeInstance(B);A.removePanel()}return B},addInstance:function(B,C){B=this.checkReplace($BK(B));if(B.contentEditable||!!window.opera){var A=new nicEditorInstance(B,C,this)}else{var A=new nicEditorIFrameInstance(B,C,this)}this.nicInstances.push(A);return this},removeInstance:function(C){C=$BK(C);var B=this.nicInstances;for(var A=0;A<B.length;A++){if(B[A].e==C){B[A].remove();this.nicInstances.splice(A,1)}}},removePanel:function(A){if(this.nicPanel){this.nicPanel.remove();this.nicPanel=null}},instanceById:function(C){C=$BK(C);var B=this.nicInstances;for(var A=0;A<B.length;A++){if(B[A].e==C){return B[A]}}},setPanel:function(A){this.nicPanel=new nicEditorPanel($BK(A),this.options,this);this.fireEvent("panel",this.nicPanel);return this},nicCommand:function(B,A){if(this.selectedInstance){this.selectedInstance.nicCommand(B,A)}},getIcon:function(D,A){var C=this.options.iconList[D];var B=(A.iconFiles)?A.iconFiles[D]:"";return{backgroundImage:"url('"+((C)?this.options.iconsPath:B)+"')",backgroundPosition:((C)?((C-1)*-18):0)+"px 0px"}},selectCheck:function(C,A){var B=false;do{if(A.className&&A.className.indexOf("nicEdit")!=-1){return false}}while(A=A.parentNode);this.fireEvent("blur",this.selectedInstance,A);this.lastSelectedInstance=this.selectedInstance;this.selectedInstance=null;return false}});nicEditor=nicEditor.extend(bkEvent);
    2. var nicEditorInstance=bkClass.extend({isSelected:false,construct:function(G,D,C){this.ne=C;this.elm=this.e=G;this.options=D||{};newX=parseInt(G.getStyle("width"))||G.clientWidth;newY=parseInt(G.getStyle("height"))||G.clientHeight;this.initialHeight=newY-8;var H=(G.nodeName.toLowerCase()=="textarea");if(H||this.options.hasPanel){var B=(bkLib.isMSIE&&!((typeof document.body.style.maxHeight!="undefined")&&document.compatMode=="CSS1Compat"));var E={width:newX+"px",border:"1px solid #ccc",borderTop:0,overflowY:"auto",overflowX:"hidden"};E[(B)?"height":"maxHeight"]=(this.ne.options.maxHeight)?this.ne.options.maxHeight+"px":null;this.editorContain=new bkElement("DIV").setStyle(E).appendBefore(G);var A=new bkElement("DIV").setStyle({width:(newX-8)+"px",margin:"4px",minHeight:newY+"px"}).addClass("main").appendTo(this.editorContain);G.setStyle({display:"none"});A.innerHTML=G.innerHTML;if(H){A.setContent(G.value);this.copyElm=G;var F=G.parentTag("FORM");if(F){bkLib.addEvent(F,"submit",this.saveContent.closure(this))}}A.setStyle((B)?{height:newY+"px"}:{overflow:"hidden"});this.elm=A}this.ne.addEvent("blur",this.blur.closure(this));this.init();this.blur()},init:function(){this.elm.setAttribute("contentEditable","true");if(this.getContent()==""){this.setContent("<br />")}this.instanceDoc=document.defaultView;this.elm.addEvent("mousedown",this.selected.closureListener(this)).addEvent("keypress",this.keyDown.closureListener(this)).addEvent("focus",this.selected.closure(this)).addEvent("blur",this.blur.closure(this)).addEvent("keyup",this.selected.closure(this));this.ne.fireEvent("add",this)},remove:function(){this.saveContent();if(this.copyElm||this.options.hasPanel){this.editorContain.remove();this.e.setStyle({display:"block"});this.ne.removePanel()}this.disable();this.ne.fireEvent("remove",this)},disable:function(){this.elm.setAttribute("contentEditable","false")},getSel:function(){return(window.getSelection)?window.getSelection():document.selection},getRng:function(){var A=this.getSel();if(!A||A.rangeCount===0){return }return(A.rangeCount>0)?A.getRangeAt(0):A.createRange()},selRng:function(A,B){if(window.getSelection){B.removeAllRanges();B.addRange(A)}else{A.select()}},selElm:function(){var C=this.getRng();if(!C){return }if(C.startContainer){var D=C.startContainer;if(C.cloneContents().childNodes.length==1){for(var B=0;B<D.childNodes.length;B++){var A=D.childNodes[B].ownerDocument.createRange();A.selectNode(D.childNodes[B]);if(C.compareBoundaryPoints(Range.START_TO_START,A)!=1&&C.compareBoundaryPoints(Range.END_TO_END,A)!=-1){return $BK(D.childNodes[B])}}}return $BK(D)}else{return $BK((this.getSel().type=="Control")?C.item(0):C.parentElement())}},saveRng:function(){this.savedRange=this.getRng();this.savedSel=this.getSel()},restoreRng:function(){if(this.savedRange){this.selRng(this.savedRange,this.savedSel)}},keyDown:function(B,A){if(B.ctrlKey){this.ne.fireEvent("key",this,B)}},selected:function(C,A){if(!A&&!(A=this.selElm)){A=this.selElm()}if(!C.ctrlKey){var B=this.ne.selectedInstance;if(B!=this){if(B){this.ne.fireEvent("blur",B,A)}this.ne.selectedInstance=this;this.ne.fireEvent("focus",B,A)}this.ne.fireEvent("selected",B,A);this.isFocused=true;this.elm.addClass("selected")}return false},blur:function(){this.isFocused=false;this.elm.removeClass("selected")},saveContent:function(){if(this.copyElm||this.options.hasPanel){this.ne.fireEvent("save",this);(this.copyElm)?this.copyElm.value=this.getContent():this.e.innerHTML=this.getContent()}},getElm:function(){return this.elm},getContent:function(){this.content=this.getElm().innerHTML;this.ne.fireEvent("get",this);return this.content},setContent:function(A){this.content=A;this.ne.fireEvent("set",this);this.elm.innerHTML=this.content},nicCommand:function(B,A){document.execCommand(B,false,A)}});
    3. var nicEditorIFrameInstance=nicEditorInstance.extend({savedStyles:[],init:function(){var B=this.elm.innerHTML.replace(/^\s+|\s+$/g,"");this.elm.innerHTML="";(!B)?B="<br />":B;this.initialContent=B;this.elmFrame=new bkElement("iframe").setAttributes({src:"javascript:;",frameBorder:0,allowTransparency:"true",scrolling:"no"}).setStyle({height:"100px",width:"100%"}).addClass("frame").appendTo(this.elm);if(this.copyElm){this.elmFrame.setStyle({width:(this.elm.offsetWidth-4)+"px"})}var A=["font-size","font-family","font-weight","color"];for(itm in A){this.savedStyles[bkLib.camelize(itm)]=this.elm.getStyle(itm)}setTimeout(this.initFrame.closure(this),50)},disable:function(){this.elm.innerHTML=this.getContent()},initFrame:function(){var B=$BK(this.elmFrame.contentWindow.document);B.designMode="on";B.open();var A=this.ne.options.externalCSS;B.write("<html><head>"+((A)?'<link href="'+A+'" rel="stylesheet" type="text/css" />':"")+'</head><body id="nicEditContent" style="margin: 0 !important; background-color: transparent !important;">'+this.initialContent+"</body></html>");B.close();this.frameDoc=B;this.frameWin=$BK(this.elmFrame.contentWindow);this.frameContent=$BK(this.frameWin.document.body).setStyle(this.savedStyles);this.instanceDoc=this.frameWin.document.defaultView;this.heightUpdate();this.frameDoc.addEvent("mousedown",this.selected.closureListener(this)).addEvent("keyup",this.heightUpdate.closureListener(this)).addEvent("keydown",this.keyDown.closureListener(this)).addEvent("keyup",this.selected.closure(this));this.ne.fireEvent("add",this)},getElm:function(){return this.frameContent},setContent:function(A){this.content=A;this.ne.fireEvent("set",this);this.frameContent.innerHTML=this.content;this.heightUpdate()},getSel:function(){return(this.frameWin)?this.frameWin.getSelection():this.frameDoc.selection},heightUpdate:function(){this.elmFrame.style.height=Math.max(this.frameContent.offsetHeight,this.initialHeight)+"px"},nicCommand:function(B,A){this.frameDoc.execCommand(B,false,A);setTimeout(this.heightUpdate.closure(this),100)}});
    4. var nicEditorPanel=bkClass.extend({construct:function(E,B,A){this.elm=E;this.options=B;this.ne=A;this.panelButtons=new Array();this.buttonList=bkExtend([],this.ne.options.buttonList);this.panelContain=new bkElement("DIV").setStyle({overflow:"hidden",width:"100%",border:"1px solid #cccccc",backgroundColor:"#efefef"}).addClass("panelContain");this.panelElm=new bkElement("DIV").setStyle({margin:"2px",marginTop:"0px",zoom:1,overflow:"hidden"}).addClass("panel").appendTo(this.panelContain);this.panelContain.appendTo(E);var C=this.ne.options;var D=C.buttons;for(button in D){this.addButton(button,C,true)}this.reorder();E.noSelect()},addButton:function(buttonName,options,noOrder){var button=options.buttons[buttonName];var type=(button.type)?eval("(typeof("+button.type+') == "undefined") ? null : '+button.type+";"):nicEditorButton;var hasButton=bkLib.inArray(this.buttonList,buttonName);if(type&&(hasButton||this.ne.options.fullPanel)){this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne));if(!hasButton){this.buttonList.push(buttonName)}}},findButton:function(B){for(var A=0;A<this.panelButtons.length;A++){if(this.panelButtons[A].name==B){return this.panelButtons[A]}}},reorder:function(){var C=this.buttonList;for(var B=0;B<C.length;B++){var A=this.findButton(C[B]);if(A){this.panelElm.appendChild(A.margin)}}},remove:function(){this.elm.remove()}});
    5. var nicEditorButton=bkClass.extend({construct:function(D,A,C,B){this.options=C.buttons[A];this.name=A;this.ne=B;this.elm=D;this.margin=new bkElement("DIV").setStyle({"float":"left",marginTop:"2px"}).appendTo(D);this.contain=new bkElement("DIV").setStyle({width:"20px",height:"20px"}).addClass("buttonContain").appendTo(this.margin);this.border=new bkElement("DIV").setStyle({backgroundColor:"#efefef",border:"1px solid #efefef"}).appendTo(this.contain);this.button=new bkElement("DIV").setStyle({width:"18px",height:"18px",overflow:"hidden",zoom:1,cursor:"pointer"}).addClass("button").setStyle(this.ne.getIcon(A,C)).appendTo(this.border);this.button.addEvent("mouseover",this.hoverOn.closure(this)).addEvent("mouseout",this.hoverOff.closure(this)).addEvent("mousedown",this.mouseClick.closure(this)).noSelect();if(!window.opera){this.button.onmousedown=this.button.onclick=bkLib.cancelEvent}B.addEvent("selected",this.enable.closure(this)).addEvent("blur",this.disable.closure(this)).addEvent("key",this.key.closure(this));this.disable();this.init()},init:function(){},hide:function(){this.contain.setStyle({display:"none"})},updateState:function(){if(this.isDisabled){this.setBg()}else{if(this.isHover){this.setBg("hover")}else{if(this.isActive){this.setBg("active")}else{this.setBg()}}}},setBg:function(A){switch(A){case"hover":var B={border:"1px solid #666",backgroundColor:"#ddd"};break;case"active":var B={border:"1px solid #666",backgroundColor:"#ccc"};break;default:var B={border:"1px solid #efefef",backgroundColor:"#efefef"}}this.border.setStyle(B).addClass("button-"+A)},checkNodes:function(A){var B=A;do{if(this.options.tags&&bkLib.inArray(this.options.tags,B.nodeName)){this.activate();return true}}while(B=B.parentNode&&B.className!="nicEdit");B=$BK(A);while(B.nodeType==3){B=$BK(B.parentNode)}if(this.options.css){for(itm in this.options.css){if(B.getStyle(itm,this.ne.selectedInstance.instanceDoc)==this.options.css[itm]){this.activate();return true}}}this.deactivate();return false},activate:function(){if(!this.isDisabled){this.isActive=true;this.updateState();this.ne.fireEvent("buttonActivate",this)}},deactivate:function(){this.isActive=false;this.updateState();if(!this.isDisabled){this.ne.fireEvent("buttonDeactivate",this)}},enable:function(A,B){this.isDisabled=false;this.contain.setStyle({opacity:1}).addClass("buttonEnabled");this.updateState();this.checkNodes(B)},disable:function(A,B){this.isDisabled=true;this.contain.setStyle({opacity:0.6}).removeClass("buttonEnabled");this.updateState()},toggleActive:function(){(this.isActive)?this.deactivate():this.activate()},hoverOn:function(){if(!this.isDisabled){this.isHover=true;this.updateState();this.ne.fireEvent("buttonOver",this)}},hoverOff:function(){this.isHover=false;this.updateState();this.ne.fireEvent("buttonOut",this)},mouseClick:function(){if(this.options.command){this.ne.nicCommand(this.options.command,this.options.commandArgs);if(!this.options.noActive){this.toggleActive()}}this.ne.fireEvent("buttonClick",this)},key:function(A,B){if(this.options.key&&B.ctrlKey&&String.fromCharCode(B.keyCode||B.charCode).toLowerCase()==this.options.key){this.mouseClick();if(B.preventDefault){B.preventDefault()}}}});
    6. var nicPlugin=bkClass.extend({construct:function(B,A){this.options=A;this.ne=B;this.ne.addEvent("panel",this.loadPanel.closure(this));this.init()},loadPanel:function(C){var B=this.options.buttons;for(var A in B){C.addButton(A,this.options)}C.reorder()},init:function(){}});




    Leider finde ich die benötige funtkion nicht. Kurz gesat ich will einfach den Background des Textareas ändern.

  • Einmal durch den Beatufier jagen und schon kommt was anderes raus ;)

    Quellcode

    1. var nicEditors = {
    2. nicPlugins: [],
    3. editors: [],
    4. registerPlugin: function (B, A) {
    5. this.nicPlugins.push({
    6. p: B,
    7. o: A
    8. })
    9. },
    10. allTextAreas: function (C) {
    11. var A = document.getElementsByTagName("textarea");
    12. for (var B = 0; B < A.length; B++) {
    13. nicEditors.editors.push(new nicEditor(C).panelInstance(A[B]))
    14. }
    15. return nicEditors.editors
    16. },
    17. findEditor: function (C) {
    18. var B = nicEditors.editors;
    19. for (var A = 0; A < B.length; A++) {
    20. if (B[A].instanceById(C)) {
    21. return B[A].instanceById(C)
    22. }
    23. }
    24. }
    25. };
    26. var nicEditor = bkClass.extend({
    27. construct: function (C) {
    28. this.options = new nicEditorConfig();
    29. bkExtend(this.options, C);
    30. this.nicInstances = new Array();
    31. this.loadedPlugins = new Array();
    32. var A = nicEditors.nicPlugins;
    33. for (var B = 0; B < A.length; B++) {
    34. this.loadedPlugins.push(new A[B].p(this, A[B].o))
    35. }
    36. nicEditors.editors.push(this);
    37. bkLib.addEvent(document.body, "mousedown", this.selectCheck.closureListener(this))
    38. },
    39. panelInstance: function (B, C) {
    40. B = this.checkReplace($BK(B));
    41. var A = new bkElement("DIV").setStyle({
    42. width: (parseInt(B.getStyle("width")) || B.clientWidth) + "px"
    43. }).appendBefore(B);
    44. this.setPanel(A);
    45. return this.addInstance(B, C)
    46. },
    47. checkReplace: function (B) {
    48. var A = nicEditors.findEditor(B);
    49. if (A) {
    50. A.removeInstance(B);
    51. A.removePanel()
    52. }
    53. return B
    54. },
    55. addInstance: function (B, C) {
    56. B = this.checkReplace($BK(B));
    57. if (B.contentEditable || !! window.opera) {
    58. var A = new nicEditorInstance(B, C, this)
    59. } else {
    60. var A = new nicEditorIFrameInstance(B, C, this)
    61. }
    62. this.nicInstances.push(A);
    63. return this
    64. },
    65. removeInstance: function (C) {
    66. C = $BK(C);
    67. var B = this.nicInstances;
    68. for (var A = 0; A < B.length; A++) {
    69. if (B[A].e == C) {
    70. B[A].remove();
    71. this.nicInstances.splice(A, 1)
    72. }
    73. }
    74. },
    75. removePanel: function (A) {
    76. if (this.nicPanel) {
    77. this.nicPanel.remove();
    78. this.nicPanel = null
    79. }
    80. },
    81. instanceById: function (C) {
    82. C = $BK(C);
    83. var B = this.nicInstances;
    84. for (var A = 0; A < B.length; A++) {
    85. if (B[A].e == C) {
    86. return B[A]
    87. }
    88. }
    89. },
    90. setPanel: function (A) {
    91. this.nicPanel = new nicEditorPanel($BK(A), this.options, this);
    92. this.fireEvent("panel", this.nicPanel);
    93. return this
    94. },
    95. nicCommand: function (B, A) {
    96. if (this.selectedInstance) {
    97. this.selectedInstance.nicCommand(B, A)
    98. }
    99. },
    100. getIcon: function (D, A) {
    101. var C = this.options.iconList[D];
    102. var B = (A.iconFiles) ? A.iconFiles[D] : "";
    103. return {
    104. backgroundImage: "url('" + ((C) ? this.options.iconsPath : B) + "')",
    105. backgroundPosition: ((C) ? ((C - 1) * -18) : 0) + "px 0px"
    106. }
    107. },
    108. selectCheck: function (C, A) {
    109. var B = false;
    110. do {
    111. if (A.className && A.className.indexOf("nicEdit") != -1) {
    112. return false
    113. }
    114. } while (A = A.parentNode);
    115. this.fireEvent("blur", this.selectedInstance, A);
    116. this.lastSelectedInstance = this.selectedInstance;
    117. this.selectedInstance = null;
    118. return false
    119. }
    120. });
    121. nicEditor = nicEditor.extend(bkEvent);
    122. var nicEditorInstance = bkClass.extend({
    123. isSelected: false,
    124. construct: function (G, D, C) {
    125. this.ne = C;
    126. this.elm = this.e = G;
    127. this.options = D || {};
    128. newX = parseInt(G.getStyle("width")) || G.clientWidth;
    129. newY = parseInt(G.getStyle("height")) || G.clientHeight;
    130. this.initialHeight = newY - 8;
    131. var H = (G.nodeName.toLowerCase() == "textarea");
    132. if (H || this.options.hasPanel) {
    133. var B = (bkLib.isMSIE && !((typeof document.body.style.maxHeight != "undefined") && document.compatMode == "CSS1Compat"));
    134. var E = {
    135. width: newX + "px",
    136. border: "1px solid #ccc",
    137. borderTop: 0,
    138. overflowY: "auto",
    139. overflowX: "hidden"
    140. };
    141. E[(B) ? "height" : "maxHeight"] = (this.ne.options.maxHeight) ? this.ne.options.maxHeight + "px" : null;
    142. this.editorContain = new bkElement("DIV").setStyle(E).appendBefore(G);
    143. var A = new bkElement("DIV").setStyle({
    144. width: (newX - 8) + "px",
    145. margin: "4px",
    146. minHeight: newY + "px"
    147. }).addClass("main").appendTo(this.editorContain);
    148. G.setStyle({
    149. display: "none"
    150. });
    151. A.innerHTML = G.innerHTML;
    152. if (H) {
    153. A.setContent(G.value);
    154. this.copyElm = G;
    155. var F = G.parentTag("FORM");
    156. if (F) {
    157. bkLib.addEvent(F, "submit", this.saveContent.closure(this))
    158. }
    159. }
    160. A.setStyle((B) ? {
    161. height: newY + "px"
    162. } : {
    163. overflow: "hidden"
    164. });
    165. this.elm = A
    166. }
    167. this.ne.addEvent("blur", this.blur.closure(this));
    168. this.init();
    169. this.blur()
    170. },
    171. init: function () {
    172. this.elm.setAttribute("contentEditable", "true");
    173. if (this.getContent() == "") {
    174. this.setContent("<br />")
    175. }
    176. this.instanceDoc = document.defaultView;
    177. this.elm.addEvent("mousedown", this.selected.closureListener(this)).addEvent("keypress", this.keyDown.closureListener(this)).addEvent("focus", this.selected.closure(this)).addEvent("blur", this.blur.closure(this)).addEvent("keyup", this.selected.closure(this));
    178. this.ne.fireEvent("add", this)
    179. },
    180. remove: function () {
    181. this.saveContent();
    182. if (this.copyElm || this.options.hasPanel) {
    183. this.editorContain.remove();
    184. this.e.setStyle({
    185. display: "block"
    186. });
    187. this.ne.removePanel()
    188. }
    189. this.disable();
    190. this.ne.fireEvent("remove", this)
    191. },
    192. disable: function () {
    193. this.elm.setAttribute("contentEditable", "false")
    194. },
    195. getSel: function () {
    196. return (window.getSelection) ? window.getSelection() : document.selection
    197. },
    198. getRng: function () {
    199. var A = this.getSel();
    200. if (!A || A.rangeCount === 0) {
    201. return
    202. }
    203. return (A.rangeCount > 0) ? A.getRangeAt(0) : A.createRange()
    204. },
    205. selRng: function (A, B) {
    206. if (window.getSelection) {
    207. B.removeAllRanges();
    208. B.addRange(A)
    209. } else {
    210. A.select()
    211. }
    212. },
    213. selElm: function () {
    214. var C = this.getRng();
    215. if (!C) {
    216. return
    217. }
    218. if (C.startContainer) {
    219. var D = C.startContainer;
    220. if (C.cloneContents().childNodes.length == 1) {
    221. for (var B = 0; B < D.childNodes.length; B++) {
    222. var A = D.childNodes[B].ownerDocument.createRange();
    223. A.selectNode(D.childNodes[B]);
    224. if (C.compareBoundaryPoints(Range.START_TO_START, A) != 1 && C.compareBoundaryPoints(Range.END_TO_END, A) != -1) {
    225. return $BK(D.childNodes[B])
    226. }
    227. }
    228. }
    229. return $BK(D)
    230. } else {
    231. return $BK((this.getSel().type == "Control") ? C.item(0) : C.parentElement())
    232. }
    233. },
    234. saveRng: function () {
    235. this.savedRange = this.getRng();
    236. this.savedSel = this.getSel()
    237. },
    238. restoreRng: function () {
    239. if (this.savedRange) {
    240. this.selRng(this.savedRange, this.savedSel)
    241. }
    242. },
    243. keyDown: function (B, A) {
    244. if (B.ctrlKey) {
    245. this.ne.fireEvent("key", this, B)
    246. }
    247. },
    248. selected: function (C, A) {
    249. if (!A && !(A = this.selElm)) {
    250. A = this.selElm()
    251. }
    252. if (!C.ctrlKey) {
    253. var B = this.ne.selectedInstance;
    254. if (B != this) {
    255. if (B) {
    256. this.ne.fireEvent("blur", B, A)
    257. }
    258. this.ne.selectedInstance = this;
    259. this.ne.fireEvent("focus", B, A)
    260. }
    261. this.ne.fireEvent("selected", B, A);
    262. this.isFocused = true;
    263. this.elm.addClass("selected")
    264. }
    265. return false
    266. },
    267. blur: function () {
    268. this.isFocused = false;
    269. this.elm.removeClass("selected")
    270. },
    271. saveContent: function () {
    272. if (this.copyElm || this.options.hasPanel) {
    273. this.ne.fireEvent("save", this);
    274. (this.copyElm) ? this.copyElm.value = this.getContent() : this.e.innerHTML = this.getContent()
    275. }
    276. },
    277. getElm: function () {
    278. return this.elm
    279. },
    280. getContent: function () {
    281. this.content = this.getElm().innerHTML;
    282. this.ne.fireEvent("get", this);
    283. return this.content
    284. },
    285. setContent: function (A) {
    286. this.content = A;
    287. this.ne.fireEvent("set", this);
    288. this.elm.innerHTML = this.content
    289. },
    290. nicCommand: function (B, A) {
    291. document.execCommand(B, false, A)
    292. }
    293. });
    294. var nicEditorIFrameInstance = nicEditorInstance.extend({
    295. savedStyles: [],
    296. init: function () {
    297. var B = this.elm.innerHTML.replace(/^\s+|\s+$/g, "");
    298. this.elm.innerHTML = "";
    299. (!B) ? B = "<br />" : B;
    300. this.initialContent = B;
    301. this.elmFrame = new bkElement("iframe").setAttributes({
    302. src: "javascript:;",
    303. frameBorder: 0,
    304. allowTransparency: "true",
    305. scrolling: "no"
    306. }).setStyle({
    307. height: "100px",
    308. width: "100%"
    309. }).addClass("frame").appendTo(this.elm);
    310. if (this.copyElm) {
    311. this.elmFrame.setStyle({
    312. width: (this.elm.offsetWidth - 4) + "px"
    313. })
    314. }
    315. var A = ["font-size", "font-family", "font-weight", "color"];
    316. for (itm in A) {
    317. this.savedStyles[bkLib.camelize(itm)] = this.elm.getStyle(itm)
    318. }
    319. setTimeout(this.initFrame.closure(this), 50)
    320. },
    321. disable: function () {
    322. this.elm.innerHTML = this.getContent()
    323. },
    324. initFrame: function () {
    325. var B = $BK(this.elmFrame.contentWindow.document);
    326. B.designMode = "on";
    327. B.open();
    328. var A = this.ne.options.externalCSS;
    329. B.write("<html><head>" + ((A) ? '<link href="' + A + '" rel="stylesheet" type="text/css" />' : "") + '</head><body id="nicEditContent" style="margin: 0 !important; background-color: transparent !important;">' + this.initialContent + "</body></html>");
    330. B.close();
    331. this.frameDoc = B;
    332. this.frameWin = $BK(this.elmFrame.contentWindow);
    333. this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles);
    334. this.instanceDoc = this.frameWin.document.defaultView;
    335. this.heightUpdate();
    336. this.frameDoc.addEvent("mousedown", this.selected.closureListener(this)).addEvent("keyup", this.heightUpdate.closureListener(this)).addEvent("keydown", this.keyDown.closureListener(this)).addEvent("keyup", this.selected.closure(this));
    337. this.ne.fireEvent("add", this)
    338. },
    339. getElm: function () {
    340. return this.frameContent
    341. },
    342. setContent: function (A) {
    343. this.content = A;
    344. this.ne.fireEvent("set", this);
    345. this.frameContent.innerHTML = this.content;
    346. this.heightUpdate()
    347. },
    348. getSel: function () {
    349. return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection
    350. },
    351. heightUpdate: function () {
    352. this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight, this.initialHeight) + "px"
    353. },
    354. nicCommand: function (B, A) {
    355. this.frameDoc.execCommand(B, false, A);
    356. setTimeout(this.heightUpdate.closure(this), 100)
    357. }
    358. });
    359. var nicEditorPanel = bkClass.extend({
    360. construct: function (E, B, A) {
    361. this.elm = E;
    362. this.options = B;
    363. this.ne = A;
    364. this.panelButtons = new Array();
    365. this.buttonList = bkExtend([], this.ne.options.buttonList);
    366. this.panelContain = new bkElement("DIV").setStyle({
    367. overflow: "hidden",
    368. width: "100%",
    369. border: "1px solid #cccccc",
    370. backgroundColor: "#efefef"
    371. }).addClass("panelContain");
    372. this.panelElm = new bkElement("DIV").setStyle({
    373. margin: "2px",
    374. marginTop: "0px",
    375. zoom: 1,
    376. overflow: "hidden"
    377. }).addClass("panel").appendTo(this.panelContain);
    378. this.panelContain.appendTo(E);
    379. var C = this.ne.options;
    380. var D = C.buttons;
    381. for (button in D) {
    382. this.addButton(button, C, true)
    383. }
    384. this.reorder();
    385. E.noSelect()
    386. },
    387. addButton: function (buttonName, options, noOrder) {
    388. var button = options.buttons[buttonName];
    389. var type = (button.type) ? eval("(typeof(" + button.type + ') == "undefined") ? null : ' + button.type + ";") : nicEditorButton;
    390. var hasButton = bkLib.inArray(this.buttonList, buttonName);
    391. if (type && (hasButton || this.ne.options.fullPanel)) {
    392. this.panelButtons.push(new type(this.panelElm, buttonName, options, this.ne));
    393. if (!hasButton) {
    394. this.buttonList.push(buttonName)
    395. }
    396. }
    397. },
    398. findButton: function (B) {
    399. for (var A = 0; A < this.panelButtons.length; A++) {
    400. if (this.panelButtons[A].name == B) {
    401. return this.panelButtons[A]
    402. }
    403. }
    404. },
    405. reorder: function () {
    406. var C = this.buttonList;
    407. for (var B = 0; B < C.length; B++) {
    408. var A = this.findButton(C[B]);
    409. if (A) {
    410. this.panelElm.appendChild(A.margin)
    411. }
    412. }
    413. },
    414. remove: function () {
    415. this.elm.remove()
    416. }
    417. });
    418. var nicEditorButton = bkClass.extend({
    419. construct: function (D, A, C, B) {
    420. this.options = C.buttons[A];
    421. this.name = A;
    422. this.ne = B;
    423. this.elm = D;
    424. this.margin = new bkElement("DIV").setStyle({
    425. "float": "left",
    426. marginTop: "2px"
    427. }).appendTo(D);
    428. this.contain = new bkElement("DIV").setStyle({
    429. width: "20px",
    430. height: "20px"
    431. }).addClass("buttonContain").appendTo(this.margin);
    432. this.border = new bkElement("DIV").setStyle({
    433. backgroundColor: "#efefef",
    434. border: "1px solid #efefef"
    435. }).appendTo(this.contain);
    436. this.button = new bkElement("DIV").setStyle({
    437. width: "18px",
    438. height: "18px",
    439. overflow: "hidden",
    440. zoom: 1,
    441. cursor: "pointer"
    442. }).addClass("button").setStyle(this.ne.getIcon(A, C)).appendTo(this.border);
    443. this.button.addEvent("mouseover", this.hoverOn.closure(this)).addEvent("mouseout", this.hoverOff.closure(this)).addEvent("mousedown", this.mouseClick.closure(this)).noSelect();
    444. if (!window.opera) {
    445. this.button.onmousedown = this.button.onclick = bkLib.cancelEvent
    446. }
    447. B.addEvent("selected", this.enable.closure(this)).addEvent("blur", this.disable.closure(this)).addEvent("key", this.key.closure(this));
    448. this.disable();
    449. this.init()
    450. },
    451. init: function () {},
    452. hide: function () {
    453. this.contain.setStyle({
    454. display: "none"
    455. })
    456. },
    457. updateState: function () {
    458. if (this.isDisabled) {
    459. this.setBg()
    460. } else {
    461. if (this.isHover) {
    462. this.setBg("hover")
    463. } else {
    464. if (this.isActive) {
    465. this.setBg("active")
    466. } else {
    467. this.setBg()
    468. }
    469. }
    470. }
    471. },
    472. setBg: function (A) {
    473. switch (A) {
    474. case "hover":
    475. var B = {
    476. border: "1px solid #666",
    477. backgroundColor: "#ddd"
    478. };
    479. break;
    480. case "active":
    481. var B = {
    482. border: "1px solid #666",
    483. backgroundColor: "#ccc"
    484. };
    485. break;
    486. default:
    487. var B = {
    488. border: "1px solid #efefef",
    489. backgroundColor: "#efefef"
    490. }
    491. }
    492. this.border.setStyle(B).addClass("button-" + A)
    493. },
    494. checkNodes: function (A) {
    495. var B = A;
    496. do {
    497. if (this.options.tags && bkLib.inArray(this.options.tags, B.nodeName)) {
    498. this.activate();
    499. return true
    500. }
    501. } while (B = B.parentNode && B.className != "nicEdit");
    502. B = $BK(A);
    503. while (B.nodeType == 3) {
    504. B = $BK(B.parentNode)
    505. }
    506. if (this.options.css) {
    507. for (itm in this.options.css) {
    508. if (B.getStyle(itm, this.ne.selectedInstance.instanceDoc) == this.options.css[itm]) {
    509. this.activate();
    510. return true
    511. }
    512. }
    513. }
    514. this.deactivate();
    515. return false
    516. },
    517. activate: function () {
    518. if (!this.isDisabled) {
    519. this.isActive = true;
    520. this.updateState();
    521. this.ne.fireEvent("buttonActivate", this)
    522. }
    523. },
    524. deactivate: function () {
    525. this.isActive = false;
    526. this.updateState();
    527. if (!this.isDisabled) {
    528. this.ne.fireEvent("buttonDeactivate", this)
    529. }
    530. },
    531. enable: function (A, B) {
    532. this.isDisabled = false;
    533. this.contain.setStyle({
    534. opacity: 1
    535. }).addClass("buttonEnabled");
    536. this.updateState();
    537. this.checkNodes(B)
    538. },
    539. disable: function (A, B) {
    540. this.isDisabled = true;
    541. this.contain.setStyle({
    542. opacity: 0.6
    543. }).removeClass("buttonEnabled");
    544. this.updateState()
    545. },
    546. toggleActive: function () {
    547. (this.isActive) ? this.deactivate() : this.activate()
    548. },
    549. hoverOn: function () {
    550. if (!this.isDisabled) {
    551. this.isHover = true;
    552. this.updateState();
    553. this.ne.fireEvent("buttonOver", this)
    554. }
    555. },
    556. hoverOff: function () {
    557. this.isHover = false;
    558. this.updateState();
    559. this.ne.fireEvent("buttonOut", this)
    560. },
    561. mouseClick: function () {
    562. if (this.options.command) {
    563. this.ne.nicCommand(this.options.command, this.options.commandArgs);
    564. if (!this.options.noActive) {
    565. this.toggleActive()
    566. }
    567. }
    568. this.ne.fireEvent("buttonClick", this)
    569. },
    570. key: function (A, B) {
    571. if (this.options.key && B.ctrlKey && String.fromCharCode(B.keyCode || B.charCode).toLowerCase() == this.options.key) {
    572. this.mouseClick();
    573. if (B.preventDefault) {
    574. B.preventDefault()
    575. }
    576. }
    577. }
    578. });
    579. var nicPlugin = bkClass.extend({
    580. construct: function (B, A) {
    581. this.options = A;
    582. this.ne = B;
    583. this.ne.addEvent("panel", this.loadPanel.closure(this));
    584. this.init()
    585. },
    586. loadPanel: function (C) {
    587. var B = this.options.buttons;
    588. for (var A in B) {
    589. C.addButton(A, this.options)
    590. }
    591. C.reorder()
    592. },
    593. init: function () {}
    594. });
    Alles anzeigen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von xGreekz7x ()