Forum

Thread tagged as: Problem

ckeditor not showing on all blocks?

Hi all, Got a strange issue. Ive got this page which uses blocks, in this case the block is a staff biography block with title and text field. The issue I'm having is that the text field is supposed to be using ckeditor, so all of the formatting buttons appear, however, if I add a second, third, fourth block of this same staff biography block, the text fields are not using ckeditor and have no formatting?

Does any one have any idea why this might be happening?

Here is the snippet of the block that spits out the textarea incase it helps :

<div class="bioCon">
                                                        <h5><perch:content id="staffname" type="text" label="Staff Name" required="true" title="true" /></h5>
                                                        <h6><perch:content id="stafftitle" type="text" label="Staff Title" required="true" title="true" /></h6>
                                                        <p><perch:content id="staffinfo" type="textarea" required="true" label="Staff Bio Info" size="s" editor="ckeditor" html="true" /></p>

                                                      </div>
Natalia Robba

Natalia Robba 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

This is a known issue that we're looking into.

Drew McLellan said:

This is a known issue that we're looking into.

Thanks Drew, any idea on timeline? Just wondering whether or not to try another editor in the meantime maybe this will help.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I believe it's the same for any JavaScript editor, but the built in ones may be better. I don't have a timeline, but it's not likely to be this week.

any updates on this issue? Just waiting on this to be able to push website live. If not I need another solution asap

Drew McLellan

Drew McLellan 2638 points
Perch Support

We've not been able to reproduce the issue as yet - it's working perfectly here.

Drew McLellan said:

We've not been able to reproduce the issue as yet - it's working perfectly here.

Hi Drew, this is a little confusing. In previous posts you mention it was a known issue that was being worked on?

The issue is still there for me, ckeditor loads fine on the first block, but not in blocks after that. Here is the full snippet of code I am using, perhaps I am doing something wrong then? Any advice appreciated am stuck with this

<perch:block type="staffbio" label="Staff Biography" icon="users">
                                <perch:content type="checkbox" id="isselected" value="1" label="Expanded Department" suppress="true" />
                                      <div class="staffSection">
                                    <a class="departmentTab"><span><perch:content id="departmentname" type="text" label="Department Name" required="true" title="true" /></span></a>
                                      <perch:repeater id="staffBio" label="Staff Biographies Version 2" max="20"> 
                                      <perch:before><div class="staffCon"></perch:before>
                                                <a class="fancybox member testing" href="#<perch:content id="employeename" type="text" label="Popup Reference - Please ensure no spaces here i.e. jsmith, tbrockmann, etc" required="true" title="true" />">
                                                    <img src="<perch:content type="image" id="image" label="Image" width="250" />" />
                                                  <div class="staffInfo">
                                                    <h5><perch:content id="staffname" type="text" label="Staff Name" required="true" title="true" /></h5>
                                                    <h6><perch:content id="stafftitle" type="text" label="Staff Title" required="true" title="true" /></h6>
                                                  </div>
                                                  </a>
                                                  <div class="bio alt" id="<perch:content id="employeename" type="text" label="Name (jsmith)" required="true" title="true" />">
                                                    <div class="mainBio">
                                                      <img src="<perch:content type="image" id="image" label="Image" width="250" />" />
                                                      <div class="bioCon">
                                                        <h5><perch:content id="staffname" type="text" label="Staff Name" required="true" title="true" /></h5>
                                                        <h6><perch:content id="stafftitle" type="text" label="Staff Title" required="true" title="true" /></h6>
                                                        <p><perch:content id="staffinfo" type="textarea" required="true" label="Staff Bio Info" size="s" editor="ckeditor" html="true" /></p>
                                                      </div>
                                                    </div> 
                                              </div>
                                        <perch:after></div></perch:after>
                                      </perch:repeater>
                                      </div>         
                              </perch:block>

Thank you

Drew McLellan

Drew McLellan 2638 points
Perch Support

Hi Drew, this is a little confusing. In previous posts you mention it was a known issue that was being worked on?

It is a known issue, as multiple people have reported it. I'm not suggesting they're lying - it's obviously an issue. But as yet I've not been able to find and create the circumstances that reproduce the issue.

Drew McLellan said:

Hi Drew, this is a little confusing. In previous posts you mention it was a known issue that was being worked on?

It is a known issue, as multiple people have reported it. I'm not suggesting they're lying - it's obviously an issue. But as yet I've not been able to find and create the circumstances that reproduce the issue.

Thank you for your reply

Wondering if there's anything I can do to help identify the issue. It's effecting me on all of my sites.

Regards, Monty

Montgomery Lewis said:

Wondering if there's anything I can do to help identify the issue. It's effecting me on all of my sites.

Regards, Monty

Sorry to hear you're having the same issues Monty, I am unsure what step to take next and this is delaying site launch =(

Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you tried it with Redactor?

