如何在基于jQuery Ajax的CKEditor中添加Accordion（手风琴）组件？

前置调整 #

你当前使用的是jQuery slim版本，不支持动画交互，先替换为完整版jQuery：

<!-- 替换原有slim版jQuery引用 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

步骤1：修改CKEditor初始化配置，新增自定义手风琴插入按钮 #

修改你原有的CKEDITOR.replace代码如下：

CKEDITOR.replace('detail', {
    // 保留原有工具栏功能的基础上新增手风琴按钮
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike'],
        ['NumberedList', 'BulletedList'],
        ['Link', 'Unlink'],
        ['AccordionBtn']
    ],
    // 注册自定义手风琴插件
    extraPlugins: 'accordionbtn',
    // 关闭内容过滤，避免手风琴结构被自动清除
    allowedContent: true
});

// 注册手风琴按钮插件
CKEDITOR.plugins.add('accordionbtn', {
    init: function(editor) {
        // 添加插入手风琴的命令
        editor.addCommand('insertAccordion', {
            exec: function(editor) {
                // 自定义手风琴结构，可自行调整样式和数量
                const accordionTpl = `
<div class="custom-accordion">
  <div class="accordion-item">
    <h4 class="accordion-header" style="background:#f5f5f5; padding:8px 12px; cursor:pointer; margin:0; border:1px solid #eee;">手风琴标题1</h4>
    <div class="accordion-content" style="padding:12px; border:1px solid #eee; border-top:none; display:none;">
      <p>此处输入手风琴内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <h4 class="accordion-header" style="background:#f5f5f5; padding:8px 12px; cursor:pointer; margin:0; border:1px solid #eee; border-top:none;">手风琴标题2</h4>
    <div class="accordion-content" style="padding:12px; border:1px solid #eee; border-top:none; display:none;">
      <p>此处输入手风琴内容</p>
    </div>
  </div>
</div>`;
                editor.insertHtml(accordionTpl);
            }
        });
        // 工具栏新增按钮
        editor.ui.addButton('AccordionBtn', {
            label: '插入手风琴',
            command: 'insertAccordion',
            toolbar: 'insert',
            // 内置base64图标，无外部依赖
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqG7gMewAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVDjLY2AYBaNgFIyCoQUAAAAeAAET13FOAAAAAElFTkSuQmCC'
        });
    }
});

步骤2：添加手风琴交互逻辑 #

编辑器内预览交互 #

CKEDITOR.on('instanceReady', function(e) {
    const editorDoc = e.editor.document.$;
    editorDoc.addEventListener('click', function(event) {
        if (event.target.classList.contains('accordion-header')) {
            const contentEl = event.target.nextElementSibling;
            contentEl.style.display = contentEl.style.display === 'none' ? 'block' : 'none';
        }
    });
});

前端展示页交互 #

如果编辑器提交的内容需要在前端页面展示，把以下代码加到展示页面即可：

$(document).on('click', '.accordion-header', function() {
    $(this).next('.accordion-content').slideToggle(300);
});

其他说明 #

• 你可以根据设计需求自行调整手风琴的样式、默认标题数量
• 如果需要更复杂的手风琴功能，也可以下载CKEditor第三方手风琴插件放到项目的ckeditor/plugins目录，再通过extraPlugins配置引入即可

内容的提问来源于stack exchange，提问作者AJAY KUMAR