DokuWiki Editor verbessern

Das Textfeld zum bearbeiten von DokuWiki Seiten maxi- und zentrieren.

Wisser: Skruppy
Mitwisser:

Status: working, finished
Tags: software, DokuWiki, PHP, JavaScript, css

JavaScript

Das editor JS unter lib/scripts/editor.js muss wie follgt angepasst werden.

    /**
     * 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');
    },

Hier der vorher/nacher diff der Änderungen.

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'));

CSS

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

Alter code Schnipsel:

div.dokuwiki div#size__ctl {
    float:right;
    width:60px;
    height:2.7em;
}

Neuer code Schnipsel:

div.dokuwiki div#size__ctl {
    float:right;
    width:80px;
    height:2.7em;
}

reset.gif

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

projects/dw-edit.txt · Zuletzt geändert: 2012/03/30 03:23 von 92.75.16.71