Joomla! Programmierung/Programmierung/Plugins/Editoren

Aus Joomla! Dokumentation
Wechseln zu: Navigation, Suche

Dieser Artikel benötigt Kenntnisse in: CSSCSS und CSS

Inhaltsverzeichnis

Info.png

Editoren dienen zum bearbeiten von Content in Joomla!. Meist handelt es sich hierbei um sogenannte WYSIWYG Editoren, da diese im Allgemeinen für Menschen mit weniger HTML Kenntnissen leichter zu bedienen sind.

Es gibt jedoch auch andere...
Der Quellcode Editor EditArea in Joomla! eingebunden.

Gehören Sie auch zu den Menschen, die am liebsten den in Joomla! ebenfalls enthaltenen No Editor benutzen ?

Dieses einfache Textfeld bringt Menschen mit etwas mehr HTML Kenntnissen meist schneller zum gewünschten Ergebnis. Das monochrome Erscheinungsbild erinnert mich jedoch immer mit Schrecken an meine glücklicherweise hinter mir liegende Windows Zeit und das dort vorhandene NotePad - mein ständiger Begleiter... ok wird vielleicht wieder gestrichen ;) Baustelle..

Vielleicht sind Sie ja schon einmal mit dem Code Editor EditArea [1] in Berührung gekommen. Dieser Editor dient zum bearbeiten von reinem Quellcode. Er bietet hier Syntaxhighlighting für eine Vielzahl an Sprachen. Ebenso können Tabulatoren genutzt werden, und selbst eine Autovervollständigung befindet sich schon in der Entwicklung.

Warum ist bisher noch niemand auf die Idee gekommen diese Perle in Joomla! zu integrieren ?

Wir werden dies jetzt nachholen.

Dateien im Paket Dateien installiert
File zip.png editarea.zip (tar.gz, ...)
Folder red.png editarea
File white.png alle EditArea Dateien [1]
File php.png editarea.php
File xml.png editarea.xml
Folder blue.png plugins
Folder green.png editors
Folder red.png editarea
File white.png alle EditArea Dateien [1]
File php.png editarea.php
File xml.png editarea.xml

Hinweis.png Bitte beachten Sie, dass die Dateien des EditArea Skripts separat heruntergeladen [1] werden müssen, und sich im Unterverzeichnis Folder red.png editarea befinden müssen.

24px-Tip.png Die Joomla! Version Joomla 1.6 wird sehr wahrscheinlich den Codeeditor CodeMirror enthalten.

[Bearbeiten] editarea.php

/**
 * @PHP 5
 */
 
//-- No direct access
defined('_JEXEC') or die('.');
 
jimport('joomla.event.plugin');
 
/**
 * EditArea code editor adapter
 */
class plgEditorEditArea extends JPlugin
{
 
    /**
     * Constructor.
     */
    function __construct(& $subject, $config)
    {
        parent::__construct($subject, $config);
    }//function
 
    /**
     * Läd das für EditArea benötigte Javascript in den <head> Bereich der Webseite.
     *
     * @return string JavaScript Initialization string
     */
    function onInit()
    {
        return '<script type="text/javascript" src="'.JURI::root().'/plugins/editors/editarea/edit_area_full.js"></script>';
    }//function
 
    /**
     * Den Inhalt des Editors zurückgeben
     *
     * @param string $editor Der Name des Editors
     */
    function onGetContent($editor)
    {
        return "editAreaLoader.getValue('$editor');";
    }//fuction
 
    /**
     * Den Inhalt des Editors setzen
     *
     * @param string $editor Der Name des Editors
     * @param string $html Der zu ersetzende Text
     */
    function onSetContent($editor, $html)
    {
        return "editAreaLoader.setValue('$editor', '$html');";
    }//function
 
    /**
     * Den Inhalt des Editors speichern
     *
     * @param string $editor Der Name des Editors
     */
    function onSave($editor)
    {
        return "$('$editor').value = editAreaLoader.getValue('$editor');";
    }
 
