{"id":1414,"date":"2018-09-06T12:19:31","date_gmt":"2018-09-06T10:19:31","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1414"},"modified":"2018-11-10T10:35:43","modified_gmt":"2018-11-10T09:35:43","slug":"quickdirty-editor-fuer-html-posts-mit-vorschaufunktion","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/09\/06\/quickdirty-editor-fuer-html-posts-mit-vorschaufunktion\/","title":{"rendered":"Quick&Dirty Editor f\u00fcr HTML-Posts mit Vorschaufunktion"},"content":{"rendered":"

Wer viel mit CMS umgeht, kennt das zur Gen\u00fcge: in der Datenbank landet im Feld f\u00fcr den Inhalt eines beliebigen Posts oder einer Seite Text mit jeder Menge HTML-Tags, schlie\u00dflich arbeitet man ja mit dem TinyMCE oder einem seiner Verwandten.Das sieht zum Beispiel in WordPress so aus:<\/p>\n

<h2>Einleitung<\/h2>\r\nIn M\u00fcnchen-Haidhausen gibt es einen wunderbaren Laden, den \"Liquid\", da kann man erlesene Alkoholika auch in kleinen Mengen (ab 0,1 l) kaufen. Daher gibt es bei mir die Scaloppine mal mit Marsala, mal mit Sherry, oder ich bereite sie mit Portwein zu, ganz nach Lust und Laune. Wichtig ist, da\u00df der Wein eher von der lieblichen Sorte sein soll, nur dann bekommt die Sauce den sch\u00f6nen vollmundigen Geschmack.\r\n<h2>Zutaten<\/h2>\r\nF\u00fcr 4 Personen:\r\n\r\n4 Kalbsschnitzel oder 8 d\u00fcnn geschnittene Minutensteaks, alle Fettr\u00e4nder und H\u00e4utchen sorgf\u00e4ltig abgeschnitten, Mehl zum wenden. Je 1 El Butter und gutes Oliven\u00f6l, Salz, Pfeffer.\r\nZum Abl\u00f6schen: 1 kleines Glas lieblicher S\u00fcdwein.\r\nNoch 1 El. eiskalte Butter.\r\n<h2>Zubereitung<\/h2>\r\nSiehe <a href=\"http:\/\/evileu.de\/inselfisch-kochbuch\/2017\/01\/12\/schnitzel-mit-zitrone-scaloppine-al-limone\/\">Scaloppine Grundrezept<\/a>, zum Abl\u00f6schen ein kleines Glas S\u00fcdwein (s.oben) nehmen. Man kann die Scaloppine auch noch mit etwas feingehackter Petersilie bestreuen, aber das mu\u00df nicht unbedingt sein.<\/pre>\n
Das ist der post_content eines Rezeptes f\u00fcr Scaloppine. Im Inselfisch-Kochbuch sieht das so aus:<\/p>\n
\"scaloppine\"
scaloppine<\/p><\/div>\n
Recht und sch\u00f6n, aber im richtigen Leben kommt es immer wieder mal vor, dass man Content aus einem CMS abzieht und in einem anderen CMS weiterverwenden m\u00f6chte. Das geht in den seltensten F\u00e4llen ohne umfangreiche Nacharbeiten, und nicht alles kann man programmgesteuert erledigen.<\/p>\n
Man kann mit PHP nat\u00fcrlich alle HTML-Tags entfernen (siehe strip_tags Doku)<\/a> und dabei sogar Ausnahmen definieren, welche Tags drinbleiben d\u00fcrfen, und man kann sich auch mit preg_replace mehr oder weniger geniale Ersetzungen einfallen lassen. Aber das hat auch so seine Nachteile.<\/p>\n
In dem Scaloppine-HTML ist zum Beipiel ein Link drin, der auf das Inselfisch-Kochbuch auf evileu.de verweist, das kann nat\u00fcrlich nicht so bleiben. Schmei\u00dft man alle Links programmatisch komplett raus, ergibt der Text keinen Sinn mehr, da fehlt dann f\u00fcr das ganze Rezept die Zubereitung. Hier m\u00fc\u00dfte man, wenn man es ganz richtig machen will, dem Link nachgehen und den entsprechenden Zubereitungstext rauskopieren. Das ist nat\u00fcrlich aufwendig, aber im Zweifelsfall die einzig richtige L\u00f6sung.<\/p>\n
Tscha, was macht man jetzt, wenn man vor ein paar Hundert Posts sitzt, die manuell \u00fcberarbeitet werden m\u00fcssen? Man \u00fcberlegt sich eine Arbeitserleichterung.<\/p>\n
Voraussetzungen<\/h2>\n
Ich hab mir mal aus der WordPress posts-Tabelle nur die minimalsten Rohdaten abgezogen, n\u00e4mlich die ID, den Titel und den Content, gefiltert nach post_type = post und post_status=publish, das sind die Kerndaten aller ver\u00f6ffentlichten Kochrezepte. Wenn ich sonst noch was brauchen sollte, den Autor oder das Datum oder sogar die Kategorien oder sonstwas, das kann ich mir sp\u00e4ter \u00fcber die ID wieder dazulinken. Das selbe k\u00f6nnte ich auch mit Joomla-Beitr\u00e4gen oder Drupal-Nodes machen, Hauptsache die ID kommt mit und der Titel und Content passen. Und das Ganze ist eigentlich nur sinnvoll, wenn die Posts nicht allzu lang sind, aber meine Kochrezepte gehen selten \u00fcber eine Bildschirmseite hinaus.<\/p>\n
Wir basteln uns einen Quick&Dirty Editor<\/h2>\n
Damit man jetzt nicht immer direkt in der Datenbank rumpfuschen muss, wenn man in einem HTML-Post etwas \u00e4ndern will, habe ich mir eine zwar nur als Arbeitspferd geeignete, aber durchaus zeitsparende L\u00f6sung \u00fcberlegt. Ich habe bei meinen ganzen Snippets zur Pagination gekupfert und mir ein PHP-Script gebaut, in dem pro Seite ein Datensatz dargestellt wird. Es gibt eine rudiment\u00e4re Navigation (voriger\/n\u00e4chster Datensatz), das reicht mir f\u00fcr die Arbeit, schlie\u00dflich gucke ich im Zweifelsfall einen Datensatz nach dem anderen durch. Dann habe ich mit Hilfe einer Tabelle zwei Bildschirmbereiche konstruiert, im ersten wird der HTML-Code dargestellt und kann editiert werden, im zweiten gibt es eine Vorschau des Ergebnisses. Noch ein Kn\u00f6pfchen zum Speichern der \u00c4nderungen, und es kann losgehen.<\/p>\n
\"qe_scaloppine\"
qe_scaloppine<\/p><\/div>\n
F\u00fcr den Fall dass ich zu einem bestimmten Datensatz springen m\u00f6chte habe ich ganz unten auch noch eine nummerische Navigation eingebaut, das ist bei \u00fcber 300 Datens\u00e4tzen ganz n\u00fctzlich.<\/p>\n
\"seitenpagination\"
Seitenpagination<\/p><\/div>\n
Wie man mit dem Editor arbeitet<\/h2>\n
Wenn man in einem Post etwas entdeckt hat, das man \u00e4ndern m\u00f6chte, kann man dies direkt im HTML-Fenster tun. Hier habe ich zum Beispiel ein Bild drin, das wird WordPress-typisch in einen caption-Shortcode eingeklemmt, der sorgt in WordPress f\u00fcr die korrekte Darstellung der Bildbeschriftung.<\/p>\n
\"caption\"
caption<\/p><\/div>\n
Ein anderes CMS kennt aber den Shortcode nicht, also muss er raus. Das sieht man auch an der Darstellung im Vorschau-Fenster, der Browser kann nat\u00fcrlich ohne WordPress mit dem Shortcode nix anfangen und stellt ihn als Text dar:<\/p>\n
\"caption_vorschau\"
caption_vorschau<\/p><\/div>\n
Um das zu korrigieren, schmeisse ich im HTML-Fenster die caption-Tags raus und platziere noch ein paar <br> an den geeigneten Stellen, mache gleichzeitig noch einige kleine Textkorrekturen:<\/p>\n
\"ohne_caption\"
ohne_caption<\/p><\/div>\n
Klick auf den Button „\u00c4nderungen speichern“, dann kommt erst mal eine kurze Meldung, ob der Update erfolgreich war:<\/p>\n
\"meldung\"
meldung<\/p><\/div>\n
Und dann kriegt man das Ergebnis im Vorschaufenster angezeigt:<\/p>\n
\"vorschau\"
vorschau<\/p><\/div>\n
Na bitte, das geht doch ratzfatz!<\/p>\n
Ohne Netz und doppelten Boden<\/h2>\n
Da ich beim Klicken auf den „\u00c4nderungen speichern“-Button direkt einen Update auf die Datenbank fahre, sind die \u00c4nderungen nat\u00fcrlich nicht mehr r\u00fcckg\u00e4ngig zu machen, aber das kann ich verschmerzen. Schlimmstenfalls muss ich mir einen Datensatz aus der Originaltabelle wieder herholen, wenn ich ihn total verhunzt habe, aber das ist mir eigentlich noch nicht passiert. Im richtigen Leben wird sowas eh der Praktikant machen, und der kann HTML und wei\u00df was er tut, wenn er Tags rausschmeisst oder korrigiert.<\/p>\n
Der Q&D-Editor ist ja auch nur als Arbeitshilfe f\u00fcr Entwickler gedacht, und nicht f\u00fcr den Endanwender. Er soll auch nicht den gezielten Einsatz von programmatischen preg_replace-Aktionen ersetzen, die haben ja durchaus auch einen Sinn. Mir gehts immer so, dass ich beim Arbeiten mit dem Editor meistens ganz schnell merke, welche Elemente programmgesteuert rausgeschmissen werden k\u00f6nnen, weil ich immer die selben Tags editiere – und dann ist nat\u00fcrlich ein bisschen zus\u00e4tzliches PHP angesagt. In der Praxis wird man immer eine Kombination aus manuellem Editieren und programmgesteuerten Ersetzungen fahren, damit bin ich eigentlich bis jetzt recht gut klargekommen.<\/p>\n
Und jetzt gibts den Sourcecode des Q&D-Editors, in einem neuen Beitrag.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Wer viel mit CMS umgeht, kennt das zur Gen\u00fcge: in der Datenbank landet im Feld f\u00fcr den Inhalt eines beliebigen Posts oder einer Seite Text mit jeder Menge HTML-Tags, schlie\u00dflich arbeitet man ja mit dem TinyMCE oder einem seiner Verwandten.Das sieht zum Beispiel in WordPress so aus: <h2>Einleitung<\/h2> In M\u00fcnchen-Haidhausen gibt es einen wunderbaren Laden, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,25,11,7,4,63,2,59],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1414"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1414"}],"version-history":[{"count":8,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1414\/revisions"}],"predecessor-version":[{"id":1430,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1414\/revisions\/1430"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}