aynHTML Editor :: wysiwyg HTML editor for IE5.5+
Version 0.20b (beta) - 2003-05-05
<html xmlns:AI> <head> <?import namespace="AI" implementation="aiEditor.htc" /> </head> <body> <AI:aiEditor id="aiEditor" stylesheet="external.css" save_method="custom"> <p align="center"><b>Welcome to aynHTML Editor !</b></p> </AI:aiEditor> <script language="javascript"> onload = function() { aiEditor.append( 'id', 1 ); } aiEditor.onsave = do_something; function do_something( e ) { alert( e.content ); } </script> </body> </html>
The aynHTML editor is a wysiwyg HTML editor for use with IE5.5 and above.
In order to use the editor on a web page, just insert a tag like the one in the synopsis in your HTML. Note that the xmlns declaration in the <html> tag is required to make it work. The different attributes of the <AI:aiEditor> tag control the behaviour of the editor.
The content between the editor tags is loaded into the editor window, which makes it easy to insert dynamic content using a scripting language like PHP or ASP. Alternatively, you can load content through xml or html, or customize the way content is loaded and saved.
The editor makes use of custom elements implemented as behaviours. Only Internet Explorer 5.5 and higher support this as of this date.
The file upload component makes use of the ADO Stream object, which limits its use to the Win32 platform. The ADO Stream object ships as part of Microsoft's Data Access Components ( MDAC ) version 2.5 and higher. Windows 2000 en Millenium ship with MDAC v2.5, Windows XP ships with MDAC 2.7, and thus do not necessite further downloads.
For Windows 95 and some versions of Windows 98, it is necessary to install DCOM95, respectively DCOM98 first, which can be downloaded at http://www.microsoft.com/com/resources/downloads.asp. The latest MDAC version can be found at http://www.microsoft.com/data.
Id of the object, so it can be referenced in script in the containing document.
The color of the editor's chrome. Please note that this property isn't fully implemented yet, so dialog boxes and buttons may not appear the way you want.
This property gets or sets the editor's content. You could use as an attribute in the editor's html tag, though why should you, as there are easier methods to control the editor's content. This attribute is mainly meant for use in the editor's onbeforeload and onopen events. See the description of the onbeforeload event for an example.
The emo_get property holds an absolute or relative url to an xml file containing the emoticons. If you choose to use a relative path, please note that the path is relative to the editor, not to its containing page. So if your index.html file resides in /, your aiEditor.htc file resides in /aynhtml/, and your emotes url is a file called emotes.xml residing in /aynhtml/xml/, you should use
emo_get = "xml/emotes.xml" path = "aynhtml/"
The elements in the xml file should contain a href attribute pointing to the location of the emoticon. Optionally, the name attribute is used in the 'alt' attribute of the image.
If you don't want to use the emoticons, simply omit this property.
deprecated in v0.18b - use emo_get instead
The path where the emoticons used by the editor can be found. This path is relative to the path of the editor component. If you don't want to use the emoticons, simply omit this property.
A comma-separated list of fonts that can be chosen in the editor. If this property is not supplied, the font dropdown of the editor isn't shown.
A comma-separated list of the font sizes the user can choose from. Font size will be applied in pixels. As with the font property, omitting it will cause the editor to hide the dropdown.
The height of the editor.
This property accepts a comma separated list of buttons to hide from the user interface.
Values: 'link' | 'save' | 'color' | 'anchor' | 'table' | 'image' | 'emote' | 'word' | 'open'.
The editor builds a list of internal links - useful for use within a CMS - by querying an xml file through HTTP. The link_get property holds the absolute or relative url of this file. If you choose to use a relative path, please note that the path is relative to the editor, not to its containing page. See the example under the emo_get property for this.
Note that as the editor uses the http protocol to load the xml, this feature will not work locally. The xml file needs to be reachable through http.
The editor builds a nested link tree from the xml file's contents. Element names and element content are ignored, only the attributes name and href of each element are used, respectively as the name shown in the tree and the hyperlink which is generated.
For more info, see the sample links file included, or view the docs of the aiTree component.
This property controls how the editor's content is loaded.
Choosing inline tells the editor to use whatever is written between the <AI:aiEditor> and </AI:aiEditor> tags for content. The 'html' option will send a request to the url indicated in the load_url property and paste the response into the editor. The 'xml' option gives you the opportunity of adding other fields besides the content, such as a document id. Specification to follow. The 'custom' option finally has no action associated with it, but allows you to control the editor's content through the onbeforeload event.
Values: 'inline' ( default ) | 'html' | 'xml' | 'custom'.
This property controls the editor's behaviour when the 'open' button is pressed, or the open() method is called.
The default action is to reload the content as specified in the load_method property. If load_method is 'inline', the editor's default action is to refresh the page. Choosing 'custom' for this property allows you to script the editor's behaviour via the onopen event.
If you set the load_method to 'custom', the editor's default open() action is to generate an onbeforeload event. For a different behaviour, set the open_method property to 'custom', and add the necessary code to the onopen handler.
Values: 'default' ( default ) | 'custom'.
This property defines which of the available color palettes will be shown in the color picker.
Color palettes and colors are defined in colors.xml, and are of the following format:
<colors> <range value="web" name="Web Safe Colors"> <color value="white" /> </range> <range value="custom" name="Custom Colors"> <color value="#ffea20" /> </range> </colors>
The value attribute of the range element stands for the palette which can be chosen through the editor's palette property.
The name attribute is used in the title bar of the color picker.
Values: 'web' | 'system' | 'custom' ( default: 'web, system' )
Use this property in case the editor resides in a directory that differs from its embedding page. You'll also need to modify the import statement. For example:
<html xmlns:AI> <head> <?import namespace="AI" implementation="editor/aiEditor.htc" /> </head> <body> <AI:aiEditor id="aiEditor" path="editor/" /> </body> </html>
The absolute or relative url of the file that generates a list of available images. The file needs to be an xml document similar in structure to the links file. If you choose to use a relative path, please note that the path is relative to the editor, not to its containing page. See the example under the emo_get property for this.
For more info, see the sample images file included, or view the docs of the aiTree component.
The url to which uploaded images are sent. Typically, this file will be an ASP, PHP or CGI script. Uploaded images are sent as an xml file of the following form:
<root xmlns:dt="urn:schemas-microsoft-com:datatypes"> <file name="Holiday Pics: me and my dawg" folder="pics/holiday/spain" href="c:/my pictures/lloret/dog.jpg" dt:dt="bin.base64" > [base 64 encoded binary content of the file] </file> </root>
The href attribute contains the full local filename of the uploaded file. The folder attribute holds the folder hierarchy selected in the folder dropdown. The name attribute contains the text the user typed in the description field.
The folder names may or may not correspond to a physical hierarchy on the webserver. In the second case, you can use the folder names to build a virtual hierarchy for the end user. It's up to you. However, as there is no obligatory link between the folder names and a file's url, it falls to the upload script to return this info to the editor. The upload script should output an xml string of this form, where href can be either an absolute or a fully qualified url:
<root> <file href="/upload/usr_12/pics/pic0013.jpg" /> </root>
The method by which the contents of the editor will be saved.
The editor knows two built-in values, "form" and "xml".
Choosing "form" will generate a traditional http request with url encoded form fields.
The content of the editor is copied to the "aiContent" form field.
Choosing "xml" makes use of the MS XML component to generate an xml string.
The content of the editor is held in the text of the "content" element.
In both cases, the contents are posted to the url specified in the save_url property.
The editor generates an onsave event, which contains the HTML in its content property. This is especially useful if
you want to do your own save processing by setting the save_method to 'custom'.
See the synopsis for an example.
Values: 'form' (default) | 'xml' | 'custom'.
The url to which the contents of the editor are posted. Depending on the save_method chosen, this file should either read in the posted xml, or the urlencoded form values.
This property controls whether the editor will search its embedding document for <style> and <link> tags.
CSS classes specified in those tags will be imported in the styles dropdown, and can be applied to the editor's content.
Currently, only simple classes like .title are imported into the dropdown.
Element-specific ones like p.important { } or nested classed like p b { } affect the editor's content, but cannot be selected as a style to apply.
This will change in a future release. Element-specific classes will be supported and shown in the dropdown when applicable.
Values: 1 | 0 ( default ).
The url of an external stylesheet to be applied to the editor. Rules defined in the stylesheet are used for rendering the HTML the editor produces. Classes defined in the stylesheet - those starting with a dot - are also used to populate the styles dropdown of the editor, so users can apply those styles to text fragments.
Please note that css classes and id's starting with "ai" are used by the editor itself, so try to avoid naming your classes like that, unless you want to change the editor's appearance. Classes starting with "ai" will not be shown in the dropdown, but influence the editor's appearance. The AIEditor class controls the appearance of the editable document. To set the default font and background color, use this class.
The width of the editor.
This method allows you to add custom fields for saving along with the HTML that the editor generates. If the save method is "post", the fields will be appended as urlencoded fields to the http post. The 'xml' save method generates a list of elements with the given key as the element's name and the given value as the element's text.
Note: the editor stores it's content in a form field named 'content' when posting a form, and in an element named 'content' when posting xml. Appending a key named 'content' may lead to undesirable results when trying to decode your post.
This method simulates the editor's open button. Apart from triggering the editor's onopen event, This can be useful if you prefer to not to let the editor post its content itself, as you're using a custom form with other fields.
The example below shows how to implement this:
This method makes it possible to simulate the editor's save button from script. This can be useful if you prefer to not to let the editor post its content itself, as you're using a custom form with other fields.
The example below shows how to implement this:
<script> aiEditor.onsave = fill_n_post; function fill_n_post( e ) { your_own_form.your_content.value = e.content; // other validation stuff goes here your_own_form.submit(); } </script> <AI:aiEditor id="aiEditor" /> <form id="your_own_form" method="post" action="your_own_url"> [ your own form fields here ] <input type="hidden" name="your_content"> <input type="button" value="send da stuff" onclick="aiEditor.save();"> </form>
This event is generated just before content is loaded into the editor. The default editor behaviour is to load it's content from the content between the <AI:aiEditor> and </AI:aiEditor> tags.
Other built-in loading options can be activated by setting the load_method property to 'html' or 'xml'.
For fine-grained control over the loading, set the load_method to 'custom', and write your loading routine as follows:
<script language="javascript"> onload = function() { aiEditor.onbeforeload = custom_loader; } function custom_loader( e ) { // your loading code here e.g. this.content = 'allyourbasearebelongtous'; } </script>
Currently, the onbeforeload event does not contain any extra information, so it's not necessary to catch it in your event handler. The onbeforeload event is generated after the onload event of the containing document, so you can register your handler either in the window's onload handler, as in the example above, or somewhere else in your document, after you've written the aiEditor tag.
This event is generated when the user presses the open button. For the default actions associated with this event, see the open_method property above. Catching this event allows you to fine-tune the way the editor loads a document.
This event is generated when either the save button is pressed, or the component's save() method is called from script. The event has just one property, content, which holds the generated html. In order to get to the content, just place a script tag like this one, and replace the alert with something more meaningful:
<script language="javascript"> aiEditor.onsave = do_something; function do_something( e ) { alert( e.content ); } </script>
IIS 5.0 is preconfigured to recognize files with a .htc extension as hypertext components. Apache and other non-Microsoft web servers mostly aren't, and will send htc files as text/plain or text/html, or whatever is configured as the default MIME type. For Internet Explorer to execute the component correctly, it is essential that the web server should send the right Content-type header, which is text/x-component.
To make Apache send the right MIME type, try one of the following:
AddType text/x-component htc
If this doesn't solve your problem instantly, don't panic! Although the MIME type is sent correctly by the web server, Internet Explorer will keep a cached copy of the document, even if your settings tell it never to cache files. To clear your cache, choose Tools -> Internet Options... -> Delete Files.
If the above doesn't work, it's time to post a plea on the support forum ;-).
If you embed the editor within PHP page, chances are that you'll get a PHP error like PARSE ERROR, unexpected T-STRING at.... This problem occurs if the short tags notation of PHP is enabled, allowing you to use the ?> notation for PHP script tags. Unfortunately the directive necessary to embed the component will also be parsed as code, thus producing the error above.
To solve this problem, you'll have to rewrite the import tag as follows:
<? echo '<' . '?import namespace="AI" implementation="aiEditor.htc" />' ?>
Even more of a bother is the fact that some servers seem to parse html and other files as PHP as well, so you'll have to rewrite the import statement in the same way in the aiTable.html, aiImage.html and aiLink.html files as well.
The settings for the content zone in which the editor is run have to allow the execution of ActiveX controls and script. To check this, open Tools -> Internet Options -> Security -> Custom Level... and check that the following items are set to enable:
ActiveX controls and plug-ins
Scripting
The settings above are enabled by default in the medium and medium-low security settings, which are the defaults for respectively the internet zone and intranet zone of IE.
The file upload component makes use of the ADO Stream object to read the local file before uploading it. IE medium security settings do not allow access to a file from a different domain without prompting. Thus, it's probable that you'll get a prompt like "Microsoft ADO/RDS - This page is accessing a data source on another domain. Do you want to allow this?". In order to avoid this prompt, either add the site to the trusted security zone, which permits access to other domains, or set the following security setting to enable:
Miscellaneous
Original developer: Denis Braet <denis.braet@aine.be>
The aynHTML project is hosted at SourceForge.net.
The project's homepage is http://aynhtml.sourceforge.net. Visit this page for demo's and announcements.
Please visit http://sourceforge.net/projects/aynhtml/ for the latest release, updates and bug fixes.
aynHTML Editor :: wysiwyg HTML editor for IE5.5+
Copyright © 2002-2003, Denis Braet. <denis.braet@aine.be>
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, a copy can be obtained at:
http://http://www.gnu.org/licenses/gpl.html