Help - Search - Members - Calendar
Full Version: Mt4: Adding Buttons To The Text Editor Toolbar
Movable Type Community Forum > Additional Resources > Plugin Development and Usage
chipple
Hi all!,

I have this plugin called Macron that adds a formatting button to the
text editor.
http://www.chipple.net/mt/MacronPlugin/

This was easy in MT3 where each button called a simple function, but in
MT4 each button's action is in the Editor.Textarea.execCommand() method.
(mt-static/js/common/Editor/Textarea.js).

I thought I had it working with the script below for MT4, overriding the
method with my own code added, but turns out the initMacron function
doesn't get executed.

Am I missing something? Is there a more elegant way to add buttons to
the toolbar?
Perhaps I should be doing some extend() thing instead of overriding methods?

CODE BELOW DOESN'T WORK, mainly because initMacron() doesn't run

CODE
<script type="text/javascript">

function __getKeyEventCommand_macron( event ) {
    if( (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey ) {
        var c = ( String.fromCharCode( event.charCode || event.keyCode ) || "" ).toUpperCase();
        switch( c ) {
            case "M": return "macron";
        }
    }

    return this.__getKeyEventCommand_preMacron();
}

function __execCommand_macron( command, userInterface, argument ) {
    var text = this.getSelectedText();
    if ( !defined( text ) )
        text = '';
    switch ( command ) {
        case "macron":
            this.setSelection( text + String.fromCharCode(0x304) );
            this.editor.setChanged();
            return;
            break;
    }
    this.__execCommand_preMacron();
}

function initMacron () {
  if (app && app.editor && app.editor.textarea) {
    app.editor.__getKeyEventCommand_preMacron = app.editor.getKeyEventCommand;
    app.editor.getKeyEventCommand = __getKeyEventCommand_macron;
    app.editor.textarea.__execCommand_preMacron = app.editor.textarea.execCommand;
    app.editor.textarea.execCommand = __execCommand_macron;
  }
}
// Doesn't work
DOM.addEventListener( window, "load", initMacron );

</script>
<a href="java script: void 0;" title="<__trans phrase="Macron" escape="html">" class="command-macron toolbar button"><b>Macron</b><s></s></a>


So now I ended up using this patchy onclick instead. It works.

CODE BELOW WORKS, uses onclick and function instead

CODE
&lt;script type="text/javascript">

function execMacron() {
    var ta = app.editor.textarea;
    var text = ta.getSelectedText();
    if ( \!defined( text ) )
        text = '';
    ta.setSelection( text + String.fromCharCode(0x304) );
    ta.editor.setChanged();
}

</script>
<a href="java script: void 0;" title="<__trans phrase="Macron" escape="html">" class="command-macron toolbar button" onclick="execMacron();return false;"><b>Macron</b><s></s></a>


Oh and also, I can't seem to get the editor's existing keyboard
shortcuts to work in either FF or IE, even though there is code to that
effect in Editor.getKeyEventCommand() (js/common/Editor.js). For example
Ctrl-B just opens FF's bookmarks pane instead of making text bold.

Btw, I'm planning a plugin that adds other useful(?) buttons to the MT4
editor toolbar, that's why I want to get this stuff right.

Thanks a lot!,

Patrick
jayseae
The only way that I was able to add buttons to the toolbar was with a Transformer callback. Not saying this method won't work - just saying that's how I was able to get it to work.
chipple
QUOTE (jayseae @ Aug 31 2007, 09:23 PM) *
The only way that I was able to add buttons to the toolbar was with a Transformer callback. Not saying this method won't work - just saying that's how I was able to get it to work.


Thanks! That's what I've been doing too. It does work, that's what matters in the end.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.