====== WYSIWYG XUL Editor ======

Mittels XBL können auch WYSIWYG Editoren für XUL erstellt werden.
Hier ein Beispiel für einen Mini-Editor mit ein paar Funktionen zum formatieren von Texten.

So siehts aus:

{{:editor.png|}}

Der Editor basiert auf dem Gecko Rich-Text-Editor Midas.

===== Einbinden des Editors =====

<code xml>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="style.css" type="text/css" ?>

<window id="about-window" title="Editor"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="load();">
	<script type="text/javascript">
	<![CDATA[
	function load()
	{
		editor=document.getElementById('myeditor');
		editor.value='<h1>Test</h1><br><br><u>Das ist ein Editor</u>';
	}
	]]>
	</script>
<vbox>
	<description style="font-size: large; font-weight: bold; text-align:center;">XUL - WYSIWYG - Editor</description>
	<vbox>
		<box class="WYSIWYG" id="myeditor"/>
	</vbox>
	<hbox >
	<button label="getValue" oncommand="alert(document.getElementById('myeditor').value)" />
	</hbox>
</vbox>
</window>
</code>

===== Binding ======

editor.xml
<code xml>
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
		  xmlns:xbl="http://www.mozilla.org/xbl"
		  xmlns:html="http://www.w3.org/1999/xhtml"
		  >
  <!--
  WYSIWYG Editor Binding
  -->
  <binding id="wysiwyg">
  	<content>
		<xul:vbox flex="1" style="margin: 5px;">
			<xul:toolbar>
			  <xul:toolbarbutton tooltiptext="Fett" image="images/bold.png" stlye="font-weight: bold;" oncommand="document.getBindingParent(this).setBold()"/>
			  <xul:toolbarbutton tooltiptext="Kursiv" image="images/italic.png" style="font-style: italic;" oncommand="document.getBindingParent(this).setItalic()"/>
			  <xul:toolbarbutton tooltiptext="Unterstrichen" image="images/underline.png" style="text-decoration: underline" oncommand="document.getBindingParent(this).setUnderline()"/>
			  <xul:toolbarseparator />
			  <xul:toolbarbutton tooltiptext="Linksbündig" image="images/justifyleft.png" oncommand="document.getBindingParent(this).setJustifyLeft()"/>
			  <xul:toolbarbutton tooltiptext="Zentriert" image="images/justifycenter.png" oncommand="document.getBindingParent(this).setJustifyCenter()"/>
			  <xul:toolbarbutton tooltiptext="Rechtsbündig" image="images/justifyright.png" oncommand="document.getBindingParent(this).setJustifyRight()"/>
			</xul:toolbar>
			<html:iframe anonid="wysiwyg-editor" editortype="html" src="about:blank" flex="1" type="content-primary" style="min-width: 100px; min-height: 100px; border: 1px solid gray;"/>
		</xul:vbox>
	</content>
	<implementation>
		<field name="initialisiert" />
		<field name="disabled_state" />
		<property name="value">
			<getter>
				<![CDATA[
				this.init();
				try
				{
					netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
					editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
					return editor.contentWindow.document.body.innerHTML;
				}
				catch(e)
				{
					return false;
				}
				
				]]>
			</getter>
			<setter>
				<![CDATA[
					this.init();
					netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
					editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');

					if(editor.contentWindow.document.body.innerHTML!='')
					{
						//Inhalt leeren
						editor.contentDocument.execCommand("selectall", false, null);
						editor.contentDocument.execCommand("delete", false, null);
					}
					//Value setzen
					if(val!='')
						editor.contentDocument.execCommand("inserthtml", false, val);
				]]>
			</setter>
		</property>
		<property name="disabled">
			<getter>
				return this.disabled_state;
			</getter>
			<setter>
			<![CDATA[

				if(val)
				{
					editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
					editor.contentDocument.designMode = 'off';
					this.disabled_state=true;
				}
				else
				{
					editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
					editor.contentDocument.designMode = 'on';	
					this.disabled_state=false;
				}
			]]>
			</setter>
		</property>
		<method name="setBold">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("bold", false, null);
			]]>
			</body>
		</method>
		<method name="setItalic">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("italic", false, null);
			]]>
			</body>
		</method>
		<method name="setUnderline">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("underline", false, null);
			]]>
			</body>
		</method>
		<method name="setJustifyLeft">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("justifyleft", false, null);
			]]>
			</body>
		</method>

		<method name="setJustifyCenter">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("justifycenter", false, null);
			]]>
			</body>
		</method>

		<method name="setJustifyRight">
			<body>
			<![CDATA[
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
				editor.contentDocument.execCommand("justifyright", false, null);
			]]>
			</body>
		</method>

		<method name="init">
			<body>
			<![CDATA[
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			editor = document.getAnonymousElementByAttribute(this ,'anonid', 'wysiwyg-editor');
			editor.contentDocument.designMode = 'on';
			]]>
			</body>
		</method>		
		<constructor>
			//Intialisierung des Editors im Konstruktor funktioniert nicht immer
			//deshalb wird er erst bei der ersten Verwendung initialisiert
		</constructor>
		<destructor>
		</destructor>
	</implementation>
  </binding>
</bindings>
</code>

===== Stylesheet =====

style.css
<code css>
box.WYSIWYG
{
	-moz-binding: url('editor.xml#wysiwyg');
}
</code>