DokuWiki - How to show the edit buttons on section headers

Question

In DokuWiki, is there any plugin compatible with the latest stable release (2009-02-14), that can show the edit buttons on section headers (like Wikipedia or MediaWiki) instead of showing them at the end of the section's text.

The default way is confusing since when you want to edit a section you have to scroll to the end of its content's and click the edit button there.

Answer 1

Okay, I figured out how to do it myself, and here is the solution so you can have edit buttons on the section headers, like Wikipedia.

Open up the following file in a text editor.

"\dokuwiki\inc\parser\handler.php"

Near line 110 you will find this:

    if ($level<=$conf['maxseclevel']) {
        $this->_addCall('section_edit',array($this->status['section_edit_start'], $pos-1, $this->status['section_edit_level'], $this->status['section_edit_title']), $pos);
        $this->status['section_edit_start'] = $pos;
        $this->status['section_edit_level'] = $level;
        $this->status['section_edit_title'] = $title;
    }

Replace the above with this:

    if ($level<=$conf['maxseclevel']) {
        $this->status['section_edit_start'] = $pos;
        $this->status['section_edit_level'] = $level;
        $this->status['section_edit_title'] = $title;
        $this->_addCall('section_edit',array($this->status['section_edit_start'], $pos-1, $this->status['section_edit_level'], $this->status['section_edit_title']), $pos);
    }

Save and close the PHP file, and reload an article on your wiki -- and voila! you have successfully "modded" DokuWiki to have edit buttons near every header, to edit the corresponding section.

Hope this helps.

Answer 2

It doesn't seem possible to do this in the PHP due to how the rendering is done we won't know the end range of the section but we can move the buttons once the page has been rendered with javascript.

For release 2016-06-26a "Elenor of Tsort", edit lib/scripts/page.js and insert:

/**
 * Moves the edit buttons beside the headings once it has the edit end range since we dont know it when rendering the heading in PHP.
 */
moveEditButtonsToHeadings: function(){
    jQuery('form.btn_secedit').each(function(){
    var $tgt = jQuery(this).parent(),
        $editButton = jQuery(this).parent(),
            nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2];

        // Walk the dom tree in reverse to find the sibling which is or contains the section edit marker
        while($tgt.length > 0 && !($tgt.hasClass('sectionedit' + nr) || $tgt.find('.sectionedit' + nr).length)) {
            $tgt = $tgt.prev();
        }

        // move the edit button and adjust the styles
        $tgt.css('display', 'inline-block');
        $editButton.detach().insertAfter($tgt);
        if ($tgt.prop("tagName") == 'H1') {
            $editButton.css('marginTop', '0.4em');
        } else if ($tgt.prop("tagName") == 'H2') {
            $editButton.css('marginTop', '0.2em');
        } else {
            $editButton.css('marginTop', '0.0em');
        }
        $editButton.css('marginRight', '10px');
        $editButton.css('float', 'left');
    });
},

sectionHighlight2: function() {
    jQuery('div.secedit')
        .mouseover(function(){
            var $tgt = jQuery(this),
                $level = $tgt.next();
            $level.addClass('section_highlight');
        })
        .mouseout(function(){
            var $tgt = jQuery(this),
                $level = $tgt.next();
            $level.removeClass('section_highlight');
        });
}

Change the init function to call the two new functions and comment out the old sectionHighlight.

init: function(){
    //dw_page.sectionHighlight();
    dw_page.moveEditButtonsToHeadings();
    dw_page.sectionHighlight2();
    jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay);
    dw_page.makeToggle('#dw__toc h3','#dw__toc > div');
}