Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE custom theme - bullist numlist link unlink not working

So I have created a custom theme for TinyMCE using the button method on their website. Most of the buttons seem to be working, but the bullist, numlist, link, and unlink buttons do nothing. Even when switching to HTML view, the html is not even added (ie. <ul><li></li></ul>). I have tried adding plugins for advlist, advlink, etc but no change. Can't seem to find any answers online for this one.

Here is my tinymce code:

$('textarea.htmlify').tinymce({
    mode: 'textareas',
    script_url : host + '/js/admin/tinymce/tiny_mce.js',
    content_css: host + '/css/admin/tiny_mce.css',
    language: false,

    setup: function(editor) {
        $('.showPreview', '#' + editor.id + '_preview').click(function(event) {
            event.preventDefault();
            tinyMCE.execCommand('mceAddControl', false, editor.id);
            $('#'+editor.id + '_preview').css('display', 'none');
        });

        editor.addCommand('showHTML', function(ui, v){
            tinyMCE.execCommand('mceRemoveControl', false, editor.id);
            $('#'+editor.id + '_preview').css('display', 'block');
        });
    },

    theme: function(editor, target) {
        var editorContainer = $(target).after(
            '<div>' +
                '<div class="mce-toolbar clearfix">' +
                    '<button class="btn-mce-bold" data-mce-command="bold">Bold</button>' +
                    '<button class="btn-mce-italic" data-mce-command="italic">Italic</button>' +
                    '<button class="btn-mce-underline" data-mce-command="underline">Underline</button>' +
                    '<button class="btn-mce-strikethrough" data-mce-command="strikethrough">Strike Through</button>' +
                    '<button class="btn-mce-justifyleft" data-mce-command="justifyleft">Justify Left</button>' +
                    '<button class="btn-mce-justifycenter" data-mce-command="justifycenter">Justify Center</button>' +
                    '<button class="btn-mce-justifyright" data-mce-command="justifyright">Justify Right</button>' +
                    '<button class="btn-mce-justifyfull" data-mce-command="justifyfull">Justify Full</button>' +
                    '<button class="btn-mce-bullist" data-mce-command="bullist">Bullet List</button>' +
                    '<button class="btn-mce-numlist" data-mce-command="numlist">Number List</button>' +
                    '<button class="btn-mce-undo" data-mce-command="undo">Undo</button>' +
                    '<button class="btn-mce-redo" data-mce-command="redo">Redo</button>' +
                    '<button class="btn-mce-link" data-mce-command="link">Link</button>' +
                    '<button class="btn-mce-unlink" data-mce-command="unlink">Unlink</button>' +
                    '<button class="btn-mce-code" data-mce-command="showHTML">HTML</button>' +
                '</div>' +
                '<div class="htmlify"></div>' +
            '</div>'
        ).next();

        $('.mce-toolbar').css('width', $(target).css('offsetWidth'));

        // Bind events for each button
        $('button', editorContainer).click(function(event) {
            event.preventDefault();
            editor.execCommand(
                $(this).attr('data-mce-command'),
                false,
                $(this).attr('data-mce-value')
            );
        });

        // setup tabbing
        $tabindex = parseInt($('#' + editor.id).attr('tabindex'));
        if ($tabindex > 1) {
            $('[tabindex=' + ($tabindex-1) + ']').keydown(function(event) {
                var $keyCode = event.keyCode || event.which;
                if ($keyCode == 9) {
                    event.preventDefault();
                    editor.execCommand('mceFocus', false, editor.id);
                }
            });
        } else {
            editor.execCommand('mceFocus', false, editor.id);
        }

        editor.onKeyDown.add(function(ed, event) {
            var $tabindex = parseInt($('#' + ed.id).attr('tabindex'));
            var $keyCode = event.keyCode || event.which;
            if ($keyCode == 9) {
                $tabindex++;
                while(($("[tabindex='" + $tabindex + "']").length == 0 || $("[tabindex='" + $tabindex + "']:not([readonly])").length == 0) && $tabindex != 150 ){
                    $tabindex++;
                }
                if ($tabindex != 150)
                    $('[tabindex='+$tabindex+']').focus();
            }
        });

        // Register state change listeners
        editor.onInit.add(function(ed, event) {
            $('button', editorContainer).each(function(i, button) {
                editor.formatter.formatChanged($(button).data('mce-command'), function(state) {
                    $(button).toggleClass('btn-mce-on', state);
                });
            });

            $('#'+ed.id+'_ifr').css('height', '100%');
        });

        // Return editor and iframe containers
        return {
            editorContainer: editorContainer[0],
            iframeContainer: editorContainer.children().eq(-1),

            // Calculate iframe height: target height - toolbar height
            iframeHeight: $(target).height() - editorContainer.first().outerHeight()
        };
    }    
});
like image 940
codephobia Avatar asked Jan 22 '13 06:01

codephobia


People also ask

How do you hyperlink in TinyMCE?

Add hyperlinks to content. The toolbar button and menu item called link are included in TinyMCE's default configuration. The link menu item can be found in the Insert menu. The link plugin also includes a context menu and context toolbar.

How do I disable TinyMCE editor toolbar?

To disable the toolbar, the toolbar option should be provided a boolean value of false .

What does TinyMCE stand for?

MCE stands for Moxiecode Content Editor.


1 Answers

Try adding these plugins:

                plugins: [
                        "link lists",
                ],
like image 144
morissette Avatar answered Nov 07 '22 03:11

morissette