Why do some DesignPLUS features break using the Canvas toolbar and Rich Content Editor?

If you use the Canvas Rich Content Editor (RCE), you may find that some tools break styles or functionality of features built using the DesignPLUS sidebar. Here are the tools we recommend using the sidebar to make edits to prevent the loss of HTML.

Our developers do their best to make it so various tools do not break while using the Canvas Rich Content Editor. However, some tools can break the styling of DesignPLUS elements while using the Canvas RCE.

Banner Title

The Banner Title has many underlying <span> tags in the HTML that allow users to adjust and add styles. Those spans can be accidentally removed while deleting and adjusting text directly using the RCE. Likewise, adding links or additional tools within the Banner Title using the Canvas toolbar can remove styles created by the <span> tags.

We recommend using the sidebar to add or adjust text within the Banner Title. To adjust the Banner Title text, 

1. Select the Banner Title in the RCE
2. Under the Edit Current Element tab of the sidebar, select the Banner Title Tool.
3. Open the Content panel
4. Adjust or remove the Prefixes, Title, Subtitle, and Description, as desired

For more information on the Banner Title tool, see the DesignPLUS User Guide: Banner Titles.

Lists

We have had reports of lists wrapping around the <div> tag containing the dp-wrapper class. This is due to how Canvas has built its list tool. The Canvas Rich Content Editor converts any parent element containing a list into a list. The issue usually occurs when adding a list or changing the list type using the Canvas toolbar.

We recommend using the sidebar to add lists to a page. To add a list,

1. Place your cursor in the editor where you want the new list to go
   or use your cursor to select multiple existing paragraphs.
2. Open the Add panel
3. Select List: Ordered or List: Unordered

We recommend using the sidebar to adjust the list type. To do this,

1. Select the list in the RCE
2. Under the Edit Current Element tab of the sidebar, select the List tool
3. Open the Style panel
4. Adjust the List type to the desired style.

For more information on Lists, see the DesignPLUS User Guide: Ordered and Unordered Lists.

If users do not have access to the DesignPLUS sidebar, the Canvas toolbar can be used to adjust the list style type. This is done by removing the list and reapplying the new list style. To do so,

1. Highlight the entire list in the RCE
2. Select the current list type in the Canvas toolbar
3. Re-highlight the entire list in the RCE, which is now in a group of paragraphs
4. Select the new list type in the Canvas toolbar

Tables

When a Table is added using the RCE, the table does not have headers or scopes automatically applied causing the table to not be accessible. However, when a Table is inserted onto a page using the DesignPLUS sidebar, scopes and headers are automatically applied. 

If properties of the table are adjusted using the RCE, style attributes are added; whereas, adjusting styles using the DesignPLUS sidebar adds classes. If a user uses both the RCE and DesignPLUS, DesignPLUS styles will trump the RCE. To avoid confusion, we do not recommend mixing and matching RCE with DesignPLUS to format tables. This is also true for alignment formatting (left, center, right) for any element.