02 December 2019, 4:37

I try the example of bootstrap 4 I order to toggle text but mahara tags

This is to code I use:

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Button-Beispiel 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button-Beispiel 2
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Dieser Text soll angezeigt werden ...
</div>
</div>
</p>

----------------

This is what is saved:

<p><a class="btn btn-primary" href="#collapseExample"> Button-Beispiel 1 </a> <button class="btn btn-primary"> Button-Beispiel 2 </button></p>
<div id="user_collapseExample" class="collapse">
<div class="card card-body">Dieser Text soll angezeigt werden ...</div>
</div>

-----------------

How can I use the bootstrap 4 code?

02 December 2019, 8:50

Hi Andreas

Currently the HTMLPurifier is stripping out bootstrap related parts of the HTML markup

Doing the following will get the <a> tag example working:

1) alter the htdocs/lib/web.php file like so:

@@ -3851,6 +3851,8 @@ function clean_html($text, $xhtml=false) {
 
     if ($def = $config->maybeGetRawHTMLDefinition()) {
         $def->addAttribute('a', 'target', 'Enum#_blank,_self');
+        $def->addAttribute('a', 'data-toggle', 'Enum#collapse');
+        $def->addAttribute('a', 'aria-expanded', 'Enum#true,false');
         # Allow iframes with custom attributes such as fullscreen
         # This overrides lib/htmlpurifier/HTMLPurifier/HTMLModule/Iframe.php
         $def->addElement(

2) On the site's Administration -> Overview page clear the cache once the change is name

3) When adding the code to the site make the <a> href begin with '#user_' as the system prefixes the div id into #user_ on save, eg

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#user_collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Button-Beispiel 1
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Dieser Text soll angezeigt werden ...
</div>
</div>
</p>

This should get the bootstrap collapse working for user added content

I'll add a wishlist bug to allow this change to core and for it to also work for buttons

https://bugs.launchpad.net/mahara/+bug/1854647

Cheers

Robert