====== DokuWiki Editor verbessern ======
---- datatemplateentry project ----
template      : :sys:tpl:project
description   : Das Textfeld zum bearbeiten von DokuWiki Seiten maxi- und zentrieren.
coordinators  : [[:users:skruppy:]]
confidants    : 
state_tags    : working, finished
type_tags     : software, DokuWiki, PHP, JavaScript, css
----

===== JavaScript =====
Das editor JS unter ''lib/scripts/editor.js'' muss wie follgt angepasst werden.
<code javascript>
    /**
     * Add the edit window size and wrap controls
     *
     * Initial values are read from cookie if it exists
     *
     * @param selector ctlarea the div to place the controls
     * @param selector editor  the textarea to control
     */
    initSizeCtl: function(ctlarea,editor){
        var $ctl      = jQuery(ctlarea),
            $textarea = jQuery(editor);

        if($ctl.length === 0 || $textarea.length === 0) {
            return;
        }

        this.resetEditorSize(editor);

        var wrp = DokuCookie.getValue('wrapCtl');
        if(wrp){
            dw_editor.setWrap($textarea[0], wrp);
        } // else use default value

        jQuery.each([
            ['larger', function(){dw_editor.incEditorSize(editor,100);}],
            ['smaller', function(){dw_editor.incEditorSize(editor,-100);}],
            ['reset', function(){dw_editor.resetEditorSize(editor);}],
            ['wrap', function(){dw_editor.toggleWrap(editor);}]
        ], function (_, img) {
            jQuery(document.createElement('IMG'))
                .attr('src', DOKU_BASE+'lib/images/' + img[0] + '.gif')
                .click(img[1])
                .appendTo($ctl);
        });
    },
    /*
     Toolbar border :   2
     Toolbar height:   20
     Toolbar border:    2
     Text border:       1
     Text padding:      4 (only on top!)
     Text border:       1
     Span:              3
     Button margin:     1
     Button border:     1
     Button padding:    1
     Button height:    20
     Button padding:    1
     Button border:     1
     Button margin:     1
     ====================
                       59
    */
    resetEditorSize: function(editor) {
        var $textarea = jQuery(editor);
        $textarea.css('height', window.innerHeight - 60 + 'px');
        window.location.hash = "#tool__bar";
    },

    /**
     * This sets the vertical size of the editbox and adjusts the cookie
     *
     * @param selector editor  the textarea to control
     * @param int val          the relative value to resize in pixel
     */
    incEditorSize: function(editor,val){
        var $textarea = jQuery(editor),
            height = parseInt($textarea.css('height')) + val;
        $textarea.css('height', height+'px');
    },
</code>

Hier der vorher/nacher diff der Änderungen.
<code diff>
54c54
<         $textarea.css('height', DokuCookie.getValue('sizeCtl') || '300px');
---
>         this.resetEditorSize(editor);
62,63c62,64
<             ['larger', function(){dw_editor.sizeCtl(editor,100);}],
<             ['smaller', function(){dw_editor.sizeCtl(editor,-100);}],
---
>             ['larger', function(){dw_editor.incEditorSize(editor,100);}],
>             ['smaller', function(){dw_editor.incEditorSize(editor,-100);}],
>             ['reset', function(){dw_editor.resetEditorSize(editor);}],
71a73,95
>     /*
>      Toolbar border :   2
>      Toolbar height:   20
>      Toolbar border:    2
>      Text border:       1
>      Text padding:      4 (only on top!)
>      Text border:       1
>      Span:              3
>      Button margin:     1
>      Button border:     1
>      Button padding:    1
>      Button height:    20
>      Button padding:    1
>      Button border:     1
>      Button margin:     1
>      ====================
>                        59
>     */
>     resetEditorSize: function(editor) {
>         var $textarea = jQuery(editor);
>         $textarea.css('height', window.innerHeight - 60 + 'px');
>         window.location.hash = "#tool__bar";
>     },
79c103
<     sizeCtl: function(editor,val){
---
>     incEditorSize: function(editor,val){
83d106
<         DokuCookie.setValue('sizeCtl',$textarea.css('height'));
</code>

===== CSS =====
In ''lib/tpl/*/design.css'' files muss noch die ''width:'' der button box angepasst werden.

Alter code Schnipsel:
<code css>
div.dokuwiki div#size__ctl {
    float:right;
    width:60px;
    height:2.7em;
}
</code>

Neuer code Schnipsel:
<code css>
div.dokuwiki div#size__ctl {
    float:right;
    width:80px;
    height:2.7em;
}
</code>


===== reset.gif =====
Follgend eingebundenes Bild muss noch nach ''lib/images/reset.gif'' kopiert werden.

{{:projects:reset.gif|}}