Forum
Multiple instances of ckeditor not loading
Choosing a subject line for this was tricky as I'm not 100% sure how to explain what's happening so I wish I could attached a screenshot. Basically, I have multiple instances of ckeditor in most of my content blocks and in all cases only the first editor loads correctly, all subsequent instances do not display the editor entirely. Only the first has the full set of editing tools above the text input field all others don't display any at all, just a box to write text in but no way to edit it. I've made sure that they all have different id's. The code is below.
If you can see the problem that I cannot please let me know, I've tried quite a few things to now avail.
<div class="<perch:content id="title-bgcolour" type="select" label="Page title background colour" options="Dark Blue|row-darkblue, Mid Blue|row-midblue, Light Blue|row-lightblue, White|row-white" allowempty="false" required="true" order="1" />">
<div class="container content-title">
<div class="row">
<div class="col-12">
<h1><perch:content id="title" type="text" label="Page title" title="true" size="l" order="2" /></h1>
</div>
</div>
</div>
</div>
<div class="<perch:content id="info-bgcolour" type="select" label="Info background colour" options="Dark Blue|row-darkblue, Mid Blue|row-midblue, Light Blue|row-lightblue, White|row-white" allowempty="false" required="true" order="3" />">
<div class="container content-block">
<div class="row">
<div class="col-sm-12 col-md-8">
<perch:content id="text" type="textarea" label="Content text" html="true" editor="ckeditor" />
<perch:if exists="accordion">
<perch:repeater id="accordion" label="Accordion">
<div class="accordion-item">
<p class="accordion-title">
<a class="btn btn-primary" data-toggle="collapse" href="#<perch:content id="slug" type="slug" for="accordiontitle" />" aria-expanded="false" aria-controls="<perch:content id="slug" type="slug" for="accordiontitle" />"><perch:content id="accordiontitle" type="text" label="Accordion title" required="true" /></a>
</p>
<div class="collapse" id="<perch:content id="slug" type="slug" for="accordiontitle" />">
<div class="card card-body">
<perch:content id="accordioncontent" type="textarea" label="Accordion content" html="true" editor="ckeditor" />
</div>
</div>
</div>
</perch:repeater>
</perch:if>
</div>
<div class="col-sm-12 col-md-4">
<perch:content id="location" type="textarea" label="Address" html="true" editor="ckeditor" />
<div>
</div>
<perch:content id="findingus" type="textarea" label="Transport information" html="true" editor="ckeditor" />
</div>
</div>
</div>
</div>
You can add a link to an image.
Can you post your diagnostics report?
Link to the screenshot: https://www.dropbox.com/s/eumk2a3zt1q3iee/Screen%20Shot%202017-12-20%20at%2009.44.57.png?dl=0
Diagnostics below:
Does the editor load if you focus the fields?
As soon as I add one of the repeaters the editors load. Is that the same thing? I'm not sure what you mean by focus the fields?
I mean click into the field so you can start typing.
Do you get any errors in your browser console?
No clicking inside the field does nothing. I've got no errors in the console either.
Is the CKEditor plugin recently downloaded?
Yes, I downloaded it yesterday.
Ok. It's not something we've heard other people reporting since this was last fixed, but we'll see if we can reproduce it.
Great thanks! Let me know what you find out.
Any luck? I probably won't be dealing with this until the new year after today but can come back to the forum and see if you've got any ideas then.
No, I've not had a chance to look at it yet.
Hi Drew, just wondering if you had a chance to look at this yet?
Andy, if you enter something in the CKEditor textarea field and enter the record, does the editor then appear?
Hi Montgomery. No it doesn't.
It appears to be something to do with my accordion repeater. When I add an accordion item the text editors appear and when I remove the whole "<perch:if exists="accordion">" section of the code the text editors appear without an issue.
I've realised I don't need the <perch:if> tags around the repeater but that hasn't made a difference.
If I remove the below line from the template code the other text editors work fine but I cannot understand why that would be.
Whole template code:
It's working perfectly for me here. I've just updated the CKEditor plugin to use v4.8.0 of CKEditor, so maybe download that and give it a try.
I'm about to leave for the day but I will download it and let you know if I still have an issue. Thanks Drew.