Javascript 所见即所得（Redactor）中的引导手风琴html

我正在与redactor合作，我需要创建功能，将可折叠的分区引导手风琴添加到WYSIWYG中

我知道如何首先添加html，使可折叠部分工作，如下所示：

// Insert collabsible code
var collapseHtml = '<div class="accordion" id="accordion' + collapsibleIndex + '">'
    + '<div class="accordion-group">'
        + '<div class="accordion-heading">'
            + '<h5 class="accordion-toggle" data-toggle="collapse" data-parent="#accordion' + collapsibleIndex + '" href="#collapse' + collapsibleIndex + '">'
                + 'Insert collapsible section header here'
                + '<i class="icon-chevron-right"></i>'
            + '</h5>'
        + '</div>'
        + '<div id="collapse' + collapsibleIndex + '" class="accordion-body collapse in">'
            + '<div class="accordion-inner">'
                + '<p>content</p>'
            + '</div>'
        + '</div>'
    + '</div>';

this.insertHtmlAdvanced(collapseHtml);

这插入很好，我可以编辑标题和内容。问题是，我还可以删除Redactor中可折叠元素的不同部分

我需要元素作为块工作，并且只有标题和内容区域在所见即所得中可编辑

我是否应该使用“contenteditable”属性？或者我还有别的办法吗