A chalkboard with the words problem and solution, with a red line scratched through the word problem.

"When I try to edit my page, the WYSIWYG is blank"

Your feature box may be to blame

  • by Jessica L Hayes

At some point prior to our upgrade to the latest version of our WYSIWYG (CKEditor 5), someone may have added an image to one or more feature boxes on your page. The code requirements in CKEditor 5 are much stricter than the last version and images were never meant to be included in the body area of the Feature box at all. This combination of issues results in the inaccessible text area of your WYSIWYG, so let's look at how to fix it so normal editing options will be available again.

Steps

  1. Turn off Javascript in your browser. If you're using Chrome, for example, you can go into Chrome's settings -> Privacy and Security > Javascript and click on "Don't allow sites to use JavaScript". A quick Google search will get you the results for the browser you're using.
  2. Return to your SiteFarm page and refresh the screen and click Edit. This is going to display the body content as if it's in full HTML mode, complete with tags.
  3. Look for a tag section that starts with feature-block and ends with /feature-block, like in this example:
<feature-block class="u-width--half u-align--right">
 <div slot="title">Welcome, Class of 2027!</div>
  <div slot="body">
   <drupal-media data-align data-entity-type="media" data-entity-uuid="09177f8a-19f6-498c-b6e6-8b58dde135d9"></drupal-media>
   <p class="text-align-center"><a class="btn--block btn--primary"   href="https://video.ucdavis.edu/media/2023+Vet+Med+White+Coat+Ceremony+-+August+18th%2C+2023_1.mp4/1_1nuly0lh">View the Recording of the Live Streamed Event!</a>  <br><br>
   <strong><a data-entity-type="file" data-entity-uuid="ac793e72-5b3c-43a8-b49a-49ac1ff33d21" href="/sites/g/files/dgvnsk491/files/inline-files/White%20Coat%20Ceremony%20Program%202023_0.pdf">2023 White Coat Ceremony Program</a>
   </strong></p>
 </div>
</feature-block>

  1. See if it contains an image, which will be represented by this type of tag notation:

    <drupal-media data-align data-entity-type="media" data-entity-uuid="09177f8a-19f6-498c-b6e6-8b58dde135d9"></drupal-media>

  2. Delete the drupal-media line.
  3. Repeat this process if you have multiple Feature boxes on your page.
  4. Click Save to finish.
  5. Turn Javascript back on in your browser and refresh the page to see if you can edit it normally again.

Primary Category

Tips, Hints, Best Practices

Tags

Feature box CKEditor 5