Page tree
Skip to end of metadata
Go to start of metadata

Getting started with is super easy. In this guide you will invoke on a <textarea> as part of an HTML <form>.  When the <form> is submitted, the contents of the editor will be submitted as part of the <form> POST.  

To complete this guide, you will need access to a web server. This guide assumes a web server is running on port 80 on localhost. 

Step 1: Download a Copy of and Put it on a Web Server

  • Download a copy of the SDK from Tiny Downloads.
  • Unzip the package and move the textboxio directory into a web accessible location on your web server (for example, localhost). 

Once you've completed these tasks, open a browser and browse to the directory where you placed the textboxio directory (for example, http://localhost/textboxio/).  If the welcome screen appears with an instance of, you've installed the editor correctly and you're ready for Step 2.

Step 2: Add to a Page

With accessible via your web server (http://localhost/textboxio/), you can now include the script anywhere you would like to use the editor.

To add the script,  add the following inside your page’s <head> tag. 

<script src="http://YOUR-DOMAIN/YOUR-DIRECTORY/textboxio/textboxio.js"></script>

Step 3: Invoke as Part of a Web Form

With the script included, you may then invoke on any element (or elements) in your webpage. lets you identify elements to replace via a CSS3 selector. To add to a page you pass a selector to textboxio.replace().

In this example, you will replace <textarea id="mytextarea"></textarea> with a editor by passing the selector '#mytextarea' to textboxio.replace().

<!DOCTYPE html>
	<script src="http://localhost/textboxio/textboxio.js"></script> 
  <h1> Getting Started Guide</h1>
    <textarea id="mytextarea"></textarea>
    <button type="submit">Submit</button>
  <script type="text/javascript">
    var editor = textboxio.replace('#mytextarea');

For the best user experience, it is recommended that the HTML5 doc type is set.

<!DOCTYPE html>

Try it:

You’ve added to the page - that's all there is to it!

Next, we'll look at retrieving content as part of a <form> POST.

Step 4: Saving Content with a <form> POST

When the form is submitted, the editor mimics the behavior of a normal HTML <textarea> during a form POST. No additional configuration is required.

What's Next

At this point, you've seen how to create instances on a page using textboxio.replace(), and you've seen how to retrieve content from as part of an HTML <form> POST. There's way more under the hood if you're feeling adventurous: read on for more goodness: