Contact Us

Scripts: Javascript :: Wysiwyg html textareas :: Library Article #34

Developer's Section

TextAreaX - WYSIWYG HTML Textarea Editor
By: Erobo Software

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2627)

The TextAreaX HTML Text Editor helps you create your documents online with the power of html edit functionality which adds on style, presentation, and substance to your documents.

The TextAreaX is 25,000 lines of code written in HTML5 and JavaScript, and has integrated a spell checker which detects and corrects errors in your text edits.

List of Features

  • TextAreaX HTML Editor is cross browser, cross OS, tested on Chrome > 5, FireFox > 4, IE > 8 (IE11 Tested), Safari, and runs in Windows [XP,Vista,7,8,10], Mac IOS Mountain Lion +, Linux.
  • Contains Bold text function, Header Indicator, Italic Text, Underline, Text Color palette selection, Embed Links, Embed Images, Format Blocks, Spell Checker by (PureJavaScript Spell Checker), Insert Table, Insert Lists, Previews, Help Icons (Used by many online Universities to instruct the user the required input).
  • Written based on the Highly Popular Open Source Xinha Text Editor, with enhanced components and lightweight core functions & code.
  • Can Correct spell errors in the following languages: English, Spanish, French, Portuguese, Italian, Dutch, Deutsch.
  • Contains Preview functionality which let's you preview the text you have written so far in lightbox forms.
  • Accepts added contents from Microsoft Word, Excel, and other RichText Editors.

Example Editor

Other Demos

Demo TypeLink
With Spanish Spell Check & HTML Embedded Click to Demo
Multiple TextAreaXs in One Page Click to Demo

Code Installation / Usage

The TextAreaX requires the following steps to install:

 Code Snippet 1

<!--Step 1: Include Styles File-->
<link media="screen" href="pathTocss/TextAreaX.css" type="text/css" rel="stylesheet"></link>

<!--Step 2: Include Js File-->
<script language="javascript" type="text/javascript" src="pathTojs/TextAreaX.js"></script>

<!--Step 3: Declare TextArea-->
<br /><br />

<textarea rows="10" id="textareax1" cols="45" style="width:690px;height:430px;"></textarea>

<!--Step 4: Create Js Object and Configure Options-->
<script language="javascript">
var TextAreaX_Config = new TextAreaX.Config();
TextAreaX_Config.toolbar = [["popupeditor", "separator", "formatblock", "separator", "bold", "italic",
                               "underline", "separator", "createlink", "forecolor", "insertimage", "separator",
                               "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
                               "insertunorderedlist", "inserttable", "separator", "purespellcheck", "separator",
                               "preview", "separator", "showhelp"]]; //Choose the toolbar elements.
TextAreaX_Config.baseHref = ""; //include absolute location of install folder
TextAreaX_Config.imgURL = "images/"; //relative location to install images
TextAreaX_Config.spellURL = "spellcheck/"; //relative location to install spell check
TextAreaX_Config.spellCheckLanguage = "english"; //enter language of preference
TextAreaX_Config.fullScreenWidth = 780; //Max width on full screen mode
TextAreaX_Config.fullScreenHeight = 530; //Max height on full screen mode
TextAreaX_Config.HelpText = "Help Text"; //Enter help Text
//Convert the id of textarea to a TextAreaX editor:
var thisTextAreas = TextAreaX.Create(['textareax1'], TextAreaX_Config);
//Generate code once initialized

Purchase Options

Format DescriptionLicensePricePurchase Link
TextAreaX - HTML Text Editor - Encrypted Distributable1 Website License$39.00Checkout
TextAreaX - HTML Text Editor - Source CodeUnlimited Websites $250.00Checkout

See other Scripts in Wysiwyg html textareas


Submit Your Scripts:

System Message:
  • Your Javascript script has been sent. Please allow 48 hours for processing.

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]