Tutorial for Installing Wysing(Wyswing) Editor

Wysing = Wysiwyg

Wyswing = Wysiwyg

This article is to teach how to create your own WYSIWYG(wysing or wyswing) for better text area elements on your websites. The wysiwyg editor is generally used for inputting and editing formatted text. The powerful JavaScripts embedded on WYSIWYG editors converts inputted text to formatted HTML elements in real time.

Browser Based HTML Editor:

There are many places where you can find the different type of tools which helps you to create your own  WYSIWYG editor. I found a place which explains the rich text editor in HTML completely and clearly. Please follow the link to know more about building a WYSIWYG editor:

If you are looking for only working material for a JavaScript, HTML, and CSS rich text formatted HTML editor, download the materials you needed from this link. Please follow the tutorial given above to understand the implementation of this resource.

Previously mentioned rich text editor does not work properly on all browser. They are suitable to work with Microsoft Windows Internet Explorer.

Explanation:

The previous Wysiwyg Editor generally uses Javascript for scripting. Some styles are created with the help of CSS styles. The main idea behind editor is to add an IFRAME and set its property as editable. By placing different buttons and for each button, there is a javascript function which format the text written in IFRAME document.

Rich Text Editor (for text areas):

This is another simple installation to insert rich text format into your textarea forms. With this technique, you can replace a form’s textarea field(s) with a custom one that supports WYSIWYG formatting with Rich Text Editor script. It allows the user to easily format the entered content, such as make it bold, change its size, colors etc. The resulting source code is then submitted as the regular text for further processing by your form script.

The main peculiarity of this script is that this script works in IE5+/Mozilla 1.3+/Mozilla Firebird/Firefox 0.6.1+/Netscape 7.1+. In Mozilla, it relies on the Mozilla Rich Text. This script is contributed by Kevin Roth.

Directions:

Simply download the zip file rte.zip (right click, select “Save As”), which contains all the necessary files for the script. Included is also “install.htm”, our quick guide to adding the script to your form. For easy reference, the installation instructions are shown below as well.

Basic Installation Steps:

  • Step 1: Insert the below script into the HEAD section of your page:
    <script language="JavaScript" type="text/javascript" src="richtext_compressed.js"></script>

    **Note: Alternatively, you can insert the below code instead to reference the original, non compressed version of the .js file instead. This file is significantly larger than the compressed version, though the source is human readable:

    <script language="JavaScript" type="text/javascript" src="richtext.js"></script>
  • Step 2: Inside the zip file you downloaded, upload the files:1) The relevant .js file you have chosen above2) The sole .css file included in the zip file3) Palette.htm, blank.htm, and “insert_table.htm”4) The entire images directory

    Upload the above to your web page directory, in the same directory where your form is in.

  • Step 3: Inside your form where you wish the rich text editor to appear, add the below code:

    <script language=”JavaScript” type=”text/javascript”>

    <!– //Usage: writeRichText(fieldname, html, width, height, buttons, readOnly) writeRichText(‘rte1’, ‘here’s the “<em>preloaded</em> <b>content</b>”‘, 400, 200, true, false); //–> </script>

    As you can see, you can control the initial content and dimensions of the rich text editor. “rtel” is the name of the text editor, which can be arbitrary but should be unique.

  • Step 4: Finally, just before the form containing the rich text editor is submitted, the script needs to sync the value contained within the editor to ensure it gets properly submitted. To archive this, a special function needs to be attached to the onSubmit event of your form. This is shown below:

    <form name=”myform” onsubmit=”return submitForm();”>

    <script language=”JavaScript” type=”text/javascript”> <!– function submitForm() { //make sure hidden and iframe values are in sync before submitting form updateRTE(‘rte1’); //use this when syncing only 1 rich text editor (“rtel” is name of editor) //updateRTEs(); //uncomment and call this line instead if there are multiple rich text editors inside the form alert(“Submitted value: “+document.myform.rte1.value) //alert submitted value return true; //Set to false to disable form submission, for easy debugging. } //Usage: initRTE(imagesPath, includesPath, cssFile) initRTE(“images/”, “”, “”); //–> </script> <!-rest of your form–> ” ” </form>

    Don’t be intimated by Step 3. Basically, just add the above script containing function submitForm() to your form, and attach it to the onsubmit event handler inside the form tag.

2 Replies to “Tutorial for Installing Wysing(Wyswing) Editor”

  1. Google is now at the top spot. It is very interesting to see some one who was not at all aware of web sites. I am very happy to see some one who are not aware of internet enters into this site. You can check the tips about the internet and related articles on this site.

    Wikipedia is always helpful to those who are searching for informations.