Поэтому я создал собственную тему для TinyMCE, используя метод кнопки на их веб-сайте. Кажется, что большинство кнопок работают, но кнопки bullist, numlist, link и unlink ничего не делают. Даже при переключении в представление HTML, HTML даже не добавляется (т. Е. <ul><li></li></ul>). Я попытался добавить плагины для advlist, advlink и т. Д., Но без изменений. Не могу найти ответы на этот вопрос онлайн.

Вот мой код tinymce:

$('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()
        };
    }    
});
10
codephobia 22 Янв 2013 в 10:50

2 ответа

Лучший ответ

Изучив код TinyMCE, я определил возможное решение. Для списков вместо использования data-mce-command="bullist" и data-mce-command="numlist" мы можем использовать data-mce-command="InsertUnorderedList" и data-mce-command="InsertOrderedList".

Для ссылок я использовал data-mce-command="mceInsertLink", и нам нужен способ предоставить URL / HREF для execCommand. Таким образом, в качестве подтверждения концепции, я изменил бит кода, который назначает все события

$('button', editorContainer).click(function(event) {
       event.preventDefault();
       var value=$(this).attr('data-mce-value')
       if($(this).attr('data-mce-command')=="mceInsertLink"){
           value=prompt("href") //really hacky way of getting data from user
           //maybe do a modal popup with the callback that calls the execCommand below
       }
       editor.execCommand(
           $(this).attr('data-mce-command'),
           false,
           value
       );
   });

Это будет работать, если есть текст, который уже выделен. Я не проверял это, но, возможно, можно было бы проверить, выбрано ли что-нибудь, спросить и URL, и текст ссылки, и выполнить .execCommand("mceInsertRawHTML")

Пример скрипки

1
mfirdaus 14 Май 2014 в 10:13

Попробуйте добавить эти плагины:

                plugins: [
                        "link lists",
                ],
2
morissette 9 Апр 2014 в 15:44