Versión para imprimir | Translate this page

DW CS4 only:This widget is based on the MarkitUp plugin for jQuery by Jay Salvat. It adds an HTML editor to your web page. I'm not looking at anybody, but Jay is accepting donations for this great job, BTW...

Please note: This is not a pure WYSIWYG editor: the end user must have some html knowledge to use this editor. It has, however, a preview panel that is updated automatically while you write the html.

See the demo
Download the extension

Instructions:

The first step is adding the widget. it's located at TCN widgets in the insert panel:

After it's done, you will see in your document a common textarea; the only thing you must check is the textarea name ("content" by default) and change it to the one you like or need. Char width and the number of lines will be the default for users with JavaScript disabled.

The important part is: DO NOT CHANGE THE TEXTAREA ID: It's used by the script to identify it. Well, you can change it if you now what you are doing:

Pretty simple, isn't it? Now a little bit of magic: Save your document (you will be prompted to save the required js and css files too) and click the "Live View" button:

There you go! an HTML editor!

Now, some extra tuning if you want:

• You can edit the .markItUP and .markItUpEditor css stiles to change the width
• There's a draggable point at the bottom of the editor, so the user can set the height.
• If you click the green ticket, you will get a preview of the text:

• You can change the look and feel of the preview editing the file "marquitup/templates/preview.css". It's a good idea if you have defined some styles for the html tags.
• All the required files are inside the "marquitup" folder (all but the jquery.js file, which is located at the scripts folder). Removing that folder and the script block located after the textarea will remove the editor completely.

And that's all.

See the demo
Download the extension

[Top]