Cara Membuat Plugin Button Editor-xtd pada Joomla

Button editor-xtd sebuah tombol yang muncul pada editor joomla, ketika kita menggunakan joomla kita akan mengenal adanya plugin yang digunakan untuk membantu komponen menjalankan tugasnya. Kita bisa menginstall plugin joomla sebagaimana kita menginstall componen dan modul yaitu dengan melalui menu extension kemudian pilih manage dan pilih install.

Sedangkan untuk plug in button editor-xtd ini berfungsi sebagai tombol yang membantu kita ketika kita melakukan penulisan sebuah teks atau artikel atau berita di joomla. Seperti gambar dibawah ini anda dapat melihat posisi dan tombol Button Editor-XTD

editor-xtd

Dengan adanya Button editor-xtd ini lebih memudahkan dan menghemat waktu kita untuk menulis sebuah konten, misal kita ingin menghubungkan artikel yang kita tulis dengan sebuah artikel lainya yang pernah kita tulis, kita tinggal klik tombol artikel, setelah muncul kita bisa memilih artikel mana yang ingin kita pilih.

Yang anda perlukan dalam membuat plugin button editor-xtd ini paling tidak kita butuh dua file yaitu XML file dan kode php, jadi anda harus mengerti juga bagaimana mengenai php kalau anda tidak mengerti segera mulailah belajar. Mari kita mulai dengan pembuatanya.

XML

XML ini diperlukan dalam setiap modul, component ataupun plugin karena pada XML ini memuat informasi yang dibutuhkan untuk joomla. Dalam penulisan file XML kita mulai dengan pendeklarasian dokumen :

<?xml version="1.0" encoding="utf-8"?>

Setelah kita deklarasikan dan memulai penulisan file XML, kita akan membuat deklarasi untuk plugin joomla yang mau kita buat misal saya pakai yang terbaru 3.6

<extension version="3.6" type="plugin" method="upgrade" group="editors-xtd">

Dapat anda lihat saya membuat untuk versi 3.6 (bila ingin kompatibel dengan 2.5 silahkan diganti 2.5) dan tipenya berupa plugin metodenya upgrade dan grup pluginnya adalah editors-xtd (karena masuk pada button editor maka di buat editors-xtd, ini penting jangan salah kalau salah tidak akan masuk ke button).
Setelah itu kita harus menambahkan plugin parameter.

<name>Tombol Editor</name>
<author>Nama Pembuat</author>
<creationDate>Tahun 2016</creationDate>
<copyright>(c) Airo Dump, 2016. All rights reserved.</copyright>
<license>GPL</license>
<authorEmail>[email protected]</authorEmail>
<authorUrl>Your URL</authorUrl>
<version>1.0.0</version>
<description>
	"ini adalah contoh plugin untuk tombol ediot joomla atau disebut dengan editor-xtd!"
</description>

Diatas kita bisa lihat bahwa ini berisi informasi plugin mulai dari namanya, embuat, tahun dibuat, copyright, lisensi, email dan url, serta deskripsinya. Setelah kita buat informasi plugin kita mendefinisikan file yang akan kita install seperti ini :

<files>
	<filename plugin="xtdbutton">tomboleditor.php</filename>
</files>

ini hanya contoh saja untuk dan saya beri nama coba.php, bila anda punya file yang akan diinstall silahkan letakan di antara <files></files>

kemudian untuk lengkapnya kode adalah sebagai berikut:

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.6" type="plugin" method="upgrade" group="editors-xtd">
        <name>Tombol Editor</name>
        <author>Nama Pembuat</author>
        <creationDate>Bulan 2016</creationDate>
        <copyright>(c) Airo Dump, 2015. All rights reserved.</copyright>
        <license>GPL</license>
        <authorEmail>[email protected]</authorEmail>
        <authorUrl>Your URL</authorUrl>
        <version>1.0.0</version>
        <description>
            "Ini adalah contoh plugin untuk tombol editor joomla atau disebut dengan editor-xtd!"
        </description>
        <files>
            <filename plugin="xtdbutton">tomboleditor.php</filename>
        </files>
</extension>

sesudah itu kita simpan dan beri nama tombol.xml

Sesudah langkah diatas langkah selanjutnya adalah membuat file phpnya, kita buat dulu dengan nama tombol.php karena kita tadi memanggil file tombol.php pada file xmlnya. Seperti biasa dalam joomla kita membuat baris pertama yaitu untuk security sehingga menghindari untuk di panggil secara langsung.

<?php
// no direct access 
defined( '_JEXEC' ) or die( 'Restricted access' );

Tidak lupa helper plugin kita panggi juga

jimport( 'joomla.plugin.plugin' );

Kemudian kita masukan classnya, adapaun penulisan dari class plug in adalah kita masukan plg, kemudian kita masukan tipe pluginya yaitu button, dan terakhir nama pluginnya yaitu tomboleditor, karena ditulis di CamelCase maka penulisanya menjadi sebagai berikut :

class plgButtonTomboleditor extends JPlugin {

sesudah classnya tidak lupa konstrutornya.

function plgButtonTomboleditor(& $subject, $config)
{
	parent::__construct($subject, $config);
}

Tidak seperti plugin yang lain, pada editor-xtd ini merupakan aplikasi client side oleh karena itu editor berinteraksi dengan user untuk mengeksekusi perintah, karena client side biasanya memerluka java script.
tetapi ada juga plugin-xtd yang bersifat server side, bahkan yang bersifat dua yaitu client side sera server side pun ada.

Pada joomla mememberikan beberapa fungsi yang mengizinkan script berinteraksi dengan editor, contohnya

$js = " function contohTombleditorClick() {
          var content = ".$this->_subject->getContent($name)." alert(content); 
        }";

pada coding diatas menempatkan fungsi js ke button, $name nama editor yang digunakan yang mengandung parameter ketika onDisplay di panggil.

jadi sudah paham bukan dimana kita bisa menempatkan fungsi yang ada pada pluginnya untuk di eksekusi, berikut adalah kode lengkap yang ditulis untuk membuat plugin joomla.

<?php
 // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.plugin.plugin' );
class plgButtonTomboleditor extends JPlugin {
    function plgButtonTomboleditor (& $subject, $config)
    {
        parent::__construct($subject, $config);
    }
    function onDisplay($name)
    {
        $js =  "function contohTombolButtonClick(editor) {
			txt = prompt('Please enter ID','123');
			if (!txt) return;
			jInsertEditorText('{sampleplugin '+txt+'}', editor);
		}";
        $doc = & JFactory::getDocument();
        $doc->addScriptDeclaration($js);
        $button = new JObject;		
	$button->modal = false;
	$button->class = 'btn';
	$button->link = '#';
	$button->text = JText::_('Insert sampleplugin');
	$button->name = 'wand';
	$button->onclick = 'contohTombolButtonClick(\''.$name.'\'); return false;';
        return $button;
    }
}

Sangat mudah bukan silahkan mencobanya.

(Visited 956 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat