Using Nicedit

[bigjoe11a]

After getting all the errors out from my pages. I have just one error left. I still get an error from the nicedit javascript. 'null' is null or not an object. on line 37 in nicEdit.js I did get the icons to show up on the page for the nicedit, And I can't see the words in the drop down boxes. Joe PS. Thanks justsomeguy for your help in fixing my pages.

[thescientist]

wrong thread/forum? at the very least kindly supply a link or the code you are using so we can see for ourselves. But chances are one of your references is wrong. What does line 37 contain? Have you debugged the object (using alert or log) to make sure it is what you expect to be?

[bigjoe11a]

this is what line 37 contains var nicEditors={nicPlugins:[],editors:[],registerPlugin:function(B,A){this.nicPlugins.push({p:B,o:A})},allTextAreas:function©{var A=document.getElementsByTagName("textarea");for(var B=0;B<A.length;B++){nicEditors.editors.push(new nicEditor©.panelInstance(A))}return nicEditors.editors},findEditor:function©{var B=nicEditors.editors;for(var A=0;A<B.length;A++){if(B[A].instanceById©){return B[A].instanceById©}}}};var nicEditor=bkClass.extend({construct:function©{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.p(this,A.o))}nicEditors.editors.push(this);bkLib.addEvent(document.body,"mousedown",this.selectCheck.closureListener(this))},panelInstance:function(B,C){B=this.checkReplace($BK();var A=new bkElement("DIV").setStyle({width:(parseInt(B.getStyle("width"))||B.clientWidth)+"px"}).appendBefore(;this.setPanel(A);return this.addInstance(B,C)},checkReplace:function({var A=nicEditors.findEditor(;if(A){A.removeInstance(;A.removePanel()}return B},addInstance:function(B,C){B=this.checkReplace($BK();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=$BK©;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=$BK©;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('"+(©?this.options.iconsPath:+"')",backgroundPosition:(©?((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); and since I didn't make this code. I have no idea on how to debug it and since it's not my code I shouldn't have too.

[justsomeguy]

There's probably not a bug in the code, there's probably a problem with how the page is set up. Post a link to the page, or go through the installation instructions for the script to make sure you've got everything there.

I have no idea on how to debug it and since it's not my code I shouldn't have too.

You mean we only have to debug our own code? Well what the heck am I doing here then... I should be working.

[thescientist]

yeah, in case you haven't seen how your post came out, it's probably clearer why it's preferable for us to be provided a live working link whenever possible. I'm sure there aren't emoticons and copyright symbols in your code, haha. Also we can use debugging tools on the code itself through the browser, which is a big plus for us, rather than having to recreate the environment ourselves. Plus there's usually context left out that typically is part of the problem, not immediately obvious from just a single line kind of post.

[thescientist]

You mean we only have to debug our own code? Well what the heck am I doing here then... I should be working.

excellent, I think that's another sigworthy gem from the master himself!

[bigjoe11a]

ok, you guys will get errors, undefined indexes because your not log in, so here you go http://toppersbbs.dtdns.net/mapnet/blog/addentry.php?bid=20

[justsomeguy]

The only Javascript error I see is an error in Chrome because it tries to use a Mozilla-added (non-standard) object that Chrome doesn't fully support. It works otherwise.

[thescientist]

this is right on their home page

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script><script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

You're not using the latest version of their code. Comparing the file you're using in your document vs. the one they give you on the home page and on the demo herehttp://nicedit.com/demos.php?demo=2 they are some notable differences.http://toppersbbs.dt...ipts/nicEdit.jshttp://js.nicedit.co...cEdit-latest.js although it does seem to be working despite the one error I'm getting in Chrome. What browser are you using?

[bigjoe11a]

Well I downloaded this version from there main web site, And I'm using Crome or IE and FF. I have used all 3 broswers.Here's where I downloaded it from http://nicedit.com/download.php and I downloaded the one at the bottom of the page. The one that says compressed. here's the setup I have in my header_content.html

<script src="{SITE_ROOT}/jscripts/nicEdit.js" type="text/javascript"></script><script type="text/javascript">bkLib.onDomLoaded(function() {/* new nicEditor().panelInstance('area1'); */ new nicEditor({fullPanel : true}).panelInstance('area2');/* new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3'); *//* new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4'); *//* new nicEditor({maxHeight : 100}).panelInstance('area5'); */});</script>

[dsonesuk]

As I understand it, all you require is

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script><script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

as in for example default.tpl

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>[title]</title><link rel="stylesheet" href="css/template.css" type="text/css"><script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script><script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script></head>

in your template page, then depending on which features you require use name="area1", name="area2", OR name="area3" in the textarea element , to bring up the required features as their example

<h4>First Textarea</h4><textarea name="area1" cols="35"></textarea><br /><h4>Second Textarea</h4><textarea name="area2" style="width: 100%;">Some Initial Content was in this textarea</textarea><br /><h4>Third Textarea</h4><textarea name="area3" style="width: 300px; height: 100px;">HTML content default in textarea</textarea>

Edit: no it will add add editor to any textarea even without a name of area1,2, or 3.

[bigjoe11a]

well see, I will have textares's that I don't want that option. The problem is that some of the areas will be read only <textarea readonly="readonly">You can't type or change any thing in this textarea</textarea>, From a blogs or articles. I only want it for adding articles and blogs only when a user is posting a blog, article or any thing else.

[dsonesuk]

OK! apparently if you use the default

<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

It will target textareas using the name tag, 'name="area1" and so on, but if you create your own editior setup using 'new nicEditor()' the reference will look for a id reference instead. So

new nicEditor({fullPanel : true}).panelInstance('area2');

will look for <textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea> if you setup two editors

new nicEditor().panelInstance('area1');new nicEditor({fullPanel : true}).panelInstance('area2');

and use

<textarea name="area1" cols="35"></textarea><br /><h4>Second Textarea</h4><textarea id="area2" style="width: 100%;">Some Initial Content was in this textarea</textarea>

both will fail to work as it cannot find textarea with id="area1"

[bigjoe11a]

That's what's happing so how can I get this to work. I only want to use them on pages that I want them on. So if I create a textarea and I don't inclued an id="area1". then it should be just a plain textarea. So how do I get this to work.

[dsonesuk]

---

Can't you just use your template page to insert specific js code for specific pages default.tpl

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>[title]</title><link rel="stylesheet" href="css/template.css" type="text/css"><script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script><script type="text/javascript">[jscode]</script></head><body><div id="wrapper"><div id="head"><h1> [title]</h1></div><div id="content"><h2>

---

</h2><div>[content]</div></div></div></body></html>

textarea page

<?phprequire("template.php");$TagContent = new Template('default.tpl');$TagContent->set('title','Template index Page');$TagContent->set('page','Home');$TagContent->set('content','<p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, velit esse cillumdolore in reprehenderit in voluptate. Consectetur adipisicing elit, sed doeiusmod tempor incididunt cupidatat non proident.</p><p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minimveniam, duis aute irure dolor lorem ipsum dolor sit amet. In reprehenderitin voluptate ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat.</p><p>Qui officia deserunt sunt in culpa. Eu fugiat nulla pariatur. Consecteturadipisicing elit, in reprehenderit in voluptate lorem ipsum dolor sit amet.Qui officia deserunt duis aute irure dolor cupidatat non proident. Ut enimad minim veniam, in reprehenderit in voluptate quis nostrud exercitation.</p><p>Ut aliquip ex ea commodo consequat. Sunt in culpa cupidatat non proident,consectetur adipisicing elit. Ut enim ad minim veniam, in reprehenderit involuptate qui officia deserunt. Ut enim ad minim veniam, ut labore et doloremagna aliqua. Ullamco laboris nisi cupidatat non proident, duis aute iruredolor.</p> <h4>First Textarea</h4><textarea id="area1" cols="35"></textarea><br /><h4>Second Textarea</h4><textarea id="area2" style="width: 100%;">Some Initial Content was in this textarea</textarea><br /><h4>Third Textarea</h4><textarea name="area3" style="width: 300px; height: 100px;">HTML content default in textarea</textarea><textarea name="area0" style="width: 300px; height: 100px;">HTML content XXXXXXXXXXXXXXXXX</textarea>');$TagContent->set('jscode', 'bkLib.onDomLoaded(function() {new nicEditor().panelInstance(\'area1\');new nicEditor({fullPanel : true}).panelInstance(\'area2\'); });');echo $TagContent->output();?>

the js code for specific page, and specific editor $TagContent->set('jscode', 'bkLib.onDomLoaded(function() {new nicEditor().panelInstance(\'area1\');new nicEditor({fullPanel : true}).panelInstance(\'area2\'); });'); will be inserted into <script type="text/javascript">[jscode]</script>

[bigjoe11a]

Since I'm not using that class '$TagContent', I don't know. I'm using a template class I got from a web site a long time ago. here's my header_content.html file.

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>{TITLE}</title><link href="{SITE_ROOT}styles/templates/headerstyle.css" rel="stylesheet" type="text/css"><link href="{SITE_ROOT}blog/jquery.cleditor.css" rel="stylesheet" type="text/css" ><script type="text/javascript" src="{SITE_ROOT}jscripts/click.js"></script><script type="text/javascript" src="{SITE_ROOT}jscripts/jquery.js"></script><script src="{SITE_ROOT}/jscripts/nicEdit.js" type="text/javascript"></script><!--<script type="text/javascript">bkLib.onDomLoaded(function() {new nicEditor().panelInstance('area2');/* new nicEditor({fullPanel : true}).panelInstance('area2'); *//* new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3'); *//* new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4'); *//* new nicEditor({maxHeight : 100}).panelInstance('area5'); */});</script>--></head><body><table border="0" cellpadding="0" cellspacing="0" class="header"><tr>  <td><h3>{SITE_NAME}</h3></td></tr></table>

[bigjoe11a]

Here's my page thats my template

<form action="addentry.php?bid={BID}" method="post"><table style="width: 100%">  <tr>   <td>Title :</td>   <td><input name="title" type="text" style="width: 295px;"></td>  </tr>  <tr>   <td>Entry Description :</td>   <td><textarea id="area2" name="desc" style="width: 353px; height: 127px"></textarea></td>  </tr>  <tr>  <td colspan="2" style="text-align:center"><input type="submit" name="submit" value="Submit"></td>  </tr>  <tr>  <td colspan="2" style="text-align:right"><a href="../blog.php">Back</a></td>  </tr></table><input type="hidden" name="token" value="{TOKEN}"></form>

[dsonesuk]

Well whatever method you use to insert content in <td><h3>{SITE_NAME}</h3></td> use it to insert js code in the same page

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>{TITLE}</title><link href="{SITE_ROOT}styles/templates/headerstyle.css" rel="stylesheet" type="text/css"><link href="{SITE_ROOT}blog/jquery.cleditor.css" rel="stylesheet" type="text/css" ><script type="text/javascript" src="{SITE_ROOT}jscripts/click.js"></script><script type="text/javascript" src="{SITE_ROOT}jscripts/jquery.js"></script><script src="{SITE_ROOT}/jscripts/nicEdit.js" type="text/javascript"></script><script type="text/javascript">{JS_CODE}</script></head><body><table border="0" cellpadding="0" cellspacing="0" class="header"><tr><td><h3>{SITE_NAME}</h3></td></tr></table>

[bigjoe11a]

and last here's my class that I use for my templates.

class Page {    var $page;    var $_rootref;    function Page($template) {	    if(file_exists($template)) {		    $this->page = join('', file($template));	    }	    else {		    die('Template file ' . $template . ' not found.');	    }    }       function parse($file) {	    ob_start();		    include($file);		    $buffer = ob_get_contents();		    ob_end_clean();	    return $buffer;    }    function replace_tags($tags = array()) {	    if(sizeof($tags) > 0) {		    foreach ($tags as $tag => $data) {			    $data = (file_exists($data)) ? $this->parse($data) : $data;			    $this->page = eregi_replace('{' . $tag . '}', $data, $this->page);		    }	    }	    else {		    die('No tags designated for replacement.');	    }    }    function output() {	    echo $this->page;    }}

So I don't know, The class your using may not handle the templates the same way mine does.

[bigjoe11a]

Well whatever method you use to insert content in <td><h3>{SITE_NAME}</h3></td> use it to insert js code in the same page

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>{TITLE}</title><link href="{SITE_ROOT}styles/templates/headerstyle.css" rel="stylesheet" type="text/css"><link href="{SITE_ROOT}blog/jquery.cleditor.css" rel="stylesheet" type="text/css" ><script type="text/javascript" src="{SITE_ROOT}jscripts/click.js"></script><script type="text/javascript" src="{SITE_ROOT}jscripts/jquery.js"></script><script src="{SITE_ROOT}/jscripts/nicEdit.js" type="text/javascript"></script> <script type="text/javascript">{JS_CODE}</script> </head><body><table border="0" cellpadding="0" cellspacing="0" class="header"><tr><td><h3>{SITE_NAME}</h3></td></tr></table>

sorry, I don't have that option to use $TagContent->set('JS_CODE','?'); into my template

[bigjoe11a]

Here's how I setup the template page from above

$pageview = new page('addentry.html');$pageview->replace_tags(array('TOKEN'	   => $token,'BID'		 => $_GET['bid'],));$pageview->output();

[bigjoe11a]

Ok, well that didn't work, What I tried to do was add the jscript code right to the page. Now I can get the nicedit to work. It's just I still get the one error and I can't see the option in the drop down menu's

[bigjoe11a]

look at this. This is where I just it from the page it self., The textarea works. and I don't know why, but the error is gone too. So I don't know. any way I still can't see the options in the drop down menu's http://toppersbbs.dtdns.net/mapnet/blog/addentry.php?bid=20 don't worry about the undefined error's you will get, they are just because your not logged in.

[dsonesuk]

you can't just add

$pageview = new page('whatever.html');$pageview->replace_tags(array('TITLE' => $row['title'],'SITE_NAME' => $row['site_name'], 'JSCODE' => 'bkLib.onDomLoaded(function() {new nicEditor().panelInstance(\'area1\');new nicEditor({fullPanel : true}).panelInstance(\'area2\'); });'));$pageview->output();

note this is a rough guess how this works Or add th js code to a table field so it appear to a specific page then use 'JSCODE' => $row['page_js_code']

[bigjoe11a]

Ok, well now that works. It's just again the error is gone and I have no idea how. I still can't see the items to the drop down menu's http://toppersbbs.dtdns.net/mapnet/blog/addentry.php?bid=20