Interspire Other Products Blog

These are the buttons available in DevEdit (the WYSIWYG Editor) at the current time.

When creating a new toolbar, the Name of the button should be used. To create a toolbar:

$rows = array (
"Fullscreen,Undo,Redo,Paste,-,OrderedList,UnorderedList,-,JustifyLeft,JustifyCenter,JustifyRight,JustifyFull,-,Custominsert,Help",
"Spellcheck,-,RemoveFormat,-,Indent,Outdent,-,SubScript,SuperScript,CreateLink,CreateEmailLink,Anchor,-,Image,-,Table,Form,Pageproperties",
"Fontname,Fontsize,Formatblock,Fontcolor,Highlight,HR,Insertchars,Showborders",
);
$myDE->AddToolbar("Simple", implode(",|,", $rows));

Image	Description	Name of the button
	Toggle absolute positioning on and off.	Toggleposition
	Centers the paragraph.	JustifyCenter
	Aligns the paragraph to the left.	JustifyLeft
	Aligns the paragraph to the right.	JustifyRight
	Creates an anchor element.	Anchor
	Bold font format.	Bold
	Inserts custom HTML on the cursor position.	Custominsert
	Inserts a special character.	Insertchars
	Clears the HTML code.	Clearcode
	Copies the selected text to the clipboard.	Copy
	Cuts the selected text to the clipboard.	Cut
	Decreases the indent of the text.	Outdent
	Creates a link to an email address.	CreateEmailLink
	Finds and/or replaces text in the editor.	Findreplace
	Flash Manager, to handle Flash objects.	Flash
	Changes the font color.	Fontcolor
	Selects the font face.	Fontname
	Selects the font size.	Fontsize
	Selects the element format to be used (paragraph, heading, etc).	Formatblock
	Inserts forms and various form elements.	Form
	Help for the WYSIWYG editor.	Help
	Changes the font highlight.	Highlight
	Inserts an horizontal line.	HR
	Image Manager, to insert images.	Image
	Increases the indent of the text.	Indent
	Italics font format.	Italic
	Justifies the paragraph.	JustifyFull
	Creates a hiperlink.	CreateLink
	Media Manager, to handle movies and sound.	Media
	Ordered list (list with numbers).	OrderedList
	Modifies the page properties - title, description and keyword.	Pageproperties
	Shows/hides paragraph endings and line breaks.	Paragraph
	Dropdown with paste options.	Paste
	Redoes the latest editing actions.	Redo
	Removes the style associated with the element.	RemoveFormat
	Shows/hides the borders around the tables.	Showborders
	Spell checks the document.	Spellcheck
	Strike through font format.	Strikethrough
	Selects a style to be attached to an element.	Styles
	Subscript font format.	SubScript
	Superscript font format.	SuperScript
	Creates a new table.	Table
	Inserts a text box.	Inserttextbox
	Underline font format.	Underline
	Undoes the latest editing actions.	Undo
	Unordered list (list with bullets).	UnorderedList

When the WYSIWYG Editor is loaded into a page, it builds its menu automatically and gets all functions ready to go. The last thing it does is set up the designMode, which is the area where all WYSIWYG actions take place and the WYSIWYG contents are actually handled by the browser.

So checking if the editor is already loaded is merely checking if the designMode is ready. And better yet, there's no need to know how to reach through a designMode object as the WYSIWYG editor has functions that access it. If you need some action to take place right after the editor is loaded, this JavaScript snippet can help you. It assumes:

• the editor is instantiated as wysiwyg
• the maximum number of tries will be 50 - totalTries<50
• the time between tries will be 200ms - window.setTimeout('tryToSetFocus()', 200)
• you want to trigger a function called DoSomething() once the editor is available
These options gives this script a maximum of 1000ms (50 tries times 200ms each) of wait for the editor to load - after the 1000ms DoSomething will not be triggered.

var totalTries = 0;
function tryToSetFocus() {
	totalTries++;
	try {
		wysiwyg.getHTMLContent();
	} catch (E) {
		if (totalTries<50) {
			tryToWrite = window.setTimeout('tryToSetFocus()', 200);
		}
		return;
	}
	DoSomething();
}