writting custom button plugins

for adding your custom button, you must create a regular Movable Type plugin.
but, don't be hesitate, just one yaml file and one picture file, they're all that required to fix up. no perl required.

here we start with creating a button, that put a 'hello' in front of selection. at first, we build a yaml file.

writing yaml

plugin information

write your plugin information in the first section. they will appear in the MT's CMS plugin screen.

name: Hello Button
id: Hello Button
key: HelloButton
author_link: http://blog.aklaswad.com/
author_name: Aklaswad
description: Say hello.
version: 0.1
plugin_link: http://blog.aklaswad.com/mtplugins/hellobutton/

add button section

buttons:
    hello:
        image: hello.png
        title: say hello!
        code: |
            function ceb_hello ( text ) {
                return 'Hello! ' + text;
            }

this block is a definition of each button. you can write multiple buttons definition in the same plugin.

button name

buttons:
    hello:

here is a name difinition.
write your buttons name in the next line of the 'buttons' block head. it must be unique, and the name must have no blank.

image

set path of image file that be used to display this button.

title

a short description for mouse over.

code

write your button's function in JAVASCRIPT.
CustomEditorButton plugin looks for and calls the function that named the button's name with 'ceb_' prefix.
the first argument 'text' includes a string that selected in the editor. almost, we want to do is do something for this 'text' and return it.
your return will be inserted to the editor's selected part.

            function ceb_hello ( text ) {
                return 'Hello! ' + text;
            }

picture

22px x 22px picture file that can be displayed by the web browser.

if you're too tired to open your photoshop, delete the 'image:' line and insert a 'face_text' with a short text. it will be the button image.

buttons:
    bye:
        face_text: bye
        title: say bye!
        code: |
            function ceb_bye ( text ) {
                return 'bye ' + text;
            }

install

make directory in your MT's plugins directory with the name of your plugin, and save the yaml file with the name 'config.yaml'.
if you have an image, make a same name directory to your mt-static/plugins directory, and put your image file there.

now, let's open your MT and check the system / plugins screen.

yes, it's successed!

...if your plugin was not shown to the list, check your target of upload.
if you got an error message like this;

Got an error: Error reading /home/foo/public_html/cgi-bin/mt/plugins/HelloButton/config.yaml: Stream does not end with newline character (YAML_PARSE_ERR_NO_FINAL_NEWLINE) at lib/MT/Component.pm line 150.

the reason may be a wrong yaml format. check your indent, linefeed code, and the linefeed of the last line(it is required because of yaml's specific).

when you got all green, check MT's editor and your button be appear. maybe your button is in the pocket.

here is a hello button plugin that we finished.

• HelloButton.zip

other functions

arguments to the callback

you can use a helper object from the second argument.

function ceb_foo(text, args) {
    //do something
}

some method and property are given from this object.

innerHTML()

return the selection with HTML. different from the 'text' argument, innerHTML will return an HTML though the editor is in iframe mode.

iframe

bool that the editor is on iframe mode.

editor

return a reference of MT.App.editor.

return value of the callback

if you return in your callback, CustomEditorButton do nothing to the editting field.