"When I try to edit my page, the WYSIWYG is blank"
Your feature box may be to blame. 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.
Within the WYSIWYG users have the ability to insert a Feature Box widget that includes a title and body area. The output will be embedded in the body of the page, and be styled to make it stand out visually.
To insert a Feature Box
- Navigate to your content where you want to include the Feature Box, and select its Edit option.
- In the content's WYSIWYG select the location in the body of the text approximately where you want the Feature Box to appear on the page.
- Click on the Widget icon menu and select the Feature Box icon -
- A window will appear asking you to define:
- Alignment:
- None
- Left
- Right
- Show Image or Video
- Checkbox
- Alignment:
- Click OK to continue.
- A window will appear inside of the WYSIWYG with two or three defined sections depending on whether or not you opted to include an image or video:
- Add an Image or Video (visible only if you enabled the checkbox in the feature's configuration options in Step 5). The image or video should be added via your Media Library icon in the WYSIWYG.
- Title - required
- Content
In-page demo
Example of a feature box
This Feature box has been aligned to the right side of the page allowing the main body text to float around it in a text wrap. By default, the Feature box is the default blue, with the Title area being slightly darker than the Feature box's body area. If you are versed in CSS, you can use the built-in CSS Editor to change the accent color to a different one in the official UC Davis color palette. Such is the case with this example where the official gold tones were used instead.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages.
It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family.
CSS code used in the above example
/* Feature box style to shades of gold */
.wysiwyg-feature-block
{ background-color: #F8EECC; }
.wysiwyg-feature-block__body,
.wysiwyg-feature-block__title
{ color: #000; }
.wysiwyg-feature-block__title
{ background-color: #DEB31A; }
.wysiwyg-feature-block__body a
{ color: #002855; }