Manual:Custom edit buttons/th

This page is a translated version of the page Manual:Custom edit buttons and the translation is 23% complete.

Outdated translations are marked like this.

WikiEditor

You can add custom edit buttons to the edit toolbar above the edit window using JavaScript (see below). You have to differentiate between the new toolbar added by Extension:WikiEditor and the old one (also known as classic edit toolbar).

mw.user.options.get( 'usebetatoolbar' ) can be used to check if a user is using the wikiEditor (true) or the old toolbar (false).

Adding to JavaScript

Custom buttons utilize JavaScript to implement their functionality. To get the JavaScript to activate on the edit page, there are multiple ways to apply JavaScript to the wiki edit page:

Personal JavaScript — Appropriate on a server with this feature enabled and for buttons you want only available to users who copy the JavaScript into their personal JavaScript.
Extension JavaScript — Appropriate when all or many users of a wiki should be able to use the button. This assumes you are developing an extension to MediaWiki.
Core MediaWiki JavaScript — Appropriate when the new button should be allowed on all wiki installations.

Personal JavaScript

To add new buttons you can include them in your personal JavaScript.

In LocalSettings.php add $wgAllowUserJs = true; or in the MediaWiki:Common.js or as a Gadget.

Extension JavaScript

After the setup of the basic extension structure, the core PHP file will need to hold (or indirectly referenced, in complex extensions), the first two steps below. For a simple extension, like one intending only to add the custom button, the third step could occur in the core extension PHP file, as in this simple sample, or could be in another PHP file. There could also be localization needs, which would be included in the i18n file.

Define Resource Loader bundle

The best practice for extensions is exploitation of the Resource Loader API, which provides performance optimization as well as a standard way of accessing scripts. This simple example shows the addition of one JavaScript file.

$wgResourceModules['ext.MyExtension']['scripts'][] = 'extensions/MyExtension/js/MyExtension.js';

Reference Hook

One of the hooks offered by the Edit page allows addition of a function reference. The function or method referenced here can be in the main PHP file for the extension if it is a simple extension or in another PHP file.

$wgHooks['EditPage::showEditForm:initial'][] = 'addModule';

Define Hook

The edit page hook allows addition of a reference to the Resource Loader module defined earlier. This example shows adding to every page. There could be complex logic associated with when to display and further conditions would be added in this handler. The argument to the addModules method is the same string as defined in the step defining the bundle.

function addModule(EditPage $editPage, OutputPage $output ) {
$output->addModules( 'ext.MyExtension' );
}

With these three steps completed, the JavaScript file referenced in the resource bundle should be applied to every edit page. The API allows for multiple files and more fine grained control of when the file is called.

Core MediaWiki

เกณฑ์การออกแบบสำหรับการเพิ่มส่วนสำคัญหลักของมีเดียวิกิเกินกว่าที่กล่าวถึงในที่นี้ แต่มีการอธิบายกลไกสำหรับการเพิ่มปุ่ม

ไฟล์ JavaScript สำหรับ MediaWiki หลักถูกอ้างอิงในไฟล์ 'resources/Resources.php' กลุ่มเริ่มต้นสำหรับหน้าแก้ไขประกอบด้วย 'resources/src/mediawiki.action/mediawiki.action.edit.js' หากปุ่มควรแสดงทุกครั้ง ไฟล์ JavaScript นี้ควรได้รับการปรับปรุงด้วยปุ่มใหม่ หากปุ่มมีเงื่อนไขว่าไม่ควรโหลดไฟล์ JavaScript ทุกครั้ง ควรดำเนินการขั้นตอนที่คล้ายกับส่วนขยายและควรพิจารณาว่าฟังก์ชันนั้นอยู่ในแกนหลักของซอร์สโค้ดมีเดียวิกิหรือไม่ หรือส่วนขยายเป็นเครื่องมือที่เหมาะสม ส่งมอบการเพิ่มประสิทธิภาพ

Extension:WikiEditor

jQuery( document ).ready( function ( $ ) {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            buttonId: {
                label: 'Comment visible only for editors',
                type: 'button',
                icon: '//upload.wikimedia.org/wikipedia/commons/f/f9/Toolbaricon_regular_S_stroke.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: '<!-- ',
                        peri: 'Insert comment here',
                        post: ' -->'
                    }
                }
            }
        }
    } );
} );

ดูเพิ่มเติมที่ การปรับแต่งแถบเครื่องมือ สำหรับตัวเลือกและตัวอย่างขั้นสูงเพิ่มเติม

คุณสามารถใช้สคริปต์ InsertWikiEditorButton (โดยผู้ใช้ Krinkle) เพื่อลดความซับซ้อนของการเพิ่มปุ่มให้กับ wikiEditor

Classic edit toolbar

mw.hook( 'wikipage.editform' ).add( function () {
    mw.loader.using( 'mediawiki.toolbar' ).then( function () {
        mw.toolbar.addButton( {
            imageFile: '//upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png',
            speedTip: 'Comment visible only for editors',
            tagOpen: '<!-- ',
            tagClose: ' -->',
            sampleText: 'Insert comment here',
            imageId: 'button-comment'
        } );
    } );
} );

imageFile — คือที่อยู่ URL แบบเต็มของรูปภาพปุ่มแก้ไข
tagOpen — เป็นแท็กเปิด ในตัวอย่างนี้: <!--
tagClose — เป็นแท็กปิด ในตัวอย่างนี้: -->
sampleText — คือข้อความตัวอย่างที่จะปรากฏระหว่างแท็กเปิดและแท็กปิด ผู้แก้ไขควรแทนที่ข้อความตัวอย่างนี้ด้วยข้อความของตนเอง