CKeditor add accordion

[froot]

I'm trying to add an uikit accordion to the styles-list of a CKEditor-body.

I understand I need to add a row to the file mystyles:/site/modules/InputfieldCKEditor/mystyles.js 

so I tried: 

 { name: 'Accordion', element: 'ul', attributes: { 'uk-accordion' } }

and also

 { name: 'Accordion', element: 'ul', attributes: { 'class', 'uk-accordion' } }

but both don't work. It just breaks the styles-dropdown and no styles are shown at all.
I'm really not doing many changes at all, don't know how this can fail so soon in the process, haven't even got to my more sophisticated requirements, which is achieving a markup like 

    <li>
        <a class="uk-accordion-title" href="#"></a>
        <div class="uk-accordion-content"></div>
    </li>

inside the <ul uk-accordion>

Using Mac, tried Chrome and Safari, cleared cache etc. of course.

Thanks for help!

[Ivan Gretsky]

I checked my site that had custom styles. This is what I have there in site/modules/InputfieldCKEditor/mystyles.js:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Inline Code', element: 'code' },
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },
 { name: 'Small', element: 'small' },
 { name: 'Deleted Text', element: 'del' },
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' },
 { name: 'Left Heading', element: 'h2', attributes: { 'class': 'u-align-left' } },
 { name: 'Right Heading', element: 'h2', attributes: { 'class': 'u-align-right' } },
 { name: 'Important', element: 'div', attributes: { 'class': 'u-important u-important--brand' } },
 { name: 'Bordered Table', element: 'div', attributes: { 'class': 'u-table-bordered' } }
]);

My added styles are at the end of the list. They do work, if there is only one CKEditor field on the page edited (see this issue). Also keep in mind, that the styles for ul elements are only shown when this type of element is selected in the editor working area.

P.S. If everything works out, don't forget to add you custom styles to site/modules/InputfieldCKEditor/contents.css or site/modules/InputfieldCKEditor/contents-inline.css so they display as they should:

...

.u-important--brand {
	font-size: 21px;
	line-height: 1.3;
	padding-left: 40px;
}
.u-table-bordered {
	color: blue;
}

 

[froot]

yes that describes my problem exactly. I'm using a CKEditor body inside a repeater field. I read the other threads you mentioned and the GitHub issue. Any update on this issue or should I rethink the entire approach?

[Ivan Gretsky]

2 hours ago, fruid said:

Any update on this issue or should I rethink the entire approach?

Actually, if there is no more than one CKEditor field in a Repeater item, custom styles should work. Check it out again. But when there are more, I know no solution. Please give a thumb up to the issue and write a comment, so @ryan gets a notification. I has been a while without anything new on this issue, so your voice could make a difference)

[froot]

It was a stupid typo from my side, I found out using the console. I kinda got it to work or at least use the styles I add to mystyles.js.

Now I'm trying to build a uk-accordion using the styles which is not that simple after all, not to mention for the client.

I added these three styles:

 { name: 'uk-accordion', element: 'ul', attributes: { 'uk-accordion': 'collapsible: true' } },
 { name: 'uk-acc-title', element: 'a', attributes: { 'class': 'uk-accordion-title' } },
 { name: 'uk-acc-content', element: 'div', attributes: { 'class': 'uk-accordion-content' } }

Also very important, as you mentioned, you need to first apply the appropriate html tags to the elements you want to add the styles to, otherwise the styles won't appear. So for the <a> element I first need to make it a link with href="#" (not too complicated, I think the client can handle that). For the content no need to add a tag. And for the <ul>, you guessed it, turn it into an unordered list first.

Tried that in different orders, but either way, adding the uk-accordion style to the <ul> element always puts the <a> element after or inside the <div> or turns both elements into seprate <li> elements which is not how it should be thus it doesn't work.

Can you think of a way to just apply the ul-style to the list and it adds the other styles to its children accordingly?

Thanks for your help.

[dynweb]

Have you ever thought about using a repeater field (instead of CKE) for user input? One repeater item for each tab? This would be much easier for the client and certainly less error prone... 

[Ivan Gretsky]

On 9/18/2020 at 7:08 PM, fruid said:

Can you think of a way to just apply the ul-style to the list and it adds the other styles to its children accordingly?

You can try CKEditor content templates. I think you can get it into your system with AOS module.

[froot]

10 hours ago, dynweb said:

Have you ever thought about using a repeater field (instead of CKE) for user input? One repeater item for each tab? This would be much easier for the client and certainly less error prone... 

it's already inside a repeater-field so it would be a repeater field inside a repeater-field :-/

[froot]

8 hours ago, Ivan Gretsky said:

You can try CKEditor content templates. I think you can get it into your system with AOS module.

OK I installed the AOS module and added CKEditor content templates to the body field. It seems to get closer to what I need. Still though, how can I create my template to select when selecting from the templates list?

[dynweb]

6 hours ago, fruid said:

it's already inside a repeater-field so it would be a repeater field inside a repeater-field :-/

This shouldn't be a problem ?

[Ivan Gretsky]

15 hours ago, fruid said:

Still though, how can I create my template to select when selecting from the templates list?

1. Change this AOS module setting as you wish:

2. Add templates definitions to that file (as described here or here).

[froot]

I actually went on with @dynweb's advice and am now working with Repeater-Matrix. 

That works like a charm! Thanks everyone.