NP_WYSIWYG_RTE

The WYSIWYG_RTE plugin provides a real WYSIWYG interface for editing your items, included a very useful Mediamanager Popup. For editing, my newly written tinyRTE Cross-Browser Richtext editor is used. As I started with the editor project, I based the code on Kevin Roth's Cross-Browser RTE editor you can find here: http://www.kevinroth.com/rte/demo.htm To solve some problems and make the nuclues integration easier the code is now completely rewritten, retaining only some small code snippets still based on Kevin's RTE Editor. While Kevin Roth is working on a new more advanced editor (similar HTMLarea) I called my editor tinyRTE.

Editor and Plugin Features:

• Provides real WYSIWYG- Output is exactly the same as on your real page
• Multilingual (currently english and german)
• Skinable
• Mediamanager (some features also work in PHP safe_mode)
• Imageformattings in CSS
• Basic XHTML output → will be better in future
• Running without any small warning messages in Venkman Javascript debugger (Take a look what other editors produce on warning messages ;)
• Your Members can use Standard Textarea or WYSIWYG Editor
• Mediamanager also in Textmode available
• Improvements to Bookmarklet with Button Mouseover Effects and active status Button
• Option to hide extended Textarea
• Against original RTE-Editor no problems with stylesheets and images on multiple editors

For Mediamanger with Imageeditor PHP 4.2+ (older versions may work) is required, and either PHP built-in GD library, or NetPBM binary, or ImageMagick binary accessible by PHP. Binaries are the executable files for the web server. FTP extension enabled if your server is running in PHP save_mode is on.

Download Links:

• Main Package
• Mods of Nuclues core files (previous V3.2)
• Mods of <b>Nuclues 3.2</b> core files

1. Download the main package and unzip in your plugins directory.
2. Unzip the second package into a temporary folder. You will find two main folders, called “light” and “advanced”.
   • The “advanced” folder contains changed admin template files and modified bookmarklet files. I added mouseOver effects to the bookmarklet buttons. I also added the possibility to show active button (block) in order to run in Venkman Javascript debugger without any small warning message. I also made various fixes in the Javascript files.
   • The “light” folder just contains some changed admin template files.
