This example shows how to create a plugin with a modal window.
<!--element -->
<textarea id="content"></textarea>
<!-- plugin code -->
<script>
(function($R)
{
$R.add('plugin', 'myplugin', {
modals: {
'myplugin': '<form action="">'
+ '<div class="form-item">'
+ '<label>## myplugin-label ##</label>'
+ '<textarea name="text" style="height: 200px;"></textarea>'
+ '</div>'
+ '</form>'
},
translations: {
en: {
"myplugin": "My Plugin",
"myplugin-label": "Please, type some text"
}
},
init: function(app)
{
// define app
this.app = app;
// define services
this.lang = app.lang;
this.toolbar = app.toolbar;
this.insertion = app.insertion;
},
// messages
onmodal: {
myplugin: {
opened: function($modal, $form)
{
$form.getField('text').focus();
},
insert: function($modal, $form)
{
var data = $form.getData();
this._insert(data);
}
}
},
// public
start: function()
{
// create the button data
var buttonData = {
title: this.lang.get('myplugin'),
api: 'plugin.myplugin.open'
};
// create the button
var $button = this.toolbar.addButton('myplugin', buttonData);
},
open: function()
{
var options = {
title: this.lang.get('myplugin'),
width: '600px',
name: 'myplugin',
handle: 'insert',
commands: {
insert: { title: this.lang.get('insert') },
cancel: { title: this.lang.get('cancel') }
}
};
this.app.api('module.modal.build', options);
},
// private
_insert: function(data)
{
this.app.api('module.modal.close');
if (data.text.trim() === '') return;
this.insertion.insertText(data.text);
}
});
})(Redactor);
</script>
<!-- call -->
<script>
$R('#content', { plugins: ['myplugin'] });
</script>