SmartMarkUP Examples

Basic HTML Configuration

Example of basic HTML configuration

<h1> SmartMarkUP - Universal Markup Editor! </h1> <p> <strong>SmartMarkUP</strong> is a lightweight and powerfull JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup systems can be implemented adn/or adjusted to your preferences and business needs. <strong>SmartMarkUP</strong> dosn't depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code. </p> <div> <h4>Script Info</h4> <ul> <li> <strong>Author: </strong> Joseph Woods (<a href="http://www.phpcow.com/" title="PHPCow">PHPCow.com</a>) </li> <li> <strong>License: </strong> GPL </li> <li> <strong>Required: </strong>Nothing is required except SmartMarkUP package itselves </li> <li> <strong>Browsers: </strong>Safari 3.x, Firefox 2.x, Firefox 3.x, Google Chrome, IE7, Opera </li> </ul>

BBCode Example

Example of BBCode configuration

[size=200][b]SmartMarkUP - Universal Markup Editor![/b][/size] [list] [*][b]Author: [/b]Joseph Woods [*][b]License:[/b]GPL [*][b]Required:[/b]Nothing is required except SmartMarkUP package itselves [*][b]Browsers:[/b]Safari 3.x, Firefox 2.x, Firefox 3.x, Google Chrome, IE7, Opera [/list]

Simple CSS Example

Basic CSS configuration example

div.smarkup { position: relative; height: 100%; } div.smarkup * { margin: 0; padding: 0; font-family: arial; list-style-type: none; outline: none; } div.smarkup form { width: 100%; } div.smarkup div.smarkup-textarea-wrapper { margin: 0 4px 4px 4px; height: 100%; } div.smarkup textarea { clear: both; display: block; width: 100%; border: 0; overflow: auto; font-family: 'Courier New', Courier, monospace; outline:none; } div.smarkup ul.smarkup-toolbar { list-style-type: none; margin: 0; } div.smarkup ul.smarkup-toolbar > li { float: left; height: 16px; } div.smarkup ul.smarkup-toolbar > li:hover div { display: block; } div.smarkup ul.smarkup-toolbar li.ddmenu { background: url(img/ddmenu.png) no-repeat 16px 7px; padding-right: 3px; margin-right: 5px; position: relative; cursor: pointer; }