JavaScript Wysiwyg Editor

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.


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.


  • 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.


  • 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.



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




Available with Check the license overview page for details.

Let us know

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