Jørn Wildt

I have been working on installing and testing the latest version of the Xinha fork of HTMLArea3 with Pagesetter 6.1.0 and PostNuke .750.

This how to will setp you through replacing the HTMLArea30 editor currently in Pagesetter with the latest Xinha version. The downloads include the ExtendedFileManager for adding pictures to your pages (in additon to using Photoshare) from an image directory on your server as well as a properly functioning full screen editor.

The Xinha project has taken up support of the original HTMLArea3 code and has fixed many bugs and there are new plugins available. I have posted the necessary files for download on our web site. This is a simple swap for the HTMLArea30beta directory and no other Pagesetter files are harmed in this transplant.

Before starting this process please, please, please rename your HTMLArea30beta directory. Do not erase your current HTMLArea30beta until the new code works. You've been warned.

Step 1: Download the gzip or zip file from our web site onto your server or your local workstation.

Step 2: Rename your HTMLArea30beta directory (You read the above warning, right?)

Step 3: Unpack the new files.

For users installing from your server. Move/copy the gzip or zip file into your modules/pagesetter/guppy directory. Now extract the file into the HTMLArea30beta directory.

Use 'tar xvfz HTMLArea30beta.tgz' or 'unzip HTMLArea30beta.zip'.

You may need to set file ownership depending on your hosting setup.
Example: chown -R admin4:admin4 HTMLArea30beta

For users installing using ftp. Unpack the gzip or zip file onto your local workstation and ftp the HTMLArea30beta directory into your modules/pagesetter/guppy directory.

Step 4: Edit the ExtendedFilemanager configuration file to point to your base image directory and specify the image manipulation program to use.

The file to edit is

modules/pagesetter/guppy/HTMLArea30beta/guppy/plugins/ExtendedFileManager/config.inc.php.

Make the necessary changes for your server set up. For example I use image_store on the web root to store images used on the site. I also use ImageMajick to size thumbnails, etc. so I edit the appropriate fields.

Step 5: Add editorsetup.js to your publications to extend the editor functionality and enable the ExtendedFileManager for uploading images as well as the Full Screen Editor plugin. Go into your pagesetter/publications folder and create a folder for each publication type you which to use the features with. Make sure the folder is named exactly the same as your pub type name. Then create a new file in each folder called editorsetup.js.

Insert the following code into editorsetup.js and save the file.

// Load various plugins on load of the setup script
HTMLArea.loadPlugin("FullScreen");
HTMLArea.loadPlugin("ExtendedFileManager");
// This function is called (if it exists) after the editor configuration is created,
// but before the editor itself is created

function HTMLAreaConfigSetup(config)
{
// Here you can call config.registerButton, change the toolbar, and much more ... see HTMLArea's own documentation
config.hideSomeButtons(" fontname fontsize ");
}


// This is called with the editor right after it has been created
function HTMLAreaEditorSetup(editor)
{
// Register the plugins
editor.registerPlugin(FullScreen);
editor.registerPlugin(ExtendedFileManager);
}


In my editorsetup.js I have removed the 'fontname' and 'fontsize' buttons from the default editor toolbars as I do not let my users change these options on pages they create. You can, of course, initialize and use any of the other plugins as you see fit. Many other plugins are included in the download. I have not fully tested all of them so you are on your own. I will tackle SpellChecker using the new PHP backend instead of the current Perl backend and hopefully post how to use this plugin soon.

Any questions please post here or on our forum at imijit.net and I will do my best to answer them. I have not tested this on Windows or using shared hosting setups (we run our own servers). You may need to make changes to the way the URL's and base directories are specified in the ExtendedFileManager config file to get it to see your image folder.

You can download the HTMLArea3/Xinha files on our web site http://imijit.net , no registration required, just go to Downloads.

More information on the Xinha project can be found at http://xinha.py…on-hosting.com.

I did this only because I needed to fix some problems with the current HTMLArea3 implementation that Pagesetter uses and I needed the additional image insert and full screen capability and I know J?rn has more important things to do than scratch my itch.

Hopefully this is beneficial to someone else.

-- Unixace


[Edited on 15/5/2005 by unixace]

Thanks for the efforts Unixace.

I'm still having some problems though. I followed your instructions very closely. Renamed the old folder to ..._old and uploaded the new one. Made all the necessary changes to folder structure, created the editorsetup.js file and copied to all new folders. Edited the config file for ImageManger.

Now when I open a publication to edit I still have the font name and size available (I wanted to disable these as well) the insert image button still has the old functionality (I only have GD available so changed that also) and there is no full screen button.

Using the About button the only plugins recognised are ContextMenu, CSS and Table Operations.

I have cleared the caches in pagesetter and pnRender.

Have you got any further ideas?? Postnuke 0.75 and Pagesetter 6.1

