TinyMCE внешняя упаковка выбранных элементов

Question

У меня проблема с получением TinyMCE для переноса содержимого выделения.

Первое простое style_format добавляет класс к выбранному элементу, это прекрасно работает.

Проблема связана свторой style_format Я хочу, чтобы он обернул выделенные элементы внутри

Например, ДО

<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>

ПОСЛЕ

<p class="accordion_top">test text</p>
<div class="accordion_middle">
<div class="accordion_middle-wrapper">
    <p>test text</p>
    <p>test text</p>
    <p>test text</p>
</div>
</div>

Используя нижеприведенную версию jQuery,Код, о котором идет речь, это нижний формат стилей

$("#tinymce").tinymce({
    script_url : HOME+"/webapp/shared/javascript/tiny_mce/tiny_mce.js",
    mode : "textareas",
    theme : "advanced",
    skin : "cirkuit",
    width: "726",
    plugins : "advlist,insertdatetime,paste,print,searchreplace,spellchecker,table,wordcount,visualchars,xhtmlxtras,template,codemagic",
    theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,undo,redo,|,hr,acronym,charmap,blockquote,replace,|,insertdate,inserttime,|,cleanup,removeformat,codemagic,",
    theme_advanced_buttons2 : "wrap_div,styleselect,formatselect,|,bold,italic,underline,bullist,numlist,|,table,|,link,unlink,insertimage,spellchecker|mybutton",
    theme_advanced_buttons3 : "",
    theme_advanced_buttons4 : "",
    //theme_advanced_buttons1 : "|,,table,pasteword",
    theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    forced_root_block : "p",
    force_br_newlines : false,
    force_p_newlines : true,
    valid_elements : "span[class|id],br[class|id],a[href|target|title],img[src|id|width|height|class|alt],i,"+
    "li[class|id],ul[class|id],ol[class|id],p[class|id],"+
    "table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
    "h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
    "div[class|id]",
    content_css : TEMPLATE_HOME+"/css/tinymce.css?" + new Date().getTime(),
    plugin_insertdate_dateFormat : "%d/%m/%Y",
    plugin_insertdate_timeFormat : "%H:%M",
    paste_auto_cleanup_on_paste : true,
    convert_urls: false,
    relative_urls: false,
    // Style formats
    style_formats : [
         {title : 'Accorion Top', selector : 'p,h2,h3,h4,h5,h6', classes : 'accordion_top'},
         {title : 'Accorion Middle', block : 'div', classes : 'accordion_middle'}
    ],
    setup: function (ed) {
        // Create an wrap DIV button
        ed.addButton ('wrap_div', {
            'title' : 'Wrap Accordion',
            'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
            'onclick' : function () {
                var text = ed.selection.getContent({ 'format' : 'text' });
                if (text) {
                    tinyInsert('<div class="accordion_middle"><div class="accordion_middle-wrapper">' + text + '</div></div>');
                }
            }
        });
    }
});

Answer 1

Требуются большие изменения в ядре tinymce (Formatter.js), чтобы получить то, что вы хотите, используя плагин стиля.Я написал бы собственную функцию, помещенную в собственный плагин tinymce.Чтобы достичь своей цели, вам не нужно было бы столько кода.

РЕДАКТИРОВАТЬ: Вы получили это почти правильно.Попробуйте сначала, используя span, чтобы убедиться, что это работает в вашем редакторе.

setup: function (ed) {
    // Create an wrap DIV button
    ed.addButton ('wrap_div', {
        'title' : 'Wrap Accordion',
        'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
        'onclick' : function () {
            var text = ed.selection.getContent({ 'format' : 'text' });
            if (text && text.length > 0) {
                ed.execCommand('mceInsertContent', false, '<span class="accordion_middle"><span class="accordion_middle-wrapper">' + text + '</span></span>');
            }
        }
    });
}

Следующим шагом будет замена промежутков на divs и убедитесь, что в ваших настройках tinymce разрешены вложенные теги div (см. Параметр valid_children).