 |
|
    |
extendDialogCommand: Plugin to extend an existing command that opens a dialog, providing the ability to execute custom code before the dialog opens and after it closes.
Maybe an example is best to clarify the purpose of this plugin: Imagine you want to allow your users to browse and insert images from both 'example/saulmade' and 'example/fckeditor', but not from 'example' itself; and you also want them not to be able to upload to 'example/fckeditor'. Your only option would be to create a new image insert plugin...
Now with the extendDialogCommand plugin you can make use of the default Image insert function, but change the fckeditor config (to make the 'Browse server' button of the dialog open a different filebrowser, which you config to open the path 'example/fckeditor'; and to disable upload) just before the Image insert dialog opens and reset it back after it closes. This modification of the fckeditor config will only happen when you click the extendDialogCommand button and will leave the default Image button intact.
See the 'Installation instructions' below to see how to config the plugin for the described behavior.
Toolbar Icon: The default icon for the triggerDialogCommand plugin is a wand (from the Silk icon set, by Mark James - http://www.famfamfam.com/). You can of course paste this wand on any icon you desire to have your users see at a glance what command is triggered by the plugin. (To do this, use the PNG version of the icon that can be downlaoded below.)
For example when you trigger the Image command, open the Image icon in your image editing program, paste the wand over it (make sure you have RGB colors). Resize both the wand and the target icon so that both are visible and save your gif. (I've already done this for you, which resulted in the icons shown aside).
Or if you want to show what extra feature you've added to the command, be creative and paste something else than a wand over the target icon...
 Download the extendDialogCommand plugin: extendDialogCommand plugin page @ sourceforge.net
Download the extendDialogCommand icon as PNG: files/wand.png
Written By Paul Moers, 2006 -
Licence : LGPL - Lesser General Public License.
Installation instructions :
- Extract the zip and copy the 'extendDialogCommand' directory to the plugins directory of your FCKeditor ('editor/plugins/')
- Edit your fckconfig.js and add the following lines (This config provides the functionality described above):
FCKConfig.Plugins.Add('extendDialogCommand', 'en');
// --- config settings for the extendDialogCommand plugin ---
// The name of the command to trigger. The command must open a dialog!
FCKConfig.EDC_commandName = 'Image';
// Tooltip of the toolbar button
FCKConfig.EDC_toolbarTooltip = 'Extended Insert/Edit Image';
// the function to execute before opening the dialog of the command
FCKConfig.EDC_dialogOpenFunction = function()
{
FCKConfig.ImageBrowserURLOriginal = FCKConfig.ImageBrowserURL;
FCKConfig.ImageBrowserURL = FCKConfig.ImageBrowserURL.replace (/filemanager\/browser\/default\//, 'filemanager/browser/extra/');
FCKConfig.ImageUploadOriginal = FCKConfig.ImageUpload;
FCKConfig.ImageUpload = false;
}
// the function to execute after closing the dialog of the command
FCKConfig.EDC_dialogCloseFunction = function()
{
FCKConfig.ImageBrowserURL = FCKConfig.ImageBrowserURLOriginal;
FCKConfig.ImageUpload = FCKConfig.ImageUploadOriginal;
}
- Modify the configuration options you just pasted to your likings.
Available plugin languages are 'en' for English and 'nl' for Dutch.
The commandName can be any toolbar command that opens a dialog, which are: 'DocProps', 'Templates', 'Link', 'Anchor', 'About', 'Find', 'Replace', 'Image', 'Flash', 'SpecialChar', 'Smiley', 'Table', 'TableProp', 'TableCellProp', 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'HiddenField', 'Button', 'Select', 'ImageButton', 'SpellCheck'
The dialogOpen and dialogClose functions can execute any code. The preset code makes the extendDialogCommand button do what's described in the example above, but just replace it by whatever you want.
- Still in the fckconfig.js file, edit your toolbarSet and add a button named extendDialogCommand (e.g. ['Image', 'extendDialogCommand', 'Flash', 'Table', 'Rule', 'Smiley', 'SpecialChar', 'PageBreak'],).
Links :
- The FCKeditor's official web site: http://www.fckeditor.net/
- The forum thread about the extendDialogCommand plugin: extendDialogCommand forum thread @ sourceforge.net
|
|
|
|
|
|
 |
ajaxPost: The plugin posts the content of the editor to the configured URL.
That's actually everything it does. It is meant to give you, the user, an easy way to get the editor's content to the server. What you do with the content is up to you. But to give you an idea I have also built a saveAdapter (PHP) that stores the content into the database. So if it's saving the content into a database that you want to do, everything is already built for you (only the query will perhaps need to be adjusted).
web2.0ishness: The plugin can be set to work without showing a dialog. When not showing a dialog the behavior will be more 'web2.0ish': While saving the editor will be disabled and a loading icon (  ) will show instead of the ajaxPost toolbar icon; On response of the server the FCKeditor will be re-enabled and the ajaxPost icon will again change. It can become a check (  ) or a cross (  ), depending on the response of the server. The success- or errormessage can be viewed as a label of the toolbar icon by hovering it. After some seconds, the icon and its label will be reset to their default.
Autosave: The plugin has been extended by Mike Tonks to provide an automatic save facility in the background, see http://greenmap.sourceforge.net/fck_demo/about.html
Download the ajaxPost plugin: ajaxPost plugin page @ sourceforge.net
Written By Paul Moers, 2006 -
Licence : LGPL - Lesser General Public License.
Server response:The server must return a XML response with a 'result' node or with a 'error' node holding the errorNumber and possible errorMessage in its attributes.
- e.g. succes :
-
<?xml version="1.0" encoding="UTF-8"?>
<adapter command="save" >
<result message="success" />
</adapter>
- e.g. error :
-
<?xml version="1.0" encoding="UTF-8"?>
<adapter command="save" >
<error errorNumber="101" errorData=""/>
</adapter>
Predefined errornumbers are:
101: No content received by server
102: Couldn't connect to database
103: Query error
104: Bad XML response
105: XML Request error
Installation instructions :
- Extract and copy the 'ajaxPost' directory to the plugins directory of your FCKeditor 'editor/plugins/'
- Edit your fckconfig.js and add the next lines :
FCKConfig.Plugins.Add( 'ajaxPost','en') ;
// --- config settings for the ajaxPost plugin ---
// URL to post to
FCKConfig.ajaxPostTargetUrl = '/yourLocation/saveAdapter/saveAdapter.php' ;
// Do we show a dialog?
FCKConfig.showDialog = false ;
- Modify those configuration options you just pasted to your likings.
Available plugin languages are 'en' for English and 'nl' for Dutch.
The Url must be absolute or relative to FCKConfig.BasePath (= 'fckeditor/editor/'). Should you place the saveAdapter code in the plugin's directory itself, you can set the Url like this: FCKConfig.ajaxPostTargetUrl = FCKConfig.PluginsPath + 'ajaxPost/saveAdapter.php' ;
- Still in the fckconfig.js file, edit your toolbarSet and add a button named ajaxPost (e.g. ['Source','DocProps','-','ajaxPost', 'Save','NewPage','Preview','-','Templates'],). Optionaly you can drop the default save button (remove the entry ",'Save'" in your toolbarSet).
Links :
- The FCKeditor's official web site: http://www.fckeditor.net/
- The forum thread about the ajaxPost plugin: FCKeditor forum @ sourceforge.net
|
|
|
|
|
|
 |
From of FCKeditor 2.3 this plugin will be implemented into the core of the editor! Thanks for the appreciation Frederico!
The description and instructions below are for older FCKeditor versions:
This plugin stretches the editor's frame to fit into the current window or toggles back to its original size. In fullsize mode, the editor will adapt to the new window size on resize of it.
Technically, the plugins does this by positioning the editor at the top left of the current page and then scrolling to that position. The body's its scrollbars are removed and is stripped from its CSS to be able to set the editor fullscreen. When the user switched back to standard size, the scrollbars and CSS are restored. The editor is positioned back at its original position and is resized back to its original size. The window scrolls to its position. Either so that the editor appears at the top of the viewPane or centered. This can be configured.
The resize functionality also lets the editor resize when e.g. the searchbar of firefox switches off or just when any browser modification is made that affects the window size....
Tested in Firefox 1.5 and IE 6.0 on Windows and in Firefox 1.0.7 on Linux.
Download the FitWindow plugin: FitWindow plugin page @ sourceforge.net
Written By Paul Moers, 2006 -
With help from Christian Fecteau -
Licence : LGPL - Lesser General Public License.
Installation instructions :
- Extract and copy the 'FitWindow' directory to the plugins directory of your FCKeditor 'editor/plugins/'
- Edit your fckconfig.js and add the next lines :
FCKConfig.Plugins.Add( 'FitWindow', 'en' ) ;
// --- config settings for the FitWindow plugin ---
// when toggling back to original size, scroll so that the editor appears centered in the viewPane
FCKConfig.FitWindow_center = true;
// should the editor auto fit to the window when it gets resized
FCKConfig.FitWindow_autoFitToResize = true;
- Modify those configuration options you just pasted to your likings. Available plugin languages are 'en' for English and 'nl' for Dutch.
- Still in the fckconfig.js file, edit your toolbar and add a button named FitWindow (e.g. ['About','-','FitWindow']). This will be the button to stretch the editor to fit the current window or toggle back to its original size.
- start clicking :)
Change the toolbar icon :
It could be that you don't like the Fitwindow icon compared to your other icons, e.g. when you use the default skin... Therefore you can download a black and white icon to replace the default FitWindow icon.
Two versions are available: 16x16 pixels and on with more space around the image so that it becomes 21x21 pixels to fit into the default skin. The default icon can also be downloaded as a 21x21 pixels version.
 FitWindow_blacknwhite_16x16.gif
 FitWindow_blacknwhite_21x21.gif
 FitWindow_color_21x21.gif
Links :
- The FCKeditor's official web site: http://www.fckeditor.net/
- The forum thread about the FitWindow plugin: FCKeditor forum @ sourceforge.net
|
|
|
|
|
|
|
Update 18-4-2007: Thierry Bothorel packed his extensions + fixes and included changes by Alan Pinstein and me, including constrain to configuarable size on upload via the manager. You can read all about it here. To this I've added the ability to specify multiple width and height sets that can be selected when uploading. Everything is packed and can be downloaded below. (The package at sourceforge is deprecated as the admin, Gerhard, does not reply on my request to update the package there)
The imageManager can be used to crop, resize, rotate and measure images on the server. And with the extensions made by saulmade, the plugin can now also replace images (more info below) and watermark (more info below) them. Also, for fast direct editing (more info below), the plugin can now be configured to open its editor directly, bypassing its manager.
All other changes and all new configuration options are described below.
The manager can be opened by clicking on its toolbar icon or by doubleclicking and image in the FCKeditor.
Please note :
- The translations with special character in it don't appear correctly, read more below
- directEdit only works with images directly under path 'base_url'. More information below.
- Unsecure behavior while watermarking can cause the target image to be deleted. More information below.
- After choosing another watermark, my first PNG suddenly had a white background. More info below.
Download the ImageManager plugin: files/ImageManager.zip
(The package at sourceforge is deprecated)
Extensions written By Paul Moers, 2006 -
ImageManager writtten by Wei Zhuo
Brent Kelly from Zeald.com patched it for FCK.
Zwergnas brought it to the sourceforge plugin page of the FCKeditor.
Licence : MIT License.
Installation instructions :
- Extract and copy the 'ImageManager' directory to the plugins directory of your FCKeditor 'editor/plugins/'.
- Edit the file 'editor/plugins/ImageManager/config.inc.php' to configure the plugin.
- The language for the plugin and to directEdit option must be set in its 'editor/plugins/ImageManager/fckplugin.js' file.
- Add the plugin to your FCKeditor by opening your 'fckconfig.js' file and update the 'FCKConfig.ToolbarSets' you're using by replacing 'Image' with 'ImageManager'; Register the plugin with the following statement:
FCKConfig.Plugins.Add('ImageManager');
- Done. (Should the toolbar icon not appear, try to clear your browser's cache)
Updating the context menu for images to use the image manager :
Copy the ImageManager icon to '/editor/skins/default/toolbar/imagemanager.gif'
edit 'editor/_source/internals/fckcontextmenu.js'
- search for 'FCKLang.ImageProperties'
- replace the string in the parameter before the above mentioned one from 'Image' to 'ImageManager'.
the line should now read: return new FCKContextMenuGroup( true, this, 'ImageManager', FCKLang.ImageProperties, true ) ;
This updates the _source context menu to use the image manager. However to avoid having to recompile the whole thing, also need to update the compiled versions too so also repeat the above on the following files:
- editor/js/fckeditorcode_gecko_2.js
- editor/js/fckeditorcode_ie_2.js
Change the toolbar icon :
A 21x21 pixels version of the ImageManager icon:  imageManager_21x21.gif
The ImageManager's watermark :
A red alpha-transparent ImageManager stamp: imageManager.png
FAQ :
-
Q. I can't select a watermark I configured in 'config.inc.php'?
A. This watermark is to big for the target image, it's excluded from the slection box!
-
Q. I can't edit images
A. Should editing images not work, try to switch to another image manipulation library : in file 'config.inc.php' change 'IMAGE_CLASS'.
-
Q. When I edit an image, every operation except watermark loses the image and returns the message 'No Image Available'
A. You probably have ImageMagick set as your image manipulation library ('define('IMAGE_CLASS', 'IM');') and have set the path to the binary wrong. Make sure it has a trailing slash. E.g. define('IMAGE_TRANSFORM_LIB_PATH', '/usr/bin/');
Links :
- The FCKeditor : http://www.fckeditor.net/
- Original ImageEditor sourceforge page : http://sourceforge.net/projects/imgmngedt/
- The ImageManager's license, 'MIT-License' : http://www.opensource.org/licenses/mit-license.php , http://en.wikipedia.org/wiki/MIT_license
- ImageEditor @ FCKeditor plugin page : http://sourceforge.net/tracker/index.php?func=detail&...
- ImageEditor @ FCKeditor announce thread : http://sourceforge.net/forum/forum.php?thread_id=1467574&...
- ImageEditor @ FCKeditor new features announce thread : https://sourceforge.net/forum/forum.php?thread_id=1483890&...
- Filemanager for FCKeditor with image editing capabilitys by Martin Kronstad : http://fckeditor.prosjektweb.net/
- The watermarking module of gallery2 (on which the ImageManager's watermarking code is based) : http://codex.gallery2.org/index.php/Gallery2:Modules:watermark
- ( My theme for gallery : http://www.saulmade.nl/naturetheme/ )
- Flash video about the manager (without extended features) : http://www.soderlind.no/demo/imagemanager.php
|
Additions and changes by saulmade :
-
Debugged (ImageManager @ FCKeditor didn't find language object) and extended translation
Bug : Special characters in translation string are screwed up when inserted?!? No idea why, files are all UTF-8 encoded...
Languages that are fully translated are: en (default language, doesn't need translation file) and nl
Language almost fully translated are: de, fr, nl, pl and ru (strings not translated marked with "// not translated yet")
Other languages with only little translation done: sv, no (You can copy strings from other language files to extend these translations...)
Other languages not supported yet.
-
directEdit option :
Opens the image editor immediately, bypassing the imagemanager. This option 'IM_directEdit' can be set in the head of 'fckplugin.js'.
For this option I assumed that there are no subdirectories in 'base_url' (see 'ImageManager/config.inc.php'). So images not located directly at the path 'base_url', can not be edited directly.
Changes made in 'fckEditor.js' function 'ImageManager.prototype.insert' and 'editor.php' for language object.
To allow images not directly under 'base_url', the relative path to the images must be found and passed in 'fckplugin.js' lines 119-124
-
Reload images on edit: Now reloads manager's image frame and images in FCKeditor when an image was edited and saved.
Added javascript reload in PHP check '$editor->isFileSaved() == 1' near the top in 'editorFrame.php'
-
Replace/Reupload :
Replace image by a new uploaded one. Usefull when user can't upload files, but are only allowed to edit existing files, like when you don't want to get an overcrowded image directory on your server.
Remark : When replacing without the privilege to enter a new filename, the uploaded file will be saved in the format ('jpeg', 'gif' or 'png') of the replaced image. Even when overwriting isn't allowed, the new file will take over the format.
Uploaded files can be constrained to a max width and height, see "Added config option to be able to constrain the size of uploaded files." below.
Added action button in 'editor.php' in div with id 'toolbar'.
Action button has icon 'ImageManager/img/replace.gif'
Added action to the 'actions' array in editor.js.
Action button only shows when new option "$IMConfig['allow_replace']" in 'config.inc.php' is set to true.
Copied the message div from 'manager.php' to also have it in 'editor.php'. Also copied the 'manager.css' '#message' and '#messages' CSS to 'editor.css'.
With this, a message can be shown while uploading a file. Added a function to hide the message, that 'editorFrame.php' calls onload.
Copied the 'doUpload', 'showMessage' and 'i18n' from 'manager.js' to 'editor.js'. Added function 'hideMessage' to 'editor.js'.
Note that this action doesn't work with the function 'doSubmit' but just submits the uploaded file to 'editorFrame.php'
Added '$manager->processUploads();' to 'editorFrame.php' to handle uploaded files it receives.
Let functions '_processFiles' and 'processUploads' in 'ImageManager.php' return the relative path to the uploaded file to get them to through 'editorFrame.php' into function 'processImage' in 'ImageEditor.php'. Then finally pass to function 'processAction' and rename file to generated filename.
Added config option to constrain the size of uploaded files, see "Added config option to be able to constrain the size of uploaded files." below.
-
Watermarking :
Watermark an image with the ability to position the watermark and set the opacity of it. For both the watermark and the target image, any file type can be used.
For easy positioning a positioning block can be used and to colorize the background for better visibility a coloring block is provided.
Several watermarks can be provided in the file 'config.inc.php'. Note that any watermark that is to big for the target image well be excluded.
(Unsecure behavior: When replacing an image and closing the window in the upload process, the edited image will be deleted. I programmed a warning to inform the user about that when he tries to close it at that point. The user can decide what he wants to do then... This is the best I could come up with. Preventing the window from closing is impossible and I don't know how to improve the PHP code handling uploaded files. Should someone come up with a better solution, please share: )
Remember that some nice transparency effect can be achieved through 24-bit PGN files...
(Note : The watermark will not be scaled to the target image - feel free to build such a feature ;-) )
Bug : With my online demo (below), when changing watermarks and changing back to ImageManager.png, the png will suddenly have a white background?
Added action button in 'editor.php' in div with id 'toolbar'.
Action button has icon 'ImageManager/img/watermark.gif'
Edited 'editor.css' to widen up the buttons bar a bit.
Added action to the 'actions' array in editor.js, added action clause in function 'doSubmit' in 'editorFrame.js'.
Added watermark show and hide code in function 'toggle' in 'editor.js'
Added "$IMConfig['watermarks']" in 'config.inc.php' where all paths for every watermark can be specified. When none are specified, the watermarking feature will not be visible. Note that any watermark that is to big for the target image well be excluded.
Added width and height to return from the function 'processImage' and 'processAction' in 'ImageEditor.php' to be able to use them also in CSS instead of only as HTML attributes.
PNG fix for IE from http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html . CSS behavior attached to watermark near the bottom in 'editorFrame.php'
Added warning to inform user that closing the window while uploading for the replace action will delete the original image : Added 'doUpload' event in function 'doUpload' in 'editor.php' and remove this even after upload in 'editorFrame.php'
Added layer with the image being edited as its background to use instead of the image itself for watermarking. Div with ID 'background' just above span with ID 'imgCanvas'. Added CSS to vertically center layer, in the head of 'editorFrame.php'.
In this layer, the watermark can be moved, thanks to the Drag 'n Drop script 'wz_dragdrop.js v.4.85' from Walter Zorn, http://www.walterzorn.com/ . Added doctype to 'editorFrame.php' needed for the script to work, but only in IE. In Firefox, the doctype made the 'wz_jsgraphics' to stop functioning... :-/
The watermark is constrained to the borders of the layer (i.e. the image being edited) thanks to the function 'verifyBounds' in 'editorFrame.php' gratefully copied from Gallery2's watermarking module ;-)
(Replaced 'event' by 'window.event' on line 43 and 45 in 'EditorContent.js')
PHP watermarking has built in three methods to be able to handle any filetype. Two methods just use the standard functions 'imagecopy' and 'imagecopymerge' and the third method uses the watermarking API of Brian Vaughn ( http://boynamedbri.com/ , http://portfolio.boynamedbri.com/ , @ devshed http://www.devshed.com/c/a/PHP/Dynamic-Watermarking-with-PHP/) Only extended with small changes to place the watermark on a given coordinate and to only handle watermark area.
Added watermark choosing selection box to watermark controls to be able to choose between several watermarks. This box only show the watermarks that fit into the target image or replaces the watermarking controls with a warning when no images fit. When the first image doesn't fit, the first available image will show up by default when watermarking. : select box in 'editor.php', populated by code in 'editorFrame.php' and onchange changes watermark through function 'changeWatermark' in 'editor.js'. Swap to first available image when javascript var 'firstWatermarkItemUnavailable' was set by PHP populating code, all in 'editorFrame.php'.
Extended the 'slider.js' code to allow multiple sliders on one page. Changed slider input ID to "'sliderinput' + actionname", so the quality input box of the save action its ID was changed from 'quality' to 'sliderfieldsave'. Changed the slider CSS to be assigned with classnames instead of IDs and of course added classNames to each element.
Added watermark opacity slider to change opacity of watermark : slider in 'editor.php', changes watermark's opacity through added code in 'slider.js' finally with function 'changeWatermarkOpacity' in 'editor.js'
Added watermark positioning block to watermark controls to easily position the watermark at the start, middle or max x or y: positioning block in 'editor.php' with 'moveWatermark' function in 'editor.js'.
Added watermark background coloring block to watermark controls to set the background to a specific color or to a grid when the watermark is hard to see on the target image : coloring block in 'editor.php' with 'colorWatermarkBG' function in 'editor.js'.
-
Added alt/titles to Measurement labels
Javascript in 'editor.php' below the label HTML elements.
-
Removed 'Cancel' buttons on control panels where they were useless
From control panel in 'editor.php' for replace, watermark, rotate and save.
-
Added processing message for every image edit message.
Function 'doSubmit' in 'editorFrame.js'
-
Now hiding action buttons and active action's controls onclick of the action's 'OK' button, and showing everything back after processing the action.
Hiding in function 'doSubmit' in 'editorFrame.js' and showing in 'editorFrame.php'
-
Images for the marker button have been updated.
'ImageManager/img/t_white.gif' and 'ImageManager/img/t_black.gif'
-
Added config option to set replace privilege : "$IMConfig['allow_replace']" in 'config.inc.php'.
Affects the display of the Replace action button in 'editor.php', true will show it, false will hide it.
-
Added config option to specify watermarks to use : "$IMConfig['watermarks']" in 'config.inc.php' where all paths for every watermark can be specified. When none are specified, the watermarking feature will not be visible. Note that any watermark that is to big for the target image well be excluded.
-
Added config option to set ImageManager in demo mode, disallowing to save : "$IMConfig['demo']" in 'config.inc.php'.
Affects the display of controls in Div with id 'tools_save' in 'editor.php' or just writes a demo notification.
-
Added config option to be able to constrain the size of uploaded files. A max widht and height can be specified. Setting the values to zero or leave them empty allows any size : "$IMConfig['maxWidth']" and "$IMConfig['maxHeight']" in 'config.inc.php'
-
Added config option to control whether files can be deleted : "$IMConfig['allow_delete']" in 'config.inc.php'.
Affects the display of the trash icon in 'images.php'.
-
Added config option to control whether a new filename can be specified when saving edit changes or whether we just overwrite on save : "$IMConfig['allow_newFileName']" in 'config.inc.php'.
Affects the input box with id 'save_filename' together with the select box with id 'save_format' in 'editor.php' and function 'processAction' in 'ImageEditor.php'
-
Added config option to control whether files can be overwritten or that a variant of the filename is created for saving when the file already exist (this setting only applies when the user can enter new filenames for saving) : "$IMConfig['allow_overwrite']" in 'config.inc.php'.
Affects the input box with id 'save_filename' in 'editor.php' and function 'processAction' in 'ImageEditor.php'
|
|
|
|
|
 |
LFO Browser for FCKeditor : The LFO browser is a custom plugin and file browser that allows you to save and open files right off of the web server where your FCKeditor is located on.
Update 10-04-2007 fix:
HTML indent added a slash in front of single and double quotes.
Update 30-12-2006 adding new features and a fix :
- ScriptImage option: Show javascripts as images. Scripts not shown as an image risk to be accidentally deleted when editing text. (Each set of scripts, i.e. script that succeed each other, will be shown as one image)
- Locale string was missing - fixed
- Different folders possible per filetype (File/Image/Flash/Media)
- Absolute paths option
- Decode and Encode functions can be set for filenames
- Option to safe nicely indented HTML
Publishment 19-06-2006 :
The LFO browser has been extended with several features built by Saulmade :
A configuration option to allow or deny specific files or folders (read more about it below); The ability to load selective content/specific parts of files (more about it below); and the historySave feature to keep a history of a file (more info below). Some other small changes have been made too (read about it below)
It should be noted that the LFO plugin uses a custom file browser called the LFO browser. It cannot be used with any other browser. Additionally, the browser is only written in PHP so it can only be used on systems that have PHP.
Tested in Firefox 1.5+ and IE 6.0+ on Windows.
Download the extended LFO browser: files/LFO_extended.zip
Extensions written By Paul Moers, 2006 -
LFO Browser written by greggp
The LFO browser is a modified version of the default browser that comes with FCKeditor. However, the file structure browser uses is quite different. This plugin as designed to allow for a loose structure that can accomodate file editing for many different projects. Simply put, all file browsing starts at a top level that you specify and users can put whatever they want wherever they want. Of course, there are restrictions on file types that you can configure.
Licence : LGPL - Lesser General Public License.
Installation instructions :
- Extract and copy the 'filemanager' and 'plugins' directory to the editor directory of your FCKeditor 'editor/'.
- Open your editor configuration file 'fckconfig.js' and follow the next steps :
- Register and configure the plugin by copying the lines below into your config file :
FCKConfig.Plugins.Add( 'LFO','en') ;
// --- config settings for the LFO plugin ---
// Prevent actual saving of documents
FCKConfig.LFO_demo = false ;
// the default url/text to appear in the path input box
FCKConfig.LFO_defaultUrl = "enter url or click browse...";
// Make paths absolute
FCKConfig.LFO_makePathsAbsolute = true ;
// Can the user enter a file path or browse the server or only overwrite the original file.
FCKConfig.LFO_enterFileName = FCKConfig.FullPage;
// filename decode function. The function must have one attribute, being the filename and must return the decoded filename. Leave this option empty ("") for no decoding.
FCKConfig.LFO_decodeFunction = function(){return unescape(arguments[0])} ;
// filename encode function. The function must have one attribute, being the filename and must return the encoded filename. Leave this option empty ("") for no encoding.
FCKConfig.LFO_encodeFunction = function(){return escape(escape(arguments[0]))} ;
// Use the ability to load specific parts of the HTML filecontent
FCKConfig.LFO_selectiveContent = true ;
// -- config settings for the selectiveContent feature --
// Show the option 'load all' in the part selection dialog
FCKConfig.LFO_fullPage = FCKConfig.FullPage; // lowercase 'f' of LFO_fullpage !
// the prefix of your custom tags
FCKConfig.LFO_partPrefix = "editable_" ;
// Show javascripts as images? Scripts not shown as an image risk to be accidentally deleted when editing text. (Each set of scripts, i.e. script that succeed each other, will be shown as one image)
FCKConfig.LFO_scriptImage = true ;
// -- config settings for the scriptImage feature --
// The image to replace javascripts with is available in the LFO plugin directory. Several (skin) versions are available. Please check that directory and see what scriptImages are available, then specify the path to the one you want to use so that FCKeditor can find it.
FCKConfig.LFO_scriptImagePath = FCKConfig.BasePath + "plugins/LFO/scriptImageSilverNarrow.gif" ;
// Set historySave file array in the connector config file
// -- config settings for the historySave feature --
// Shift the images used in the content too?
FCKConfig.LFO_shiftImages = true ;
// Shifted images can get an appendix to their name to prevent overwriting of files
FCKConfig.LFO_shiftImagesAppendix = "ShiftedImage" ;
// Clean indented HTML
FCKConfig.LFO_cleanHTML = true ;
// -- config settings for the cleanHTML feature --
// set the string to use as indenting. (e.g. " " (spaces) or "\t")
FCKConfig.LFO_cleanHTMLIndent = "\t" ;
- Add the plugin's buttons to your toolbarset, e.g. :
FCKConfig.ToolbarSets["yourToolbar"] = [
['Source', 'DocProps', '-', 'Save', 'LFOGetFile', 'LFOSaveFileAs', 'LFOSaveFileHistory', 'Preview', '-', 'Templates'],
...
Optionaly you can drop the default save button (remove the entry ",'Save'" in your toolbars).
- Modify those configuration options you just pasted to your likings. Available plugin languages are 'en' for English and 'nl' for Dutch. If you plan on editing whole pages, search for the setting 'FCKConfig.FullPage' and set it to true.
-
Make the LFO browser the active one by changing the associated lines :
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/LFO/browser.html?
Connector=connectors/php/connector.php' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/LFO/browser.html?Type=
Image&Connector=connectors/php/connector.php' ;
-
Now open the file '/editor/filemanager/browser/LFO/connectors/php/config.php' and configure it to fit your needs. For every option an explanation is contained within the file.
-
Done. (Make sure that your user file store is configured for read/write)
Change the toolbar icon :
21x21 pixel versions of the icons:
 LFOGetFile_21x21.gif
 LFOSaveFileAs_21x21.gif
 LFOSaveFileHistory_21x21.gif
Links :
- LFO Browser's own project page : http://sourceforge.net/projects/lfobrowser/
- LFO Browser FCKeditor thread [Open Discussion] : http://sourceforge.net/forum/forum.php?thread_id=1382462&forum_id=257179
- LFO Browser FCKeditor thread [Version 2.0] : http://sourceforge.net/forum/forum.php?thread_id=1386668&forum_id=379487
- Filemanager for FCKeditor with image editing capabilitys by Martin Kronstad : http://fckeditor.prosjektweb.net/
- MCPUK File browser by Grant French's - File Browser eXetension Project [Unofficial] : http://mcpuk.net/fbxp/
- KFM - Kae's File Manager: http://kfm.verens.com/
Allow or deny specific files or folders :
In addition to the available allow and deny arrays, these new options give you the ability to allow or deny individual files and folders.
These settings will not override the settings/arrays per filetypes, but they will work together with them to only show an intersection of both.
These settings can be configured below in the 'editor/filemanager/browser/LFO/connectors/php/config.php' file.
To deny all, one single element must be set for the denyArray with an asterisk ('*') wildcard in it: array('*')
To allow all, leave the allowArray empty or use an asterisk wildcard the same way as with the denyArray.
The settings work because of the changes I've made to 'editor/filemanager/browser/LFO/connectors/php/commands.php'.
Both the 'GetFolders' and the 'GetFoldersAndFiles' their check for letting files or folders pass has been extended to reckon with the new settings.
selective content - loading specific parts :
This feature adds the ability to only load specific part of the HTML filecontent.
The editable content of a file must be wrapped in custom tags with a configurable prefix (default 'editable_') and a describing nominator. E.g. <editable_example> content </editable_example>.
When loading a file, all editable content their nominators will show in a dialog: the part selection dialog. On click of a nominator, that part will be loaded. In our example that would give 'example' as an eligible part which would load ' content ' when chosen.
On save, the edited part will be inserted in its custom tag and the whole content will be saved.
The custom tags are case sensetive!
No attributes or spaces are allowed in the custom tags themselves!
Everything of the file can still be loaded if this feature is configured to off (FCKConfig.LFO_selectiveContent = false) or by choosing 'load all' in the part selection dialog.
The feature is written in javascript, by altering 'LFO_GetFile.html' and 'LFO_SaveFileAs.html', no connector code is altered...
Options :
- Set the feature to on or off with 'FCKConfig.LFO_selectiveContent'.
- The 'load all' choice in the part selection dialog is optional. This will only be available if the FCKeditor config setting 'FCKConfig.LFO_FullPage' is set to true. This setting by default copies the value from the overall config setting for editing whole docs 'FCKConfig.FullPage', but can be set to true or false independantly too (but not adviced).
- Saving saves the loaded part into its document, without giving the option to enter another filename. The dialog otherwise showing the file path input box and the server browse button, just show 'saved'. This is dependant on the option 'FCKConfig.enterFilename' that by default also copies the value from the overall config setting for editing whole docs 'FCKConfig.FullPage', but again can be set to true or false independantly.
- 'FCKConfig.LFO_demo = true' prevents actual saving, but shows a message in the saving dialog telling the it's a demo. This also denies uploading of files and creating of files or directories.
- The prefix to use in your custom tags: 'FCKConfig.LFO_partPrefix = "editable_"'
historySave :
This feature allow you to keep a history of any file.
historySave shifts all specified history files of the file being edited one step backwards and saves the editor content to its file. So when starting a new version, load your file and before or after editing it, click the 'History Save' button. Do this only once per version! When you want to make changes without adjusting the history, just use the standard 'Save' button. Images used in the historyFiles can be shifted too.
Only 'fckplugin.js', 'LFO_SaveFileAs.html', 'commands.php' and of course the language files were extended to build this feature.
The saveHistory button sends an attribute '?historySave=true' to 'LFO_SaveFileAs.html' that (if it knows on which file we're currently working) will tell 'commands.php' to save the history also by using URL search attributes. He will also pass the config setting, so that the PHP files knows whether to also shift the images and what file name appendix to use. 'commands.php' of course, does all the actual work:
Gets the unedited content of the file loaded into the editor, along with the content of its historyFiles; saves loaded content in the newest file and shift every history file backwards, dropping the latest file. OnFail, restores with content we got earlier. OnSucces and if configured to do so, detects and shift the images used in the files. (No historyFiles have to be checked against config settings, because when they were saved on the newest file they were checked.)
Behavior :
- Only the images can be shifted along with the files' content and no other objects.
- The history can only be saved if editing a loaded file, not when content has been created from scratch.
- When saving the history failed during the process of shifting the actual files, then all files that were changed will be restored. If restoring fails, files can be lost. A solution would be dumping the unrestored fileContents to a buffer file and listing the filenames of these files along with the errorMessage, so that they can be restored manually. I didn't built this because I don't think that will happen. (restoring will only fail when writing to files that have been accessed before in the same historySave process suddenly became unavailable)
- Not sure that imageShift works on XP boxes... When renaming to existing images, the existing might have to be unlinkes first. I didn't program that!
- imageShift can only work when the images have absolute URLs and are on the server where the FCKeditor is: 'http://www.example.com/...'. Other images will be ignored which actually gives you the ability to selectively shift images.
small changes :
- Made all texts in the dialogs multilangual and added a Dutch (nl) translation file.
- A default URL (or text) can be defined to appear in the input field in the diolog : FCKConfig.LFO_defaultUrl = "enter url or click browse...";
- When saving, feedback is now echoed in the plugin's dialog instead of using alerts.
|
|
|
|
The ‘extendDialogCommand’ plugin
Download
The ‘ajaxPost’ plugin
The ‘FitWindow’ plugin
The ‘ImageManager’ plugin extensions
LFO plugin and FileManager extensions
