CODEWITHSUNDEEP
javascripttinymce
TheGateKeeper
TheGateKeeper

Reputation: 4540

Adding a custom button to TinyMCE

Have been trying to add a custom button for about 2 hours and I just can't get it to work. I don't know much about javascript maybe that's why. I did manage to get the button to show up and open a popup, but that's as far as I got.

I want the button to insert t he following into the HTML section of tinymce:

'

Here is my dialog.js file:

tinyMCEPopup.requireLangPack();

var InsertQuoteDialog = {
    init: function () {
        var s = tinyMCEPopup.editor.selection.getContent({ format: 'text' });
        if (s.trim().length > 0) {
            document.forms[0].blizzQuote.value = s.trim();
        }
    },

    insert: function () {
        var s1 = '<p class="blizzardQuote" ';
        s1 += Encoder.htmlEncode(document.forms[0].blizzQuote.value.trim()) + '</p>';

        tinyMCEPopup.editor.execCommand('mceInsertContent', false, s1);
        tinyMCEPopup.close();
    }
};

String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

tinyMCEPopup.onInit.add(InsertQuoteDialog.init, InsertQuoteDialog);

And my Dialog.htm file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{#example_dlg.title}</title>
    <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
    <script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>

<form onsubmit="InsertQuoteDialog.insert();return false;" action="#">
    <p>Blizzard Quote</p>
    <p>Blizzard Quote: <input id="blizzQuote" name="blizzQuote" type="text" class="text" /></p>

    <div class="mceActionPanel">
    <div style="float: left">
        <input type="button" id="insert" name="insert" value="{#insert}" onclick="InsertQuoteDialog.insert();" />
    </div>
    <div style="float: right">
        <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
    </div>
    </div>
</form>

</body>
</html>

Basically when I click on insert nothing happens.

Thanks.

Upvotes: 1

Views: 1323

Answers (1)

Brett Henderson
Brett Henderson

Reputation: 1684

A quick look at the javaScript console should show you that you are getting a JavaScript error on the dialog with the Encoder object not being known.

Simply include the JS file that defines Encoder on your dialog and it should all be good.

Upvotes: 1

Related Questions