将核心或插件按钮与自定义工具栏按钮混合

时间:2018-06-02 10:23:10

标签: javascript tinymce-4

TinyMCE很不错,但是我无法找到我需要的所有信息(可能)必须通过文档来开发自己的插件才能做到这一点。

基本上,我只是想移动一些现有的按钮,我将首先向您展示我的初始化:

tinymce.init({
    selector: ".tinymce",
    language: _locale,
    height: 500,
    width: "100%",

    menubar: true,
    removed_menuitems: "link, media, image, table",
    image_advtab: false,
    branding: false,
    statusbar: false,
    elementpath: false,
    plugins: [
        "autoresize",
        "advlist autolink lists link image charmap print preview anchor textcolor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste code help"
    ],
    toolbar: "insertmedia inserttable | undo redo | formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
    content_css: [
        "//fonts.googleapis.com/css?family=Lora:300,300i,400,400i",
        // "//www.tinymce.com/css/codepen.min.css",
        "/build/style.css"],
    init_instance_callback: function (editor) {
        editor.on("GetContent", function (e) {
            e.content = e.content.replace(/(\.\.\/)+/g, "/");
        });
    },
    setup: function(editor) {
        tinymceEditor = editor;
        editor.on("change", function () {
            editor.save();
        });
        editor.addButton("insertmedia", {
            type: "menubutton",
            text: Translator.trans("Invoegen"),
            icon: "insert",
            menu: [
                {
                    text: Translator.trans("Upload foto"),
                    tooltip: Translator.trans("Voeg een nieuwe foto toe (kan later opnieuw gebruikt worden)"),
                    icon: "upload",
                    onclick: function() {
                        dialogUploadPhoto.dialog( "open" );
                    }
                },
                {
                    text: Translator.trans("Web foto"),
                    tooltip: Translator.trans("Voeg een nieuwe foto toe uit een andere bron"),
                    icon: "image",
                    // cmd: "mceImage"
                    onclick: function() {
                        tinyMCE.execCommand("mceImage");
                    }
                }, {
                    text: Translator.trans("Upload video"),
                    tooltip: Translator.trans("Voeg een nieuwe video toe (kan later opnieuw gebruikt worden)"),
                    icon: "upload",
                    onclick: function() {
                        dialogUploadVideo.dialog("open");
                    }
                },
                {
                    text: Translator.trans("Web video"),
                    tooltip: Translator.trans("Voeg een nieuwe video toe uit een andere bron"),
                    icon: "media",
                    onclick: function() {
                        tinyMCE.execCommand("mceMedia");
                    }
                },
                {text:"|"},
                {
                    text: Translator.trans("Geüploade foto's"),
                    tooltip: Translator.trans("Foto's die je eerder hebt geüpload"),
                    icon: "image",
                    onclick: function() {
                        dialogSelectPhoto.dialog("open");
                    }
                }, {
                    text: Translator.trans("Geüploade video's"),
                    tooltip: Translator.trans("Video's die je eerder hebt geüpload"),
                    icon: "media",
                    onclick: function() {
                        dialogSelectVideo.dialog("open");
                    }
                },
                {text:"|"},
                {
                    text: Translator.trans("Tabel"),
                    type: "menubutton",
                    // title: "Table",
                    icon: "table",
                    items: "inserttable tableprops deletetable | cell row column"
                },
                {
                    text: Translator.trans("Link"),
                    tooltip: Translator.trans("Maak een link naar een andere website"),
                    icon: "link",
                    onclick: function() {
                        tinyMCE.execCommand("mceLink");
                    }
                }, {
                // "link", {
                    text: Translator.trans("Speciaal teken"),
                    tooltip: Translator.trans("Symbolen die je niet op het toetsenbord vindt"),
                    icon: "charmap",
                    onclick: function() {
                        tinyMCE.execCommand("mceShowCharmap");
                    }
                }, {
                    text: Translator.trans("Anker"),
                    tooltip: Translator.trans("Een link maken naar een hoofdstuk / hoofding in dit tekstveld"),
                    icon: "anchor",
                    onclick: function() {
                        tinyMCE.execCommand("mceAnchor");
                    }
                }
            ]
        });
    }
});

所以我的工具栏中有一个名为insertmedia的自定义按钮。 作为我想要实现的目标的代表,我补充说:

            {
                text: Translator.trans("Tabel"),
                type: "menubutton",
                // title: "Table",
                icon: "table",
                items: "inserttable tableprops deletetable | cell row column"
            },

我知道items不是自定义菜单按钮的有效属性,但我确实希望这些插件按钮显示在此处:

enter image description here

关于如何做到这一点的任何想法?

0 个答案:

没有答案