collective.outputfilters.tinymceaccordion 1.0a7

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

README

• 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

[!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

Create a configfile instance.yaml for cookiecutter

default_context:
  initial_user_name: "admin"
  initial_user_password: "admin"
  wsgi_listen: "localhost:8080"
  db_storage: direct
  debug_mode: true
  verbose_security: true

create a plone instance via pip

install cookiecutter, if needed

python3 -m venv ./venv
source venv/bin/activate
pip install mxdev
pip install -r requirements-mxdev.txt
pip install cookiecutter
cookiecutter -f --no-input --config-file instance.yaml https://github.com/plone/cookiecutter-zope-instance
deactivate

Start the instance

source venv/bin/activate
runwsgi -v instance/etc/zope.ini
deactivate

Instance Shutdown via ctrl+c

Format and Linting

use tox

tox -e init

tox -e format

tox -e lint

Testing

use tox

tox -e init

tox -e test

debugging a single test, run the a specific test

zope-testrunner -pvc --test-path=./src -t FilterFunctionalTest

Contributors

• 1letter

Changelog

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