How to use the markItUp JavaScript plugin

This article demonstrates how to use the markItUp JavaScript plugin on your web site.

Tabla de contenido

About the markItUp plugin
Using the markItUp plugin
More Information

About the markItUp plugin

The markItUp plugin is a JavaScript-based plugin that enables you to quickly and easily add markup editing capabilities to any element on a web page. For example, you can use the markItUp plugin to format text as HTML, add Wiki syntax, and much more.

To see examples of the markItUp plugin in action, please visit http://markitup.jaysalvat.com/examples.

Using the markItUp plugin

To use the markItUp plugin in your web site, follow these steps:

Use your web browser to go to http://markitup.jaysalvat.com/downloads.
Download the .zip file of the latest release to your local computer, and then extract the files. There should be a folder named latest.
Use FTP or SCP to transfer the latest folder to the public_html directory on your A2 Hosting account.

Create an HTML page that loads the plugin. There are several ways to do this, and there are many settings that you can customize. The following HTML code snippet demonstrates one way to load the plugin. For more information, consult the markItUp documentation.

<html>
<head>

<!-- Load the jQuery and markItUp JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>

<!-- Load the default plugin settings -->
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

<!-- Load the CSS files -->
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />

<!-- Link the textarea element to markItUp -->
<script type="text/javascript" >
   $(document).ready(function() {
      $("#myEditBox").markItUp(mySettings);
   });
</script>
</head>
<body>

<textarea id="myEditBox"></textarea>

</body>
</html>

More Information

For general information about the markItUp plugin, please visit http://markitup.jaysalvat.com.
To view the markItUp online documentation, please visit http://markitup.jaysalvat.com/documentation.

Article Details

Product: All accounts
Level: Intermediate

Knowledge Base