Samstag, 28. April 2012

Test mit wyzz-Editor (wysiwyg-javascriptbased-editor)

Ein kleiner Test des Micro-Editors Wyzz. Besteht nur aus einer Javascriptdatei und ein paar Icons und stylesheets. Der Test erfolgte im Rahmen des Lernzilla-Projekts, zur Umstellung des Lernkarteiprogramms auf HTML-Code.

Im Adminbereich mussten die Textfelder zur Editierung neuer/alter Datensätze mit einer Editorfunktion versehen werden. Ein Versuch mit fckeditor bzw. CKeditor brachte Probleme. Beim zweiten Versuch wurde der wyzz-Editor installiert.

Wichtig ist, dass man das wyzz-Paket nicht in einen Unterordner setzt, sondern dorthin, wo das Formular ist. Sonst funktionieren die Pfade zu den Icons nicht. Eine manuelle Anpassung habe ich nicht versucht


Die readme und licence-Datei habe ich umbenannt in wyzz-readme und wyzz-license und landeten zusammen mit der wyzz.js auf derselben Ebene wie das php-Script mit dem Editierformular. Ferner die zwei Unterordner mit den Stylesheet und den Icons (wyzzicons, wyzzstyles).

Es gibt keine Parameterübergabe im Formular; alle Anpassungen wie Breite, Höhe und so weiter erfolgen direkt im wyzz.js

Wenn wyzz also mehrfach eingebunden werden soll, bleibt es immer bei derselben Konfiguration. Ist unterschiedliche Konfiguration erwünscht, müsste man mit einem modifizierten Duplikat der wyzz.js arbeiten. Das ist der Nachteil der Leichtgewichtigkeit des Scripts.

Für Lernzilla sind zwei Textfelder für Frage und Antwort auszufüllen. Diese müssen also die gleiche Größe haben, die Größe musste ich in der js-Datei ändern, sonst schießen die Editierfelder über die textarea-Größe hinaus.



Einbindung im Head:
 
  
Die "textarea" bekommt eine bestimmte ID und Namen, dann kommt ein ein kurzer Code. So:










Mehrfacheinbindung

Mehrfacheinbindung klappt, man muss nur verschiedene Namen vergeben (ID und name).

Nachteile
Problem: Bei schmaleren Textfeldern passt sich die Toolbar nicht an. Nach etwas mühsamer Einarbeitung habe ich die Toolbar soweit gekürzt, dass sie passt.

Letztendlich war das entscheidende Hindernis, dass ein Tabellengenerator fehlt. Der ist aber wesentlich für eine Lernkartei, denn  Schüler/Studenten/Lehrer/Dozenten für Unterrichtszwecke verwenden wollen und der Hauptgrund, warum überhaupt ein HTML-Codierung eingeführt werden soll. Wenn man einen Tabelleneditor nicht benötigt, ist ist der Editor brauchbar.




Inhalt der Readme:

Wyzz WYSIWYG Editor

(c) The Mouse Whisperer 2011


VERSION
=======
v0.66


LICENCE
=======
This software is licenced under the LGPL, a copy of which is in the download package.
Please leave all copyright notices and links intact.


INSTALLATION
============
1. Unzip everything to somewhere convenient, maintaining the directory structure.
2. Upload to your website so that wyzz.js is in the same directory as your form.
3. Place the following line in the area of the page containing your form:

  
  
4. After the textarea you want to Wyzzify, place a small script like this:




<div style="color: #990000;">
<textarea cols="40" id="textfield" name="textfield" rows="10"></textarea></div>
<span style="color: #990000;"><script language="javascript1.2">
make_wyzz('textfield');
</script></span>
 
 
  Make sure that the argument of the make_wyzz() function matches the ID of the textarea.


UPGRADING
=========
If you are currently using v0.62+ you can simply replace wyzz.js with the new version. Other files are unchanged.


WHAT;S NEW
==========
Improved browser support (tested with IE7/8/9, Chrome 1.0, Safari 4 Public Beta, Opera 9.10 and Firefox 3.0.8, all on Win XP SP3)
 

MODIFICATION
============
All of the following settings are near the top of wyzz.js, in an area marked by comments:

Modify the Width and Height parameters near the start of the wyzz.js file to suit your application.
Modify the entries in the buttonName array to amend the available toolar buttons and their order.
Modify the entries in the myFonts array to set which fonts are available to the editor.
By default, the editor tries to output xhtml-compliant code. This is somewhat experimental; if it causes problems, you can turn it off by changing the value of xhtml_out to 0.
Finally, modify the 'Edit Region Stylesheet' to point to the relevant stylesheet - default is wyzzstyles/editarea.css. You will probably want the rules in this stylesheet to match the style of the page whose content you are editing.


WARRANTY
========
None! This is free software, and it is up to you to verify its fitness for your purpose.
The author will not be held responsible for any loss or damage caused by the use of any software in this package.
 
That's it! There's a forum on the site where you can ask any questions ...

  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP