FCKeditor with Adobe DW CS3 ADDT

Hey Gunter - Thanks for the support.

Hi Alfonso - I believe that Gunter has explained admirably the situation. However I shall attempt to ellaborate and no doubt Gunter may add his 2 bob's worth as well.

As Gunter explained, ADDT is "Adobe Dreamweaver Developers Toolbox" which is the replacement for Interakt's product known as MX Kollection. KTML was Interakt's textarea editor product. Both KTML and MX Kollection were supplied as Dreamweaver Extensions. MX Kollection is a collection of PHP/MySQL tools that provides "designers" with some sophisticated capabilities that would otherwise need the skills of experienced "developers" in order to create sites with functionality beyond what Dreamweaver can produce "out of the box". The combo of KTML and MX Kollection were a very powerful asset and were built for use with Dreamweaver 8.

When Adobe acquired Interakt late last year, they made some changes to the product lineup and in the process dropped KTML and reworked MX Kollection which they released under the ADDT brand for Dreamweaver CS3, the current iteration of Dreamwever released earlier this year by Adobe. Thus, "designers" with KTML/MX Kollection who want to stay up-to-date with the replacement of MX Kollection under DW CS3 no longer have the benefit of having at their disposal a Dreamweaver Extention with the functionality of KTML. We have ADDT but no longer have an editor. Thus many of us elected to search for alternatives and FCKeditor looked an obvious choice along with tinyMCE. However neither are Dreamweaver Extensions which can put off those who are not comfortable with setting up the editors manually. Also, neither editor offers the added integration with Adobe's ADDT and both have their limitations.

Now, Alfonso, you made the point that we should seek to find "someone that works in that environment that has a working solution". Well, Gunter is that someone and the nearest he has is tinyMCE with its limitations. My original post here was to see if there was any chance of finding someone within the FCKeditor community that may have a solution to the problem I alluded to, or offer some suggestions. Better still, perhaps this may encourage the FCKeditor folk to expand their opportunities with Adobe and create an Extension that can act as a viable alternative to the defunkt KTML within the new ADDT environment. If there is interest then folks like me (and possibly Gunter) are willing to participate.

If there is no interest in creating an Extension, then how can we explore the problems we face integrating FCKeditor with ADDT to see if the limitations can be overcome.

Regards,

Hi Fred, Gunter & Alfonso

I just want to say thanks for everyone picking up the issue and helping out with suggestions and ideas.
Will be looking forward to getting a solution and will be happy to do anything I can as a humble "user" to help out.

Gunter - I thought that your earlier suggestion was helpful, but then I discovered that on one of the forms I had, there are three text areas and only one of these needed an Editor. Thats a good point about different directories for media uploads and I do have that situation in a number of sites. One other thing to consider is that when we add an instance of FCKeditor, to a Required Field, the required field prompt next to the Label is lost in the Dynamic Form. I seem to recall however, that if the field is left blank, ADDT puts up a prompt when the page gets reloaded.

Regards,

Frederico

Many thanks for your interest and positive support. I look forward to adopting and extolling the virtues of FCKeditor once I have had a chance to test out the new functionality.

Best regards,

Hi Ansel

Will get back to you with an example from the site I am currently working in in about an hour. Your post came thru to me just as I was leaving the office.

Cheers for now.

Hi Ansel

I am assuming that you are using ADDT with a PHP/MySQL server model. So my comments apply to that situation. I will not be using the actual text area as I have not yet experimented with that approach. Rather I will be replacing the text area with php code.

The first thing you need to do after downloading FCKeditor is to familiarise yourself with the documentation. It is quite extensive and you need to put in a bit more time than you would with KTML to come to grips with how to use it.

When using FCKeditor in place of KTML you need to do a small amount of PHP and JavaScript hand coding. If you are not familiar with PHP or JavaScript, dont worry. We will go thru the nits and grits and make it as easy as possible - I have to say that because I am not a programmer as Gunter probably knows.

Once you have downloaded and extracted the zip file you will find a directory called unsurprisingly "fckeditor". I suggest that you create a copy of this directory for your site and rename it to FCKeditor which is what the code will be looking for once you have installed it into your site. Within the FCKeditor directory is another directory called _samples. I suggest that at some point you get familiar with these files and examples. But for now, you can actually delete the _samples directory.

Now you are ready to place this new FCKeditor directory into your site directory. So, copy/paste the FCKeditor directory into the root level of your site.

At this point we can start to look at the .php file that has the textarea which is to be used by the FCKeditor. so open up that file. Typically, At on line one of that file your would have a php require_once call to your connection file. You need to insert a new line after that and add an include statement for the FCKeditor's php setup file. In my case I have the following:

<?php require_once('../../Connections/connMojos.php'); ?>
<?php
include("../../FCKeditor/fckeditor.php") ;
?><?php
// Load the common classes
require_once('../../includes/common/KT_common.php');

// Load the tNG classes
require_once('../../includes/tng/tNG.inc.php');
.....
.....
.....

Note that you need to have the full path to your FCKeditor directory defined here in line 3. The rest is ADDT associated code which you may already know.

