Montag, September 26th, 2011
Mit dem TinyMce bin ich soweit zufrieden. Er erfühlt zurzeit noch meine Bedürfnisse, doch eins viel mir ein als ich beim CKEditor eine Funktion bemerkte die so in TinyMce nicht vorhanden ist. Mit der Funktion kann man die Elemente im Text heforheben mit einem Rahmen der zeigt welches Element es ist. Leider hat TinyMce von Haus aus nicht dieses Feature und ich hab leider kein Plugin gefunden welches mir diese Funktion gib. So musste ich etwas Hand anlegen und eigenen Plugin schreiben.
Das Ergebnis ist einfach geschrieben, reicht mir vollkommen aus und bietet mir jetzt die Möglichkeit die Elemente mit Rahmen zu versehen wie im Screenshot zu sehen:
Das Plugin benötigt jQuery und kann schnell in den TinyMce integriert werden:
1. Schritt: Plugin hier runter laden und in den tiny_mce/plugins Ordner entpacken.
2. Schritt: TinyMce Config mit dem Parameter showblocks erweitern.
TinyMce Config:
plugins : "pluginA,pluginB,PluginC,...,showblocks",
theme_advanced_buttons1 : "showblocks,|,bold,italic,underline,strikethrough,..."
3. Schritt: Jetzt kann man den Plugin etwas steuern, in dem man im sagen kann ob er schon sofort die Elemente umrahmen soll oder man kann die Hover Funktion abschalten.
show_blocks: 1, // (optional) show blocks by open the editor
show_blocks_hover: 0 // (optional) hover Tag name 1 or show it permanent 0
Viel Spaß.
Posted in Allgemein | 1 Comment »
Samstag, April 16th, 2011
Vor zwei Jahren stand ich vor einer Entscheidung, welchen WYSIWYG Editor werde ich in meinem CMS System einsetzen. Damals kannte ich mich nicht so großartig mit den Unterschieden der beiden Editoren aus und sie sollten einfach ihre Arbeit leisten. So entschied ich mich für den FCKEditor, da er einen FileManager kostenlos hatte. Nach einem Jahr Einsatz, hab ich den FCKEdtor durch den CKEditor ersetzt und es waren schon kleine Vorteile bemerkbar. Zumindest hatte er nicht mehr die PHP Schnittstelle und war etwas besser gestaltet. Da der CKEditor keinen FileManager an Bord mehr hatte, hab ich den Ajax FileManager eingesetzt und wahr zufrieden. Mit der Zeit hab ich auch den Ajax FileManager durch den Djenx-Explorer ersetzt.
Doch wie man ist, strebt man immer dem Perfektionismus zu und schaut sich viele Projekte an und merkt das TinyMCE doch mehr im Einsatz ist. So wurde ich wieder neugierig, hab den TinyMCE mal wieder angeschaut und fand schon den ersten Vorteil. Er kann mit Tabellen viel besser umgehen weil er komplette Techniken um eine Tabelle zu bearbeiten direkt mitbringt, was ja der CKEditor nicht hat. So hab ich ihn gezogen, kurz und schmerzlos in mein CMS integriert und nur an ein einem Tag wusste ich, dass der TinyMCE dem CKEditor viel überlegener ist.
TinyMCE wurde einfach besser umgesetzt, hat bessere Features wie Tabellen, Bilder, Links mit Listen und ist auch im Code einfacher zu handhaben. Die Dokumentation ist übersichtlicher und man versteht sie sofort und nicht die Komplexe CKEditor Dokumentation, wo man Beispiele anschaut und noch nicht mal den Ansatz (Was und wie Verdammt noch mal soll ich es einsetzen?) versteht. Man kann noch mehr Vorteile aufschreiben aber ich brauche das nicht den ich weiß jetzt den TinyMCE zu schätzen.
Wenn man einen FileManger wünscht, so kann man immer noch den Djenx-Explorer einsetzen, leider ist er nicht auf deutsch und hat noch seine mini Bugs, aber man kann mit ihm als Provisorische Lösung leben.
Mein Fazit: TinyMCE
Posted in Allgemein | No Comments »
Donnerstag, März 10th, 2011
Vor ein paar Wochen habe ich lange nach einer Lösung gesucht und aufgegeben, weil auch die CKEditor Event Seite war mir nicht genug. Heute hab ich es nochmal probiert und fand hier die Lösung:
var ckeditorInstance = CKEDITOR.replace("mytextarea");
ckeditorInstance.on("instanceReady", function()
{
this.document.on("keyup", CKCHANGED);
this.document.on("paste", CKCHANGED);
}
);
function CKCHANGED() {
formchanged = 1;
}Gebraucht wird die Lösung um zu erkennen ob der User den Inhalt im CKEditor Textarea geändert hat und ihn beim verlassen der Seite zu warnen, dass er sein Code verändert hat ohne gespeichert zu haben. (Ich benutze es mit jQuery)
var formchanged = 0;
var submitted = 0;
$(document).ready(function() {
$('form').each(function(i,n){
$('input', n).change(function(){formchanged = 1});
$('textarea', n).change(function(){formchanged = 1});
$('select', n).change(function(){formchanged = 1});
$(n).submit(function(){submitted=1});
});
});
window.onbeforeunload = confirmExit;
function confirmExit()
{
if(formchanged == 1 && submitted == 0)
return "Sie verlassen die Seite ohne gespeichern zu haben.";
else
return;
}Posted in Tipps | No Comments »
