collective.outputfilters.tinymceaccordion 1.0.0

Addon for Plone 6 - Plone Outputfilter to transform TinyMCE Markup to Bootstrap5 Accordion

README

• Who need this addon?
• Registry Settings
• Install Addon via buildout
• Install Addon via pip
• Install a Testenvironment
• Start the instance
• Format and Linting
• Testing
• Testing with coverage

[!IMPORTANT] This addon works only with Plone 6.1 and higher

For Plone 6.0 use plone.staticresources >= 2.2.x

Who need this addon?

This addon provide a transform for HTML Markup. TinyMCE Plugin "accordion" insert the following Markup

<details class="mce-accordion" open="open">
<summary>Accordion Summary 1</summary>
<p>Text in the collapsible 1</p>
</details>
<details class="mce-accordion" open="open">
<summary>Accordion Summary 2</summary>
<p>Text in the collapsible 2</p>
</details>

it will be transformed to Bootstrap5 Accordion Markup

<div class="accordion" id="acc-bs0">
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-0-0">
   <button aria-controls="collapse-0-0" aria-expanded="true" class="accordion-button" data-bs-target="#collapse-0-0" data-bs-toggle="collapse" type="button">
    Accordion Summary 1
   </button>
  </h2>
  <div aria-labelledby="heading-0-0" class="accordion-collapse collapse show" data-bs-parent="#acc-bs0" id="collapse-0-0">
   <div class="accordion-body">
    <p>Text in the collapsible 1</p>
   </div>
  </div>
 </div>
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-0-1">
   <button aria-controls="collapse-0-1" aria-expanded="true" class="accordion-button" data-bs-target="#collapse-0-1" data-bs-toggle="collapse" type="button">
    Accordion Summary 2
   </button>
  </h2>
  <div aria-labelledby="heading-0-1" class="accordion-collapse collapse show" data-bs-parent="#acc-bs0" id="collapse-0-1">
   <div class="accordion-body">
    <p>Text in the collapsible 2</p>
   </div>
  </div>
 </div>
</div>

Registry Settings

Some values in registry records are set:

"plone.plugins"

• accordion

plone.valid_tags

• summary
• details
• button

plone.custom_attributes

• open
• type
• data-bs-toggle
• data-bs-target
• aria-expanded
• aria-controls
• aria-labelledby
• data-bs-parent

Enable the accordion toolbar button in the Menu JSON Structure in the TinyMCE Controlpanel. Per default this addon enable the accordion option in the insert menu section.

Menu

{
    "insert": {
        "title": "Insert",
        "items": "link media | template hr | accordion"
    },
}

Please check the TinyMCE controlpanel that the values are set correct.

Install Addon via buildout

add collective.outputfilters.tinymceaccordion to your egg section in buildout.cfg

Install Addon via pip

pip install collective.outputfilters.tinymceaccordion

Install a Testenvironment

run make build

Start the instance

run make start

Format and Linting

run make check

Testing

run make test

Testing with coverage

run make test-coverage

Contributors

• 1letter

Changelog

1.0.0 (2025-06-23)

Internal:

• Update README @1letter readme
• Update configuration files @plone

Tests:

• move tests to pytest @1letter pytest

1.0a7 (2024-04-29)

Internal:

• Update README @1letter #7

1.0a6 (2024-04-28)

Internal:

• Update README @1letter

1.0a5 (2024-04-28)

Internal:

• Update README @1letter

1.0a4 (2024-04-28)

Internal:

• remove unused files @1letter

1.0a3 (2024-04-28)

Internal:

• Update configuration files @plone

1.0a3 (unreleased)

• Nothing changed yet.

1.0a2 (2024-04-19)

• Initial release. @1letter