I was initially using redactor and switched the template to ckeditor to see if it was a redactor issue...

So I think it is something that effects all editors because I think I tried all the editors I had installed on that site (redactor, ckeditor and ace).

I think it corresponded with the perch update that allowed for the override of the redactor config file... (/perch/addons/plugins/editors/config.js)

Anyway. This may help, sorry if this is posting where I shouldn't (not my tread).

I'm attaching the template in question. It has several blocks that each have textareas with redactor set as the editor.

If you load this template, add a couple 'headline and text' blocks (I made them all popsicles for you), you should see that the editor does NOT load.

Here's the weird part. If you change the textarea editor in the 'content_slider' block to ckeditor, the textarea for 'headline and text' will display the redactor editor in the admin!

And, Natalia, For your launch, you can enter the html into those fields and they will display correctly on the site as a temporary work around.

Here's the template for testing:

<div class="textual">
<perch:blocks>
  <perch:block type="promo_block" label="Promoted Text with Background" icon="popsicle">
  </div>
    <div class="promo parallax promo-dark promo-flat promo-full <perch:content id="sticktotop" type="radio" label="Stick to Top?" options="Yes|header-stick ,No" help="This setting will make this element butt up against the element above it." /> <perch:content id="bottommargin" type="radio" label="Bottom Margin?" options="Bottom Margion 50px|bottommargin, No Bottom Margin|nobottommargin, Small Bottom Margin 12px|bottommargin-xs" help="Set whether the size of this element’s bottom margin." />" style="background-image: url(/images/parallax/7.jpg); background-position: 50% 308.5px;" data-stellar-background-ratio="0.5">
    <div class="container clearfix">
        <h3><perch:content id="promo_text" type="textarea" label="Promo Text" required="true" imagecrop="false" /></h3>
    </div>
</div>
<div class="container clearfix">

  </perch:block>
  <perch:block type="headline_text" label="Headline and Text" icon="popsicle">
    <perch:content id="headline" type="text" label="Title" required="true" html="false" suppress="true" />
    <perch:content id="body" type="textarea" label="Body" html="true" editor="redactor" />
  </perch:block>
  <perch:block type="content_slider" label="Slider" icon="popsicle">
    <perch:content id="section_title" type="text" label="Section Title" required="false" html="false" help="The title that appears above the this section of the page." suppress="true" />
        <perch:content id="number_of_columns" type="number" label="Number of Columns" required="true" suppress="true"  help="Enter the number of columns that should display." />
        <perch:repeater id="slider_items" label="Slider Items">
            <div class="col_one_third <perch:if exists="perch_item_last" /> col_last<perch:else /></perch:if>">
                <div class="avatar"><img src="<perch:content id="ourvaluesimage" type="image" label="Our Values Image" crop="true"/>" style="width: 100%;"></div>
                <h3 class="topmargin-xs"><perch:content id="value" type="text" label="Value" required="true" html="false" title="true" /></h3>
                <perch:content id="ourvaluetext" type="textarea" label="Value Text" html="true" editor="redactor" />
            </div>
        </perch:repeater>
  </perch:block>
  <perch:block type="page_divider" label="Page Divider" icon="popsicle">
</div>
<div class="jag-f8 <perch:content id="bottommargin" type="radio" label="Bottom Margin?" options="Bottom Margion 50px|bottommargin, No Bottom Margin|nobottommargin, Small Bottom Margin 12px|bottommargin-xs" help="Set the size of this elements bottom margin." />">
</div>
<div class="container clearfix">
  </perch:block>
</perch:blocks>
</div>

Can someone link me the redactor plugin please? cant see to find it

Drew McLellan

Drew McLellan 2638 points
Perch Support

It's included. Use editor="redactor"

Drew McLellan said:

It's included. Use editor="redactor"

Aaah thanks, dead simple then =)

Have just made the switch and unfortunately I experience the same issue, only the very first block is correctly loading the texteditor, all subsequent blocks after that revert to standard text box

Trying to install tinymce as a custom editor, but can't find the file _config.json, do we need to create this? Following instructions here :

https://docs.grabaperch.com/api/editors/

Bit desperate so dont know what else to try but another editor and see if I get lucky

Drew McLellan

Drew McLellan 2638 points
Perch Support

There's no version of the TinyMCE plugin for Perch 3. (At least not from us.)

Ok, so going to go live without this for now. Could we get some info please on when this bug will be fixed? I would be happy to provide login details if it helps so you can see the issue for yourselves, however, even after stripping down a template to just a single block which loads one of the js editors, the same issue stands, when adding more than one occurence of the block, the editor no longer loads.

Thank you

Drew McLellan

Drew McLellan 2638 points
Perch Support

We'll try and look at it for the next release.

Natalia, see this thread if you need a fix in the meantime:

https://forum.grabaperch.com/forum/08-30-2017-redactor-in-blocks-issue