ok TinyMCE Rich Text Editor mit Responsive Filemanager | CMS - Webdesign - Website

TinyMCE Rich Text Editor mit Responsive Filemanager

Responsive Filemanager

Responsive Filemanager im TinyMCE Editor für Multi-User-Konfigurationen (responsivefilemanager.com)

Derzeit ist der TinyMCE Rich Text Editor eine gute Wahl für Webanwendungen, in denen formatierte Texte  erstellt bzw. bearbeitet werden sollen (wie etwa in CMS oder hier in einem WordPress Blog). Das Grundprinzip dieses und auch anderer Rich Text Editoren wie CKEditor ist das dynamische Ersetzen eines normalen textarea-Formularfeldes durch den Editor.

Der TinyMCE wird von der Website kostenlos heruntergeladen und auf der eigenen Website hochgeladen. Die Installation ist denkbar simpel. Als Basis-Konfiguration muss in jeder Website, die den Editor verwenden soll, im HEAD-Bereich etwas Code platziert werden, der auf das zentrale JavaScript des Editors verweist. Z.B. so:

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>
<!-- Place this in the body of the page content -->
<form method="post">
    <textarea></textarea>
</form>

Mit der Initialisierung durch tinymce.init wird definiert, dass jedes HTML-Formular-Element „textarea“ durch den Editor ersetzt wird.

Filemanager

Meist hat man auch die Anforderung, Bilder oder Dokumente im Content zu verankern bzw. zu verlinken und somit diese Dateien direkt im Editor auf den Server hochzuladen. Der TinyMCE Editor hat Out of the Box keine File-Upload-Funktion. Der Editor ist aufrüstbar mit einem Filemanager Plugin, genannt „Responsive Filemanager„. Die Installation ist ein klein wenig komplexer:

Der Ordner „filemanager“ mit den Inhalten wird irgendwo auf der eigenen Website hochgeladen. Dann einen Ordner anlegen, in dem die Fileuploads landen sollen (z.B. „uploads“) und einen für die Thumbnails (Kleinbilder), z.B. „thumbs“. Die Ordner müssen Schreibrechte haben, z.B. 755. Die Konfiguration des Filemanagers muss angepasst werden: filemanager/config/config.php:

Es muss das Verzeichnis für den Fileupload und die Thumbs (Kleinbilder) definiert werden, so wie zuvor angelegt.

base_url http://site.com base url der Site (ohne / am Ende). Für relative Pfade kann man das leer lassen
upload_dir /uploads/ Pfad unter der base_url zum Upload-Verzeichnis (mit / am Anfang und Ende).
current_path ../uploads/ Relativer Pfad vom Verzeichnis filemanager zum Upload-Verzeichnis (mit / am Ende).
thumbs_base_path ../thumbs/ Relativer Pfad vom Verzeichnis filemanager zum thumbs-Verzeichnis (mit / am Ende). Das thumbs-Verzeichnis darf nicht innerhalb des Upload-Verzeichnis sein.

Der Ordner tinymce/plugins/responsivefilemanager im Responsive Filemanager Paket muss kopiert werden in das Verzeichnis tinymce/plugins/ innerhalb der TinyMCE-Installation auf dem Server.

Im HEAD-Bereich der Website, in der das ganze laufen soll, muss folgendes konfiguriert werden, um das Plugin  Responsive Filemanager im TinyMCE verfügbar zu machen:

tinymce.init({
selector: "textarea",theme: "modern",width: 680,height: 300,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table contextmenu directionality emoticons paste textcolor responsivefilemanager"
],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
image_advtab: true ,
   external_filemanager_path:"/filemanager/",
filemanager_title:"Responsive Filemanager" ,
external_plugins: { "filemanager" : "/filemanager/plugin.min.js"}
});

 Sandbox für Multiuser

In Multi-User-Umgebungen wie z.B. in einem Firmen-Intranet hat man häufig die Anforderung, so einen Editor mehreren Usern gleichzeitig zur Verfügung zu stellen und sicherzustellen, dass jeder User seinen eigenen Bereich für den Upload von Bildern und Dokumenten zur Verknüpfung im Content verwendet. So ist sichergestellt, dass nicht ein User die Dateien des anderen überschreibt oder löscht.

Für den Responsive Filemanager kann man dies relativ einfach realisieren:

In der Konfigurationsdatei config.php ganz oben bauen wir eine Authentisierungsabfrage ein. Voraussetzung ist hierbei, dass auf dem Webserver eine HTTP Basic Authentication mit Usern und Groups konfiguriert ist. Man kann dies mittels .htaccess-Dateien machen oder in der Konfiguration des Webservers definieren.

if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="News"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Login with your OPS Windows Account or call the User Help Desk';
    exit;
} else {
    $author = $_SERVER['PHP_AUTH_USER'];
}

D.h. es wird in jedem Fall eine Authentisierung erzwungen und der User muss sich mit Username und Passwort anmelden. Ab der gültigen Anmeldung steht sein Username als Server-Variable in PHP zur Verfügung: $_SERVER[‚PHP_AUTH_USER‘]

Etwas weiter unten in der config.php, nach dem Abschnitt mit der Definition der Upload-Folder, wird dann folgender Code eingefügt:

// Subfolder für aktuellen User (ausser für den Admin-User "cedisadm") anlegen:
if($author != "admin"){
    $userDir = $current_path."autoren/".$author."/";
    if(!is_dir($userDir)){ // Userfolder anlegen falls noch nicht vorhanden
        mkdir($userDir, 0700, true) or die ("konnte Folder $author nicht anlegen");
    }
    $_SESSION["subfolder"] = 'autoren/'.$author.'/';
}

Im Beispiel wird festgelegt, dass jeder angemeldete User automatisch ein eigenes Verzeichnis erhält, das genauso benannt ist wie sein Username. Falls er sich zum ersten Mal anmeldet wird dieses Verzeichnis angelegt auf dem Server (mkdir). In der Session wird dieser Subfolder als Startverzeichnis für den angemeldeten User definiert. Im Beispiel hier wird ausserdem eine Ausnahme für einen Admin-User definiert (if($author != „admin“)). Die Zuordnung eines User-Unterverzeichnis erfolgt also nur, wenn der angemeldete Username nicht „admin“ lautet.

Ab jetzt können beliebig viele User mit dem Editor arbeiten und auch Dateien hochladen und selbst verwalten (löschen etc.), ohne sich gegenseitig ins Gehege zu kommen.