Textbox.io 1.3 Documentation
Page tree
Skip to end of metadata
Go to start of metadata

Getting started with Textbox.io is super easy. In this guide you will invoke Textbox.io on a <textarea> as part of an HTML <form>.  When the <form> is submitted, the contents of the Textbox.io 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 Textbox.io and Put it on a Web Server

  • Download a copy of the Textbox.io 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 Textbox.io welcome screen appears with an instance of Textbox.io, you've installed the editor correctly and you're ready for Step 2.

Step 2: Add Textbox.io to a Page

With Textbox.io accessible via your web server (http://localhost/textboxio/), you can now include the Textbox.io script anywhere you would like to use the Textbox.io 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 Textbox.io as Part of a Web Form

With the script included, you may then invoke Textbox.io on any element (or elements) in your webpage.

Textbox.io lets you identify elements to replace via a CSS3 selector. To add Textbox.io to a page you pass a selector to textboxio.replace().

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

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

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

<!DOCTYPE html>

Try it:

You’ve added Textbox.io 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 Textbox.io 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 Textbox.io instances on a page using textboxio.replace(), and you've seen how to retrieve content from Textbox.io as part of an HTML <form> POST. There's way more under the hood if you're feeling adventurous: read on for more Textbox.io goodness:

For more help visit https://support.tiny.cloud/ | Privacy Policy