Thanks, Scott

[Edited on 15/5/2005 by sparkin]

Okay, my bad.

My editorsetup.js script was missing the initialization for the ExtendedFileManager to override the built-in image insert function.

See corrected version below. I still do not why you would not get the modified buttons or why you have the other plugins functioning unless you added them to the script. I only show TableOperations and FullScreen besides the ExtendedFileManager. Sounds like your editorsetup.js is not being processed.

Scott

Updated sample code for editorsetup.js (this is from a working site)


// Load various plugins on load of the setup script
//HTMLArea.loadPlugin("SpellChecker");
HTMLArea.loadPlugin("FullScreen");
HTMLArea.loadPlugin("ExtendedFileManager");
// This function is called (if it exists) after the editor configuration is created,
// but before the editor itself is created

function HTMLAreaConfigSetup(config)
{
// Here you can call config.registerButton, change the toolbar, and much more ... see HTMLArea's own documentation
config.hideSomeButtons(" fontname fontsize ");
}


// This is called with the editor right after it has been created
function HTMLAreaEditorSetup(editor)
{
// Register the plugins
// editor.registerPlugin(SpellChecker);
editor.registerPlugin(FullScreen);
editor.registerPlugin(ExtendedFileManager);
}

That did it!!

You're a legend.

Appreciate the help.

Cheers, Scott

Great work. Will try that as soon as there's a little more time left :).

cool! i am exited to test xinha.

edit:

wow... the replacement is really simple.
can you confirm, that xinha has still trouble displaying two html areas in one setup?
in one pubtype i worked, in another it didn't.

but overall... more plugins, solved bugs... hope xinha becomes an official repleacement for htmlarea in pagesetter.

[Edited on 15/5/2005 by Andreas]

[Edited on 15/5/2005 by Andreas]

Andreas,

I just created a new pub type with one string field for a title and two html fields for page text and page notes and have no problem with two editor areas.

If you wan't to export your pub type and send it to me I will be glad to test it on my setup and see if it works here. That will narrow down the areas to look at.

-- Unixace

I'm *very* glad to see a continuation of HTMLArea. So expect to see Xinha included in the future - unless someone tells me it's a bad idea.

J?rn,

I too am glad to hear that you are interested in implementing Xinha. I didn't want to jump the gun but I really needed some of the plugins that Xinha supports to work right now.

Any assistance I can be please let me know.

One thing I think is needed is a a global editorsetup.js that is used if there is not a publication specific version. I was getting ready to look at where you grab the publication specific version and see if I can't quickly add the ability to look for a global/default version if one is not found. I always hate to hack your code because then I have to remember to change it each release. :)

Now if I can just figure out how to get your HTMLArea/Xinha implementation to work site wide... Hmmm...

Please keep up the good work. I'll try to get another "dinner" donation in this month.

Scott

hi unixace,

maybe i was wrong. at least i couldn't reproduce the problem with 2 html-fields in one publication.

but i'd like to strongly support your following suggestion:


did you add it to the feature request list?

Glad your "problem" went away. Don't you hate transient problems. I prefer totally broke. Easier to fix.

No I haven't added to the feature request list yet. Guess I need to formally request using Xinha first.

Unixace

Hi,

it seems I have troubles....
I changed
$IMConfig['base_dir'] and $IMConfig['base_url'] to the actual full path
and in ExetendFileManger I had to replace
require_once('Files.php');
to the full path, also in Files.php on line 90 change to full path...

anyway... as you may have of guessed, I'm on a IIs server [Windows], and I manually uploaded a file to my images upload folder, and I can see the image...
However the the total free space doesn't change, It still is 100Mb [I've changed it to 100 :)], I can delete the manually uploaded file, I can create a folder, but uploading an image doesn't work.



The file is only 2Kb, and the folder does have write permission...

What can I do?

Thx in advance,
-Igor

Thanks unixace. I got this "fix" to work for me -- and it is AWESOME !!!

The reason I call it a "fix" is because I am using PostNuke 0.76rc4 and PageSetter 6.1.0 with FireFox ... and HTMLarea was not working at all with FireFox. Now, it works perfectly.

I highly recommend this fix for FireFox users! :cool:

IMPORTANT: Do not forget to clear all caches (pnRender, Pagesetter, and browser) after you configure all of your files.

[Edited on 10/6/2005 by alpo3]

does anybody know how to edit the standard font-family, color and size of the editing window?
i tried changeing div.htmlarea in htmlarea.css but it seems to be the wrong place.

in the xinha forum a congig.js-file was mentioned to be responsible for these settings but it's not in the present package.

cool work... do we have an ETA on a fixpackage? like drop this into your install and all files will be Xinha'ed? lol