Jump to content

CKeditor add accordion


Recommended Posts

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 

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

inside the <ul uk-accordion>

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

Thanks for help!

Link to comment
Share on other sites

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;


  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :-/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...