Einbinden eines Rich Text-Editors

Erstelle Dein eigenes WYSIWYG-Editor-Plugin.

Elgg enthält standardmäßig ein Plugin, das CKEditor- als Rich Text-Editor verwendet (frühere Versionen verwendeten den TinyMCE-Editor). Wenn Du allerdings einen anderen WYSIWYG-Editor bevorzugst, kannst Du anhand dieser Anleitung ein Plugin entwickeln, das den Editor Deiner Wahl verwendet.

All forms in Elgg should try to use the provided input views located in views/default/input. If these views are used, then it is simple for plugin authors to replace a view, in this case input/longtext, with their wysiwyg.

Hinzufügen der Laufzeit-Bibliotheken des Editors

Now you need to upload TinyMCE into a directory in your plugin. We strongly encourage you to use composer to manage third-party dependencies, since it is so much easier to upgrade and maintain that way:

.. code-block:: sh

composer require bower-asset/tinymce

Elgg mitteilen, wann und wie TinyMCE zu laden ist

Du hast nun:

• Deine start-Datei erzeugt
• das Plugin initialisiert
• den Code des WYSIWYG-Editors hinzugefügt

Es ist nun Zeit, Elgg mitzuteilen, wie TinyMCE bei longtext-Eingabefeldern zu verwenden ist.

Dazu erweitern wir die input/longtext-View und fügen ein wenig Javascript-Code hinzu. Erzeuge eine View namens tinymce/longtext und füge folgenden Code in ihr hinzu:

<?php

    /**
     * Elgg long text input with the tinymce text editor intacts
     * Displays a long text input field
     *
     * @package ElggTinyMCE
     *
     *
     */

?>
<!-- include tinymce -->
<script language="javascript" type="text/javascript" src="<?php echo $vars['url']; ?>mod/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<!-- intialise tinymce, you can find other configurations here http://wiki.moxiecode.com/examples/tinymce/installation_example_01.php -->
<script language="javascript" type="text/javascript">
   tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],
hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
</script>

Erweitere anschließend die input/longtext-View in der Init-Funktion Deines Plugins:

function tinymce_init() {
    elgg_extend_view('input/longtext', 'tinymce/longtext');
}

Das ist alles! Von nun an wird in allen Fällen, in denen ein input/longtext-Eingabefeld verwendet wird, TinyMCE geladen und an Stelle des Texteingabefeldes angezeigt.