3. BACKUP the original files that are to be replaced in the course of the update. Copy the files from the temporary folder into the nucleus root folder. The structure of the “light” and “advanced” folders is identical to the structure of the Nucleus root folder; so it should be easy to find the correct places for the updated files.
4. ImageManager can use cache for faster loading. In order to do this, you must allow write access to its cache folder. That folder is located at “your_plugin_directory/wysyiwyg_rte/ImageManager/cache”. You can do this with the “chmod 0777” command.
5. The default installation for ImageManager uses cache and uses the GD Library for image manipulation. If you want to change those settings, open the “config.php” file in the ImageManager folder and change its values. A description of how to do this is provided within the “config.php” file. If your server is running in PHP safe_mode, you will have to enter your FTP username and password in order to allow the creation of folders and images. So far, the implementation for safe_mode is only intended for basic functions. Also, you will need the PHP FTP extension to be enabled on your server. The safe_mode support will be extended in future versions. I will also add a test file that will check all of the supported features. (You can find a demo on my server that's running in safe_mode.)

The plugin provides some different options. In the !!pluginmanager!! you will found those settings:

• Path to css file To provide real wysiwyg for your site you must enter the path to your favorite css file for your website. Base is the Nucleus installroot To see this feature working i included a default css in plugin directory
• CSS classname name that will enclose your items This is very important to provide real wysiwyg. In nuclues are your items normaly enclosed with a div and the class attribut “itembody”. So you have to enter class=“itembody”. You have also the possibility to enter id instead of class. Those settings are very important, if you have a layout that use complex CSS rules.
• Enable Media Manager also in Textmode This setting will overrule the original Nucleus Mediamanger
• While your users can choose between Wysiwyg and textmode you must enter your linebreak setting. The setting from nucleus blog settings must be no.

In the !!member settings!! you can choose between three editor modes

• No Wysiwyg editor → Default editor is used
• Basic editor - only basic formattings without mediamanager
• Advanced - All features enabled

In the !!Blog settings!! you can found option to hide the extended Textarea This could be very useful if you setuped your complete website with nuclues and you have a blog with your “static” content. In this way yo need normaly no extended field. Or you have awith only short news… We can only set this as Blogoption and not as Categoryoption, while this would failed on adding a new entrie

What you see in Sourceview represented exactly the code what will be saved, nothing will rewritten in PHP. If you want more control over your output you can switch in sourceview before saving the content and nothing will changed. (But be warned, if you open this item again in the editor some things will be rewritten. The Browsers have there own rules for htmlcode. Escapially MSIE makes some very strange things with the HTML code)

To provide real wysiwyg, will the content automaticly enclosed with a div tag (e.g. <div class=“itembody”>) and removed on source view. (If you see this in source view → remove)

In most cases are Popup's provided as Layer, so this works much faster than create a new Browser Window and load a complete HTML file. (e.g. Colorpicker, Link Popup)

The Colorpicker provides a nice and useful selection of colors, but some of theme are not websafe.The websafe colorpalette have some very similar and not useful colors. For my thoughts are websafe colors no more necessary.The Colors are taken from CPick my favorite Windows Tool for this task. http://home.hccnet.nl/s.j.francke/software/previewcpick.htm You can change this in tinyRTE_setup.js ( palette array )

A basic convertion from html to xhtml, this can not do the work like tidy, but i most cases this work fine enough.A main problem of tidy is, that most users are not allowed to install tidy on there server, so i choose the way with javascript and a lot of regular expressions. In this version is the conversion very basic, but i will extend this in the future. (This is very hard and time intensive work, so i think for now its good enough).

For writing valid HTML is a gecko browser(Firefox,Moz) recommend. MSIE write very dirty code, and rewrites for this Browser are currently not ready at all.(For example: quoting from html attributes, wrong Uppercase attributes)

Font to Span conversion I found nothing in the net what is realy good working, so i have to thought for my self.. Now my first version is working fine enough and can convert somthing like this: <font color=”#00000” face=“Times”>Text 2</font>

If you have some javascript knowledge you change some settings in tinyRTE_setup.js. Take care of commas and Apostroph, otherwise the script will break. While tinyRTE is lightweight and generated on runtime, you have not so extensive possibility to customize as HTMLarea.

• Extend the fonts familys in the combobox
• Remove some formattings in formatblock and fontstyle list.
• this.rteSkin Change Skin (currently grey / default)
• this.xhtml_output true or false (if false some tags will not rewritten)
• this.xhtml_strict true or false (for future versions)
• this.msie_use_br true or false (with false MSIE makes paragraph instead br on [return]

• <p> / <br> in gecko browser on return. If you press [return] in a gecko browser, the editor will make a <br> tag and not paragraph. To solve this use the paragraph formatting option in the formatblock list.I think this is working fine enough. To solve this on input will cost a lot of code lines and memory, while a special keyboard handler must rewrite the html on the fly. If this is not ok for you, switch to FCK-editor or HTMLarea. In the default installation you Microsoft Internet Explorer have the same behave and you can change this in tinyRTE_setup.js
• Undo and redo is not working for image and link tags and some special formattings, that are not provided by the editor control(for experts - all things that inserted with surroundHTML). Instead you can use the remove tags button, in most cases this work very fine. Like above - I dont want to provide this in a better way, will this cost a lot of client side memory.( you can sitch to HTMLarea…)
• One of the main troubles is,that support from designmode for multiple editorareas is a little bit buggy in in Gecko Browser. (Gecko loose this sometimes or need a little timeout - MSIE have more stable support for this). Escapially the Bookmarklet Window make some troubles while Mozilla have problems with editors in hidden Blocks. So failes sometimes the first edit action when changed editor. In this way try it one more time. (Designmode will automaticly enabled when loosed )
• While settings for linebreak conversion not in a extra table stored are problems possible when more users working at same time. ( must thinking over if is important to fix )
• Creates javascript errors when using the popup function and also can introduce severe alignment distoritions on all pages when large content blocks or images are inserted into an article.

• Make editor so stable as possible (stability have more priority than features)
• Rewrite the code, to give the possibility to work with compressed javascript (this could decrease loading size up to 50%) A good Javascript Compressor is the packer from the genius Dean Edwards(IE7) http://dean.edwards.name/packer/
• Microsoft Word Cleanup To decrease loading time i will provide a Word Cleanup function via Plugin Popup and autodection of paste Word Html. In this way you can also have more control over the clean function. (preview with different restrectiv clean modes). Currently is this part not ready enough to publish. please stay tuned …
• Correct rewritings for XHTML strict output, while some elements not allowed. Examples <u> to <span style=“text-decoration: underline”> could be a plugin, while this need a lot of coding lines OR better a additional plugin for Tidy
• Update to support Nucleus 3.2 (fixed 20.3.2005)

Editordemo

The Media Manager based on Wei Zhuo's ImageManager Popup. The Dialogbox is heavely modified with new features, but the Image Editor is exactly the same.

The Manager provides an web interface to browse for image files (JPEG, PNG, GIF) on the web server In addition, it is also possible to upload new images and create new folders/directories (if permitted). Some of the features of the Manager are:

• Automatic generation of thumbnails.
• Cached thumbnails, regenerate only when modified.

The Editor is an web interface that provides basic image editing features:

• Crop - Remove portion of the image.
• Resize - Change the image dimensions arbitrarily.
• Rotate - Flip and rotate the image.
• Measure - Measure the image distance and angle between two points.
• Save - Save the image as JPEG, PNG, or GIF (if permitted).

Further documentation to the Imageeditor you can find under: http://www.zhuo.org/htmlarea/docs/index.html

The Dialogbox is extended with those features:

• Switch between Thumbnailview(only Images) and Detailview (Icons on the top right side)
• Upload remote Files ( so you must not save an image on your Local Harddisk and upload - just enter the url)
• Two modes: Insert media inline or as link or also combine those. (example: choose a Thumbnail Image as preview for an PDF-Flyer and enclose this with an link to the PDF-File)
• Can make a Javascript Popup like Nucleus media functions (choose “Javascript Popup” in the “Target” list)
• Additional image formattings.(border width/color, alignment, vertical/horizontal space). Those properties are in CCS style settings implemented, while some image attributes are not allowed when your doctype is HTML-strict.(border,vspace,hspace,align). Possible troubles are the alignment settings, while we must use the float attribut. Normaly there should follow a clear setting in one of next block tags (e.g. <p style=“clear:both”> ).If you dont't to this some follow the image elements can have a wrong position on the page. Must thinking over, how this could provided. Currently you must set this in HTML-Source view.
• To economize additional Textfields, the alt attribut is only the filename (you can change this later in source view)
• Now works faster while bundeled with PEAR::Cache and removed some not so necessary functions (e.g. sortable Filetable - this bloaded the Popup a lot)
• Better support for Server in PHP safe_mode

• If you placed cursor on a existing image → all properties should be parsed an show, to give the possibility to edit properties from inserted images
• Better errorhandling (Currently this is very basic and poor)
• Better support for PHP safe_mode
• some additional features for linked media (e.g. insert filesize)
• make correct HTML for different mediafiles (e.g. Flash, MP3, Video, currently are only images supported)
• Take over Nucleus Media Settings Like “Allow Upload, File Types, Prefix.. ”
• Support for Nucleus Special Image Tags (<%image(filename|88|31|title)%>)
• Support for Podcast files, using the NP_Podcast plugin (<%media(FileName|PodcastName)%>)

see Todo's

Multimedia Popup

0.2 First alpha release - 22.8.2004
0.2b Change Admintemplates for Nucleus 3.2 - 20.3.3005

Alfred “Alf mit i” Scheibl

The imagemanager is looking in htdocs/media and not in htdocs/nucleus/media. (Actually it is D:\apachefriends\xampp\htdocs\nucleus\…

Solution:

Image Manager has it's own configuration file config.inc.php which you can find in the plugin directory in the subdirectory /wysiwyg_rte/ImageManager. The configuration of the paths is starting in line 124:

$IMConfig['base_dir'] = $DIR_MEDIA.'/'; 

$pos_nuclues_dir      = strpos($_SERVER['REQUEST_URI'],'nucleus'); 
$IMConfig['base_url'] = substr($_SERVER['REQUEST_URI'],0, $pos_nuclues_dir).'media/'; 

Try to change this to:

$IMConfig['base_dir'] = $DIR_MEDIA.'/'; 

$IMConfig['base_url'] = $CONF['MediaURL']; 

You can also set the media directory URL manually if the code above doesn't work:

$IMConfig['base_dir'] = $DIR_MEDIA.'/'; 

$IMConfig['base_url'] = 'http://yourdomain.com/yourdirectory/media/'; 

from: http://forum.nucleuscms.org/viewtopic.php?p=65494#65494

:: Back to Plugins Overview ::