1

以下摘自 TinyMCE 网站及其制作自定义 ui 的示例。问题是该示例仅演示了如果您需要按钮该怎么做。如果您想为字体大小等实现自己的选择下拉菜单怎么办？我什至不想要任何自定义的东西，只需要一个默认标签就可以了。我该怎么做？

tinyMCE.init({
        mode: "textareas",
        content_css : "../css/custom_theme_editor.css",
        theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
    font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
        language: false, // Prevents language packs from loading

        theme: function(editor, target) {
            var dom = tinymce.DOM, editorContainer;

            // Generate UI
            editorContainer = dom.insertAfter(dom.create('div', {style: ''},
                '<div>' +
                    '<button data-mce-command="bold">bold</button>' +
                    '<button data-mce-command="italic">italic</button>' +
                    '<button data-mce-command="underline">underline</button>' +
                    '<button data-mce-command="fontsizeselect">font size</button>' +  
                    '<button data-mce-command="mceInsertContent" data-mce-value="Hello">Insert Hello</button>' +
                '</div>' +
                '<div style="border: 1px dashed #cccccc;"></div>'
            ), target);

            // Set editor container size to target element size
            dom.setStyle(editorContainer, 'width', target.offsetWidth);

            // Bind events for each button
            tinymce.each(dom.select('button', editorContainer), function(button) {
                dom.bind(button, 'click', function(e) {
                    e.preventDefault();

                    // Execute editor command based on data parameters
                    editor.execCommand(
                        dom.getAttrib(e.target, 'data-mce-command'),
                        false,
                        dom.getAttrib(e.target, 'data-mce-value')
                    );
                });
            });

            // Register state change listeners
            editor.onInit.add(function() {
                tinymce.each(dom.select('button', editorContainer), function(button) {
                    editor.formatter.formatChanged(dom.getAttrib(button, 'data-mce-command'), function(state) {
                        state ? $(button).addClass("tiny-mce-button-clicked") : $(button).removeClass("tiny-mce-button-clicked");

                    });
                });
            });

            // Return editor and iframe containers
            return {
                editorContainer: editorContainer,
                iframeContainer: editorContainer.lastChild,

                // Calculate iframe height: target height - toolbar height
                iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
            };
        }
    });
4

0 回答 0