How to Create a Word Processor Inside a Web Page
- 1). Download the openWYSIWYG ZIP file, which can be found under the resource section.
- 2). Unzip and upload the files to your Web server. Be sure that the directory and the individual files can be accessed by remote users.
- 3). Add the script to the HTML of the page you want to use the editor on. If your Web site is mysite.com, and you have the script stored in the wysiwyg directory, you would use the following line of code:
<script language="JavaScript" type="text/javascript" src="http://www.mysite.com/wysiwyg/wysiwyg.js"></script> - 4). Create the text area that you want to use. Be sure to give it an ID.
<textarea></textarea> - 5). Add the JavaScript code that enables the text area's WYSIWYG properties.
<script language="JavaScript">
generate_wysiwyg('example_textarea');
</script> - 1). Download the CKEditor ZIP file, which can be found under the resource section.
- 2). Unzip and upload the files to your Web server. Be sure that the directory and the individual files can be accessed by remote users.
- 3). Add the script to the HTML of the page you want to use the editor on. If your Web site is mysite.com, and you have the script stored in the wysiwyg directory, you would use the following line of code:
<script language="JavaScript" type="text/javascript" src="http://www.mysite.com/wysiwyg/ckeditor.js"></script> - 4). Create the text area that you want to use. Be sure to give it an ID.
<textarea></textarea> - 5). Add the JavaScript code that enables the text area's WYSIWYG properties.
<script type="text/javascript">
CKEDITOR.replace( 'example_textarea' );
</script> - 1). Download the TinyMCE ZIP file, which can be found under the resource section.
- 2). Unzip and upload the files to your Web server. Be sure that the directory and the individual files can be accessed by remote users.
- 3). Add the script to the HTML of the page you want to use the editor on. If your Web site is mysite.com, and you have the script stored in the wysiwyg directory, you would use the following line of code:
<script type="text/javascript" src="http://www.mysite.com/wysiwyg/tiny_mce.js"></script> - 4). Add the script that causes all text areas to be rendered using TinyMCE.
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script> - 5). Create a text area with the normal HTML attributes that you want it to possess.
<textarea name="example" cols="50" rows="15"></textarea>
Using openWYSIWYG
Using CKEditor
Using TinyMCE
Source...