Web Based html-rich text Editor “web-editor” Using Open Source Software Authors: D. MARKOPOULOS, L. FRAGIDIS, V. MARDIRIS and V. CHATZIS Technological Educational Institute - Information Management Department, Kavala, Greece Abstract This paper presents a web-based text and html editing application. The user can manipulate the text almost as well as in a word processor and add the most frequently used html elements such as buttons, text areas and text fields. Since the document is formed the application can generate the html code for it. The application is relied on open source software. The tools used are DHtml, CSS and Javascript both for scripting and design issues. The application can be used in both Internet Explorer and Netscape based browsers through an automatic selection. It has low requirements and it can be used in both old and new computer systems. The main difference with other editors consists to the fact that opposite to them, only pure html and javascript is being used making the code as simple as possible. In addition “web-editor” can be easily adapted in any web based application.
1. Introduction The aim of this project is to provide an open-source code web based text and html editor which would be easy for a moderate developer to understand its structure. For this purpose strong efforts were made in order the code to be as simple as possible. The programmer probably will notice that the code structure is quite simple with functions that complete similar operations. For example there is one function for the text manipulation (bold, italic, underline) one function for cut copy etc. It is also quite important that unlike similar editors, this one uses only one script language (JavaScript). This could be proved quite useful because it uses only one scripting language, avoiding the difficulty to understand the code philosophy. In this way, even a no so expert programmer can make adjustments and improvements to the current code either in JavaScript or HTML. JavaScript because of its property running only on the client side also provides the potential to the application to has more responsive interactions to the user.
2. JavaScript JavaScript is probably the most common and popular script language on the web. It has developed back in 1995 by Netscape in order to implement it in its browser. JavaScript is a prototype-based scripting language with a syntax loosely based on C.
2.1 Use of Javascript Over the internet Probably the most important use of JavaScript is that it can be included or be called from HTML pages and interact with the Document Object Model (DOM). In this way the webpage can perform a variety of tasks that would be impossible to accomplish with HTML code alone. The most common examples over the web are the pop-up windows with control in their properties (size, menu bars, position, toolbars etc), checking or validating web form input values to make sure that they will be accepted before they are
1
submitted to the server, changing images as the mouse cursor moves over them and changing dynamically webpage elements (moving them, changing the font). In addition, a very important use of JavaScript is to create different type of menu such as dropdowns, popups, etc.
2.2 Use of Javascript Outside the net The use of JavaScript is also extended outside the web in a number of tools. The most common use exists in Adobe Acrobat, Adobe Photoshop, and Adobe Reader which support JavaScript in PDF files. The Mozilla platform, which underlies several common web browsers, uses JavaScript to implement the user interface and transaction logic of its various products. JavaScript interpreters are also embedded in proprietary applications that lack scriptable interfaces. Dashboard Widgets in Apple's Mac OS X v10.4 are implemented using JavaScript. Microsoft's Active Scripting technology supports JavaScript-compatible JScript as an operating system scripting language. JScript .NET is a CLI-compliant language that is similar to JScript, but has further object oriented programming features.
2.3 Disadvantages of JavaScript Eventhough JavaScript is a rich interpreted language running arbitrary server-provided code on a client computer, it has suffered its fair share of security issues especially at the beginning of its use. Many attempts at bypassing logical barriers to steal confidential information make use of JavaScript to perform their deeds behind the scenes, using techniques such as cross-site scripting. Non-expert users usually can't notice what is going on because the malicious code has no visible effect on their browsing experience. Besides, it is not obvious to people who are not programmers that their Web browser includes a full-blown programming language interpreter, with the power and risks implied.
3. The application The application “web-editor” uses DHTML performed by JavaScript and C.S.S. The editor has the ability to make rich editing formats with many features of a document processor. There are buttons of bold, italic, underline, justification, foreground and background color changing, subscription and superscription, and strikethrough. Furthermore, there is the ability for the user to add lists, pictures, to make changes to the font family, and also to the font size and format. Unlike some web text editors, the user can save his file and to perform some others operations such as undo, redo, cut copy and paste. Considering the html developing part, the user can add to his project buttons, text areas, iframes, tables, checkboxes, radio buttons, links and 3 types of text fields. Maybe the most important thing is that this application can transform the edited text to html code and vise versa. This is done by two functions and few lines of code.
2
3.1 HTML Part The html part of the application is quite simple. There are image buttons, dropdown menus for the font family, size and heading. Furthermore, there are six hidden subforms that allow the user to insert various html elements to the document by selecting its properties plus one form for table insertion. Tables are being used so that the image buttons to be justified. The buttons include some events (onMouseOver, onMouseOut, onMouseDown, onMouseUp, onclick) connected to four functions that change the image style (background color, pointer appearance) that are being executed accordingly with the user’s action. The onclick event triggers the appropriate function for the button. This way is being used to almost all the buttons of the application. The text editing is taking place inside an i-frame. I-frame has being used instead of textarea for two reasons. The first one is that textarea by itself cannot handle rich text editing. Secondly, i-frame can accept other elements such as images, buttons and tables. This is happening because the main use of iframe is to display web-pages inside another web-page. On the contrary the textarea is being used for unformatted text only. The user can change the background and foreground color of an image that appears when the pointer is over the foreground and background button. The image is split to areas (one area for each square). Upon the square by clicking the right color code is being sent to the JavaScript function and the element takes the selected color. At the same time, another function disappear the color table.
Fig. 1: The main application window
3
3.2 Cascading Style Sheets (C.S.S.) The C.S.S. allow to the developer to import many properties simultaneously in all the webpage elements that are being chosen to have a specific tag. For example it is possible to have all the headings appeared with specific color, font or size. There are several advantages from the use of C.S.S. With their use there is a time saving because there is no need to define properties for each and every html element. Secondly, styles can easily be edited. The only thing we need to do is to go back to a specific point and make the proper modifications. Furthermore, with C.S.S. the danger of forgetting to edit the page in a point is greatly reduced. Simple C.S.S. has been used to the html page where possible. In some cases C.S.S. implemented inside the HTML code. This was necessary because the “hidden” property that has been used in the html elements sub forms could not be changed to “block” if it was in a separate file. However, a separate C.S.S. file exists in order to set the background and font color for the clock and the position for the sub-forms. C.S.S. also has been used in combination with the JavaScript code for the changing of the images background color and the appearance of the html elements forms.
3.3 JavaScript part There are two versions of JavaScript in this project. This is happening because there are some important differences between Internet Explorer (i.e.) and Netscape based browsers. (Mozilla Firefox, Opera etc). The two browsers manipulate scripts with different way. First of all to enable the rich text editing the design mode must be set it up to “on”. In internet explorer this is taking place with the use of the command frames.area.document.designMode = "On", where ‘area’ is the id of the i-frame. To enable the same capability n Mozilla the syntax of the command has been modified to document.getElementById("edit").contentDocument. designMode="on";. In addition, to invoke an execcommand in i.e. the syntax is area.document.execCommand (commandString, boolean flag,value);. On the contrary in Mozilla the command is selectedElement.document.execCommand( commandString, boolean flag, value); Despite the differences in the code syntax for the two versions of the browsers the philosophy remains the same. The code is divided in functions that are being called by the user’s choice. The most important reason following this structure is that simplifies the code and it is easier to understand. In addition, it is easier to locate and correct any potential problems. 3.3.1 Execcommand Many functions are using the “execcommand” method. This method executes a command for example making the selection bold, on the current document, current selection or the given range. There is a variety of command identifiers for this method from which many of them are being used in this application. However, there are some restrictions: Not all the identifiers are supported from the browsers, plus there are some differences in some identifiers and their result in the i.e.
4
and in firefox. In spite of this, execcommand comprised as a very useful tool for the rich text editing format and the creation of dhtml. It should also be referred that the identifiers cut, copy and paste does not always apply to Mozilla firefox. For this to be done, sometimes it is necessary some changes to be done to the preferences file of the browser. 3.3.2 Document Object Model (D.O.M.) In some cases, execcommand method does not offer too many options, especially in the creation of form elements. (e.g. dropdown menus) and tables. For this reason Document Object Model (D.O.M.) has been used. The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. In this application there are three cases where D.O.M. proved extremely useful. The first one is in the creation of tables inside the iframe. To make this happened, after the selection of the user the procedure was as follows: • First create the element. • Next, create the element, which is a child of the element. • Next, use a loop to create the elements, which are children of the element. • For each element, use a loop to create the elements, which are children of elements. Once we have created the , , , and elements and then the text node, we then append each object to its parent in the opposite order. By the same way we create elements in the dropdown form, but with the slight difference that we also create textfields inside the table. The third case of using D.O.M. is upon the creation of the element. Each tag is child of the select tag and each text node is child of the .
Fig. 2: Dropdown menu created with DOM 5
4. Conclusion This application has developed under the philosophy of the open source software. Strong efforts were made so that JavaScript to be the only language that has been used. Even though there are some differences between browsers the philosophy remains the same. Despite some problems to the development of the project, JavaScript offers relatively simple code, more responsive interactions to the user, but also powerful and at the same time making itself a good choice for the creation of scripts and Dynamic web pages (DHTML). Concluding, JavaScript and its combination with the HTML 4.0 and the C.S.S. offer a lot of potential to the developer. Considering the fact that quit a few similar applications exists over the internet, there are significant advantages for someone to use JavaScript instead of another script language. REFERENCES [1]. http://en.wikipedia.org/wiki/JavaScript [2]. http://www.mozilla.org/editor/midasdemo/ [3]. http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScrip t_and_DOM_Interfaces [4]. http://www.mozilla.org/js/ [5]. http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/execcomm and.asp ACKNOWLEDGMENTS This work is co-funded by the European Social Fund and Greek National Sources (EPEAEK II, Informatics Studies Support).
6