At this point we can go to the code where the textarea is that will be used by FCKeditor. Because I have replaced the text area with php code I have simply commented out the text area HTML and the ADDT/PHP references within it. The following shows you my original textarea that has been commented out plus the PHP code that calls FCKeditor.

 
            <!--
            <textarea name="pageContent_pag_<?php // echo $cnt1; ?>" id="pageContent_pag_<?php // echo $cnt1; ?>" cols="50" rows="5"><?php // echo KT_escapeAttribute($row_rspages_pag['pageContent_pag']); ?></textarea>
            -->
            <?php
   $oFCKeditor = new FCKeditor("pageContent_pag_$cnt1");
   $oFCKeditor->BasePath = '../../FCKeditor/';
   $oFCKeditor->Value = $row_rspages_pag['pageContent_pag'];
   $oFCKeditor->Width = '555';
   $oFCKeditor->Height = '400';
   $oFCKeditor->ToolbarSet = 'pageContent';
   $oFCKeditor->Create();
            ?>
            <?php echo $tNGs->displayFieldHint("pageContent_pag");?> <?php echo $tNGs->displayFieldError("pages_pag", "pageContent_pag", $cnt1); ?> 

OK, so lets step thu this a section at a time.

Firstly, field in my database that contains the input is pageContent_pag.

Next lets go thru the PHP code:

The first line: $oFCKeditor = new FCKeditor("pageContent_pag_$cnt1");
defines a new instance of the editor. Now you may know that ADDT allows the user to select multiple records from a Dynamic List so that mustiple recoreds can be edited or created within one page by multiple instances of the Dynamic Form. ADDT keeps track of these multiple instances by a counter and is referenced by the variable $cnt1. So this counter's value is included with the reference to the FCKeditor instance as shown. I have just last week discovered the significance of this code shown here. Sadly I had not figured out how to code this correctly until then. This is important to have coded correcly because without it you would have a problem when you have the situation where you or your client selects multiple records from the ADDT Dynamic List.

The next line: $oFCKeditor->BasePath = '../../FCKeditor/';
establishes the path to the editor that the script needs to have defined. It is the full path as referenced earlier at the beginning of the page's code.

The next line: $oFCKeditor->Value = $row_rspages_pag['pageContent_pag'];
holds the value of the field from the reecordset. My record set is rspages_pag.

The following lines set the width and height of the area for the editor.

These lines are followed by a reference to a custom toolbar for the editor instance. This is where we start to look at the fckeditor.js file.

If you do not setup a custom toolbar the editor instance will use the default toolbar set which is just about every bell and whistle that the thing can do. So how do we setup a custom tool bar ? Navigate to the FCKeditor directory and at the top level you will find the fckeditor.js file. My copy is Version 2.5.1 of the editor so on line 96 I have the definition of the Default ToolbarSet. The documentation gives some advise on how to create a custom toolbar but for the sake of this exersize I will include my custom ToolbarSet for this editor instance:

FCKConfig.ToolbarSets["pageContent"] = [
   ['Source','-','Cut','Copy','Paste','PasteText','PasteWord'],
   ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
   ['Link','Unlink','Anchor'],
   ['Image','Table','-','About'],
   '/',
   ['FontFormat','Bold','Italic','Underline','SpecialChar','-'],
   ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull']   // No comma for the last row.
] ;

If you have a number of files that use the FCKeditor then there is a good possibility you may want to have alternative customisation. You can add additional custom ToolbarSets. I add mine at the bottom of the fckeditor.js file.

Now, that just about gives you enough to setup a FCKeditor inside an ADDT Dynamic Form as an alternative to using MX Kollection with KTML. There are a few other points that I usually have to take care of though so I will cover them here.

There is a small selection of skins available for the editor and you can define the skin to be used in the fckeditor.js file. Around line 44 or 45 is where you can define the path to the desired skin. This example calls the silver skin:

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

The last point I will cover here is how to customise the styling of the content of the text displayed by FCKeditor in the replacement textarea. For this you need to do two things: setup an ID for the contant and then edit the appropriate CSS file. To setup an ID you have to set a value for like this:

FCKConfig.BodyId = 'fckWindow' ;

In my fckeditor.js file I have edited the line 169 by adding the value "fckWindow". It is possible to use the css file you have defined for the admin section of your site, or you can edit the default FCKeditor css file for the iframe page used by FCKeditor. In my example, I have chosen the latter and have edited the file FCKeditor/editor/css/fck_editorarea.css. There I have set the font family by editing the body tag styles and added the following:

#fckWindow {
   font-size: 12px;
}
#fckWindow h1 {
   margin: 0 0 1.0em 0;
   font-size: 14px;
}
#fckWindow h2 {
   margin: 0 0 6px 0;
   font-size: 13px;
}

Well, I hope that gives you a good start. If I can help further just let me know.

Hi Ansel

Glad to help out.

I noticed that this does not use the 'replace all text areas' feature - although your instructions must be a more precise way to do this do you not recommend using that feature?

Sorry, I thought I covered that. So far I have not attempted to use this new feature. Need to get current job finished first. The lack of KTML keeps causing me great pain as I am sure it will do for many others. However, despite my earlier vow to drop Dw CS3 I am persisting with the best alternative so I hope my efforts can be of some help.

I did have trouble incorporating the script for your custom tool set. I could not find where in the existing fckeditor.js file I should insert your script. I believe I am using 2.5.1 of the file but there is no definition of a default toolbarset at line 96. Am I looking in the wrong place?

I usually add my custom toolbars at the end of the file. That way I cause the least changes to the file's line numbering. Just create your new toolbarset along the lines of what is provided either in my example or the given examples.

Regards,