CSS Editor Documentation

Author:
The author of this project is Uzi Landsmann uzi@landsmanns.com

Usage:
The editor allows integration through aan easy to use API. To integrate with the CSS editor, follow the following steps: 1. In your HTML editor, prepare a placeholder for the CSS Editor, and give it a unique id. e. g.: Loading the css editor... 2. Include the editor's main javascript file by including the following row in your editors HTML header:

3. Create a link to the CSS editor stylesheet in your editors HTML header:

Edit this style sheet to alter the CSS editor's looks.
4. If you want the CSS editor to be visible from the beginning, add a call to the insertEditor() function in your tag, e.g.:

Otherwise, you can also call this function whenever you want to show the CSS editor. Remember to include the unique id of the CSS editor's placeholder as argument when calling the insertEditor() function.

License:
The CSS editor is released under the GNU GENERAL PUBLIC LICENSE. The GPL details can be found under the attached gpl.txt document.

Javascript API:

* Get Style: using the getStyle() function of the CSS editor's API, all css attributes from the editor are retrieved as an array of text elements in the form attribute=value. An example is shown below:
/// show all style elements in the textarea
function showStyle() {
var values = getStyle();
var editor = document.all["editor"];

editor.value = "";

for (i = 0; i < values.length; i++) {
var splitted = values[i].split("=");
editor.value += splitted[0] + ": " + splitted[1] + "\n"; }}

Back To Top

* Set Style: the setStyle() function allows a HTML editor to set the style attributes of an element inside the CSS editor. This can be used to change the style of an element again and again. The code used in the example is as follows:
/// set the attributes of an element in the css editor
function setAttributes() {
var atts = new Array();

atts[0] = "background-color=burlywood";
atts[1] = "border-width=medium";
atts[2] = "border-style=groove";
atts[3] = "border-color=cadetblue";
atts[4] = "font-family=brush script mt";
atts[5] = "font-size=x-large";
atts[6] = "color=blue";
atts[7] = "text-align=center";
setStyle(atts);
}

Back To Top

* Clear Style: the usage of the clearStyle() function is quite clear: it simply removes all style attributes shown in the CSS edtior. The code used in this example is:
/// reset all style elements
function resetStyle() {
clearStyle();
document.all["editor"].value = "";
}

Back To Top

* Add Changes Listener: the addChangesListener() function is a bit more complicated. Following the listener pattern, this function allows you to place a call to a function of your choice whenever a change was made to any style attribute in a combobox in the CSS editor. The function you want to call will receive a single value as argument, namely the combobox whos value is changed. The code used in the example is as follows:
/// add a listener to changes. Whenever the user changes anything in the style
/// comboboxes, call the onChangesListener function
function addListener() {
addChangesListener(onStyleChanged);
}
/// print the changed style in the textarea
function onStyleChanged(combo) {
document.all["editor"].value = combo.id + ": " + combo.value;
}

Back To Top

         

HomePage

Download

Docs