Monat: Februar 2011

tinyMCE, flexibles Layout und Tabellen

25. Februar 2011 - tinymce, wordpress

Wenn eure Webseite ein flexibles Layout unterstützt und ihr in den Artikeln Tabellen einsetzen wollt, könnt ihr auch die Tabellen „flexibel“ machen.

Standardmässig werden die Tabellen von tinyMCE mit festen width und height Werten erzeugt.

Es reicht aus, wenn man die dritte Zeile so überschreibt:

Also:  width: 100%; height: 0%;

Zum Tabellendialog kommt man durch Markieren der Tabelle und anklicken des Tabellenicons

 

 

twentyten Menüs und Internet Explorer 7

21. Februar 2011 - wordpress

Seit dem Theme twentyten hat WordPress ein „richtiges“ Navigations-Menü für Seiten. Das ist besonders wichtig, wenn man WordPress nicht nur als Blog, sondern auch als CMS benutzen möchte.

Wenn man den IE7 dabei nicht auschließen möchte, gib es hier ein Problem. IE7 stolpert über die Tool-Tipps, die beim Überfahren der einzelnen Menüpunkte erzeugt werden:

  • Maus über einem Menüpunkt klappt alle untergeordneten Menüpunkte auf
  • fährt man im aufgeklappten Menü nach unten und ist genügend schnell, passiert nichts
  • fährt man langsam hinunter, erscheinen für jeden Menüpunkt Tool-Tipps in dem typischen Rechteck.
  • fährt man dann weiter hinunter und über solch ein Rechteck, fällt das ganze Menü zusammen

Das lässt sich auch bei einer Standard-Installation demonstrieren, wenn man ein paar Unterseiten angelegt hat und anschließend das Menü ausprobiert.

Als Lösung kann man die Tool-Tipps aus den Menü-Informationen (wp_nav_menu) so entfernen:

<div id=“access“ role=“navigation“>
    <?php /* Our navigation menu.  If one isn’t filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    
<?php $premen=wp_nav_menu( array( ‚container_class‘ => ‚menu-header‘, ‚theme_location‘ => ‚primary‘,’echo’=>’0′ ) );
    $pattern=’/title=“.*?“/‘;
    $replacement=““;
    $premen=preg_replace($pattern,$replacement,$premen);
    echo ($premen);
    ?>
   </div>

Bevor das Menü in das div eingefügt wird, werden alle tool-tipps (title=“….“) herausgelöscht. Dafür kann man die php Funktion preg_replace benutzen. Anschauen kann man sich das hier

tinymce in wordpress widgets

16. Februar 2011 - wordpress

Von der Idee ist es  ganz einfach:  ein Kunde (ohne HTML Kenntnisse) möchte in der Sidebar aktuelle Informationen schnell und einfach unterbringen. Gerne auch mit Farbe oder Bildern…

English summary: If You dream of a perfect „rich“ text widget, You may wake up disappointed. Widget area is Ajax dominated, and a wordpress bug makes life not easier for Javascript editors…

Die naheliegende Lösung für rich text: tinymce im „Text-Widget“. Dafür gibt es auch einige Widgets im Web, aber ein richtig gut funktionierendes habe ich bisher noch nicht gefunden.

Probleme sind: die Umgebung im Widget ist für Javascript Programme wie tinymce nicht einfach. Die Widgets Inhalte werden per Ajax-Funktionen gesichert, auf die man keinen Zugriff hat, wenn man nicht in den Core von WordPress eingreifen kann und möchte. Üblicherweise haben diese Editoren einen eigenen iframe für ihre Inhalte. Ajax speichert aber nur den Inhalt der Textarea  in die Datenbank.

Dann gibt es auch einen Fehler in WordPress, durch den die Widgets während des Drag&Drop mehrfach initialisiert werden. Für normale Textareas ist das harmlos, nicht aber für JS Scripte wie tinymce oder JPicker, die an solche Felder gebunden und nun mehrfach gestartet werden.

Nach meinen Tests funktionierte tinymce im Widget nur in der Kombination mit dem jquery Plugin von moxiecode, weil das Plugin sich um Ajax kümmert.

jQuery(function() {
jQuery(‚textarea.<?php echo $this->get_field_id(‚text‘)?>‘).tinymce({
// Location of TinyMCE script
script_url : ‚<?php echo $path_tiny?>‘,

// General options
mode : „exact“,
elements :“<?php echo $this->get_field_id(‚text‘)?>“,
theme : „advanced“,
plugins : „tabfocus,pagebreak,style,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,visualchars,nonbreaking,xhtmlxtras,template“,
// Theme options
theme_advanced_buttons1 : „bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect“,
theme_advanced_buttons2 : „cut,copy,paste,pastetext,pasteword,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,|,forecolor,backcolor“,
theme_advanced_buttons3 : „tablecontrols,|,hr,|,sub,sup,|,charmap,emotions,iespell,advhr,image“,
theme_advanced_buttons4 : „“,
theme_advanced_toolbar_location : „top“,
theme_advanced_toolbar_align : „left“,
theme_advanced_statusbar_location : „bottom“,
theme_advanced_resizing : true,
relative_urls : false,
tab_focus : „:prev,:next“
});
});

Das zweite Problem, den Fehler von WordPress, kann man umgehen, wenn man das Drag&Drop ausschaltet, also auf der Widget Seite den Zugänglichkeitsmodus (accessablility mode) einschaltet (Optionen einblenden, oben rechts).

Man erkennt das Problem, wenn man in das tinymce Fenster nichts eintragen kann. Es bekommt „keinen Focus“.

Wenn man das Ausschalten von Drag&Drop nicht möchte, muss man, bis wordpress den Fehler behebt, das Widget im Sidebar Dock platzieren und sofort speichern. Danach kann man alle Felder normal mit Text oder Bildern befüllen.

Wer interessiert ist, bitte melden. dann stelle ich mein Widget hier zum Download auf die Seite

Gruß

norbel

Hier der Code zum Download zum Experimentieren

Enthalten ist eine aktuelle tinymce Version mit dem jQuery Plugin von Moxicode

rich_text_widget

Neustart von it-in-a-box.com

16. Februar 2011 - Uncategorized

Nach einer mittleren Katastrophe mit vollständigem Datenverlust auf dem Server und Backupserver, hervorgerufen durch den Umzug des Hosters, meldet sich it-in-a-box.com wieder im Web.

Diesmal aufgebaut mit dem Xtreme Framework von Micha Preuß.

Schön ist an Xtreme, dass man das Layout auch im Betrieb dynamisch umbauen kann. Auf der anderen Seite bringt es neue Komplexität mit sich. Man weiss erstmal einfach nicht, wo man hingreifen muss, um irgend etwas zu ändern, das nicht im (riesigen) Konfigurationsmenü erscheint. Trotzdem: sehr empfehlenswert. Ich hoffe nicht, dass die Leute von dynamicinternet den Forum Traffic bekommen, den man bei wordpress zeitweilig beobachten kann. Etwa eine Anfrage pro Minute. Kein Wunder, dass das Meiste nicht beantwortet wird.