Question

一直尝试添加自定义按钮大约2个小时，但我无法让它工作。我不太了解javascript也许这就是原因。我确实设法让按钮显示并打开一个弹出窗口，但这就是我得到的。

我希望按钮能够将以下内容插入到tinymce的HTML部分中：

这是我的dialog.js文件：

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);

我的Dialog.htm文件：

<!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>

基本上当我点击插入时没有任何反应。

感谢。

Answer 1

快速查看javaScript控制台应该会在对话框中显示您收到JavaScript错误，但 Encoder 对象未知。

只需在对话框中包含定义编码器的JS文件，它就应该都很好。

向TinyMCE添加自定义按钮

1 个答案: