MySource Matrix Developer

Users often use non-visual elements within the contents of a page, such as borderless tables and intra-page anchors. Once these elements are inserted, there is no visual aid to indicate the placement of the element. This makes it hard for non-technical editors to maintain hidden elements and may lead to these elements being accidentally removed along with visible content.

Different forms of white-space within content will also change the look of a page. Paragraph styles are often defined in a site design so it is important that editors use paragraphs rather than line breaks when laying out content. All forms of white-space is hidden, so the editor cannot visual identify if the correct white-space element is being used without switching the sou=rce view.

New WYSIWYG Visual Aid Plug-in

This development will be implemented using a new WYSIWYG plug-in to display visual aids. The purpose of this new plug-in is to provide all visual aids for the WYSIWYG editor and should be modified as new visual aids are required.

The WYSIWYG plug-in approach allows users to enable the visual aids when editing content while also allowing them to disable the visual aids if the screen becomes too cluttered.

Anchor Visual Aid

The visual aid for anchor tags will be implemented by adding HTML code to the users content when in WYSIWYG view mode. A SPAN tag containing a visual indicator will be inserted into the content wherever an anchor tag is found. This action will be performed in the print_plugin_get_html() function that is available to WYSIWYG plug-ins. This function will retrieve the HTML that has been displayed, search this HTML to find any anchors that are present and modify it to display the visual indicators required.

When the contents of the WYSIWYG editor is submitted, the additional content that has been inserted will be removed to avoid the visual indicators being displayed on the frontend. This action will be performed by the plug-in in the print_plugin_form_submit() function that the WYSIWYG editor exposes. This function will search the current HTML content of the editor for any visual indicators that it has inserted and will remove them. This allows the content to be submitted exactly as the user has entered it without requiring them to disable visual aids before submitting.

The indicators will also need to be removed from the content when the user switches to view source mode. This will be achieved in a similar manner to that described for the print_plugin_form_submit() function but will be implemented in the print_plugin_pre_get_html() function.

Hidden Table Borders Visual Aid

The WYSIWYG table editing plug-in currently has a button to show hidden table borders. Tables without borders are given a dashed outline to make them easier to see and maintain.

This visual aid will be removed from the table editing plug-in and placed into the new visual aid WYSIWYG plug-in.

Paragraph Visual Aid

The visual aid for end paragraph tags (</p>) will be implemented by adding HTML code to the users content when in WYSIWYG view mode. A SPAN tag containing a visual indicator will be inserted into the content wherever an end paragraph tag is found and on the last line of the paragraph.

The implementation details of this functionality are the same as the anchor visual aid described within this document.

Break-right Visual Aid

The visual aid for break-right tags (</br>) will be implemented by adding HTML code to the users content when in WYSIWYG view mode. A SPAN tag containing a visual indicator will be inserted into the content wherever a break-right tag is found and on the same line as the break-right tag.

The implementation details of this functionality are the same as the anchor visual aid described within this document.