Browser-based wysiwyg editor, html editor and text editor. Using JavaScript and DHTML, no java or plugin needed.

It's a great frontend to edit data for a user with no or limited html knowledge.

Screenshots:

The editor as wysiwyg editor in a box.


The HTML tab of the same editor window:




The editor drawn as toolbar to edit HTML in wysiwyg mode. Edit any block of the page, in this example it's a div.


The toolbar has an HTML tab too. Of course the toolbar is moveable.



As text editor:

	Resizeable feature The Resize Grip is used here. Look there for further information.
	Select special characters The characters are grouped into 'currencies', 'signs', 'numbers/math' and 'languages'.
	Insert Image Browse and select images from the server, with a preview. Edit the properties of existing images. (click on the image in the wysiwyg editor, then click the image button.) You can attach a popup windowto browse images on the server. The File Browser application can be used for that. But of course you can make your own, in ASP, Cold Fusion or whatever you like.
	Create links Insert and edit links and email addresses. If the cursor is on a link, and you push the link button, the current link will be edited.
	Color Picker The Color Picker Widget is used here. Look there for further information.
	Customize the font Select font face, font size and font style (regular/bold/italic), and pick options like underline. Has a preview.

Features:

• Use the editor for browser-based wysiwyg editing of html code
• And/or to edit HTML code
• Or as plain text editor
• Direct integration into your website using the toolbar as shown in example 2
• Text formatting like bold/italic/underline and much more.
• Colors with color selector.
• Select special characters.
• Inserting and edit images and links (with image selector).
• Copy/paste text, for example from ms office (word etc). Advanced paste handling: pasting of text with markup can be restricted.
• Resize the editor (can be disabled, can define maximal width and height)
• Can be directly used as form field. Also see the Bs_Form package.
• Draw the editor into a div, or use an existing textarea field that will be replaced. This way it's 100% backward and non-js compatible; an old browser just sees the textarea field.
• Customize the editor area using a css styles string or a css file.

Requirements:

• Internet Explorer 6 or above is needed.
• It could be updated to work with ie5.5.
• Most of this could be done mozilla-compatible. But it's a lot of work...
• Nothing serverside is needed. Example 1 uses a serverside image browser that's written in PHP. You can do such a thing in your preferred language.

Examples:

• Wysiwyg Editor as box
• Wysiwyg Editor as toolbar
• Wysiwyg Editor as box
• Text Editor
• 3 fields with 1 Editor
• with editEnd event
• 2 instances on 1 page

Download:

This component ships with the full "BlueShoes Framework" package, the "BlueShoes JavaScript" package and the "BlueShoes (Wysiwyg) Editor" package. See the download page.

Documentation

API-Doc

License:

Available with

• BlueShoes "developer basic" license
• BlueShoes commercial licenses; buy a commercial license

Check the license overview page for details.

Let us know

Have you done something interesting with BlueShoes or one of its components?