    /**
     * EditArea Code editor Editor - display the editor
     *
     * @param string The name of the editor area
     * @param string The content of the field
     * @param string The name of the form field
     * @param string The width of the editor area
     * @param string The height of the editor area
     * @param int The number of columns for the editor area
     * @param int The number of rows for the editor area
     * @param mixed Can be boolean or array.
     */
    function onDisplay( $name, $content, $width, $height, $col, $row, $buttons = true )
    {
        //-- Das modal popup behavior laden
        JHTML::_('behavior.modal', 'a.modal-button');
 
 
        //-- Den Tag der Sprache über das globale JLanguage Objekt beziehen
        $lang = substr(JFactory::getLanguage()->getTag(), 0, 2);
 
        //-- Syntax zum highlighten
        $syntax = 'html';
 
        //-- Javascriptdeklaration zum initialisieren des Editors
        $js= "window.addEvent('domready', function() {
           editAreaLoader.init({
           id : '$name'            // textarea id
           ,language: '$lang'      // Die Sprache die genutzt werden soll (z.B. Deutsch, Englisch usw.)
           ,syntax: '$syntax'         // syntax to be uses for highgliting
           ,start_highlight: true  // to display with highlight mode on start-up
           })
        });";
 
        //-- Javascript an das JDocument Objekt übergeben
        JFactory::getDocument()->addScriptDeclaration($js);
 
        //-- Definieren des Bereichs für die EditArea
        $html = '';
        $html .= '<textarea style="width: 100%; height: 600px;" id="'.$name.'" name="'.$name.'">'.$content.'</textarea>';
 
        //-- Die editor-xtd Buttons hinzufügen
        $html .= $this->_displayButtons($name, $buttons);
 
        return $html;
    }//function
 
    function onGetInsertMethod($name)
    {
        $js= "function jInsertEditorText( text ) {
            editAreaLoader.setSelectedText('$name', text);
        }";
        JFactory::getDocument()->addScriptDeclaration($js);
 
        return true;
    }//function
 
    function _displayButtons($name, $buttons)
    {
        // Load modal popup behavior
        JHTML::_('behavior.modal', 'a.modal-button');
 
        $args['name'] = $name;
        $args['event'] = 'onGetInsertMethod';
 
        $return = '';
        $results[] = $this->update($args);
        foreach ($results as $result)
        {
            if (is_string($result) && trim($result))
            {
                $return .= $result;
            }
        }//foreach
 
        if( ! empty($buttons) )
        {
            $results = $this->_subject->getButtons($name, $buttons);
 
            $return .= '<div id="editor-xtd-buttons">';
            foreach( $results as $button )
            {
                if( $button->get('name') )
                {
                    $modal = ($button->get('modal')) ? 'class="modal-button"' : null;
                    $href = ($button->get('link')) ? 'href="'.$button->get('link').'"' : null;
                    $onclick = ($button->get('onclick')) ? 'onclick="'.$button->get('onclick').'"' : null;
 
                    $return .= '<div class="button2-left">';
                    $return .= '<div class="'.$button->get('name').'">';
                    $return .= '<a $modal title="'.$button->get('text').'" $href $onclick rel="'.$button->get('options').'">';
                    $return .= $button->get('text');
                    $return .= '</a></div></div>';
                }
            }//foreach
            $return .= '</div>';
        }
        return $return;
    }//function
 
}//class

[Bearbeiten] editarea.xml

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="editors">
	<name>Editor - EditArea for Joomla!</name>
	<author>wiki.joomla-nafu.de</author>
	<creationDate>2009-Dec-31</creationDate>
	<copyright>(C) All rights reserved.</copyright>
	<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
	<authorEmail>info@example.com</authorEmail>
	<authorUrl>http://wiki.joomla-nafu.de</authorUrl>
	<version>1.0</version>
	<description>Includes EditArea Code editor</description>
	<languages>
<!-- 		<language tag="en-GB">en-GB.plg_.ini</language> -->
	</languages>
	<files>
		<filename plugin="editarea">editarea.php</filename>
	</files>
	<params />
</install>

[Bearbeiten] Quellen

  1. 1,0 1,1 1,2 1,3 EditArea Website

Siehe auch:

Meine Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Sonstiges
Team Navigation
Werkzeuge