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
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 Ephox 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.
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
In this example, you will replace
<textarea id="mytextarea"></textarea> with a Textbox.io editor by passing the selector '#mytextarea' to
For the best user experience, it is recommended that the HTML5 doc type is set.
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.
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:
- Editor types - Classic vs Inline - Learn about the 2 modes of editing supported by Textbox.io, and decide which works best for you
- API Basics - Learn the basics of using the editor API, such as getting and setting content in the editor.
- Customizing the Editor - Learn how to configure and customize Textbox.io for your applications.
- Handling Local Images - Learn how to configure automatic local image uploads
- API reference