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:
Der Editor basiert auf dem Gecko Rich-Text-Editor Midas.
<?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>
editor.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>
style.css
box.WYSIWYG { -moz-binding: url('editor.xml#wysiwyg'); }