Hello! How can we help?

Search our knowledge base for loads of useful advice and answers to common questions

If you're still stuck you can always submit a support request and we'll get back to you ASAP

Guide to the WYSIWYG (What You See Is What You Get) Bar

Tim Roper -

screenshot of ckeditor bar

The WYSIWYG bar (officially known as the CKEditor) appears across most text fields in the admin end of Citizen Space. It can be used throughout a consultation build to help you provide the respondents with information and different ways of presenting that information. This is a basic guide through the features of this toolbar and will offer resources to show you how to best take advantage of these.

Text Formatting

screenshot of ckeditor bar with bold, italics and underline icons highlighted

The first three options on the WYSIWYG bar will be familiar to most, allowing you to bold, italicise or underline text. Once you've finished typing, simply highlight the text you wish to alter and use the buttons to apply the relevant format. 

Structuring and Highlighting Information

The next three buttons provide ways to improve delivery of information in a consultation. All of these are best used before entering your content but can be used after if necessary. If used before they will create the correlating structure for you to type your content within or they can be used to highlight paragraphs already entered and put them within the any of these formats.

screenshot of ckeditor bar with numbered list icon highlighted

The first option on this section of the toolbar helps you create a numbered list within Citizen Space.

  1. This
  2. can
  3. help
  4. make
  5. content
  6. more
  7. structured

It is preferable to use this function prior to typing or pasting text as once you have content entered you can only add this format to full paragraphs and would have to seperate out individual points manually using the enter/return key.

screenshot of ckeditor bar with bullet points icon highlighted

Next is the bullet point icon, which is a good way to make the content of your consultation easier for respondents to digest. They are particularly useful for getting small pieces of information across quickly:

  • such
  • as
  • statistics
  • or
  • key
  • facts

This operates in exactly the same manner as a numbered list, so you would use the enter/return key to manually organise content into separate bullet points if you were using this on text you've already entered.

screenshot of ckeditor bar with block quote icon highlighted

The last option on this part of the toolbar allows you to block quote text which is another way to draw attention to information you'd like respondents to read or highlight a relevant quote. 

screenshot of block quote example which says it can also help break up large bloacks of text which can typically be more engaging for the respondent

Using this function after entering text will always apply it to whichever paragraphs are highlighted. If you want to block quote a smaller section of text, separate this into its own paragraph and then use this function.

Hyperlinking

These buttons are for adding or removing a link to a web page, document or email contact from text in your consultation.

screenshot of ckeditor bar with hyperlinking icons highlighted

Using hyperlinks can be a good way to direct respondents to information without adding it directly into your consultation. The managing hyperlinks guide will take you through how to use this feature step by step. 

Embedding Media

The next group of buttons on the WYSIWYG bar are for embedding media into your consultation.

screenshot of ckeditor bar with embed image icon highlighted

The first button allows you to embed images. This can help break up chunks of text and keep a respondent engaged in the information you're providing. For accessibility reasons, users should alway include alternative text when embedding images. There is a detailed guide on how to use this feature, including how to add alternative text, already available on the Delib knowledge base.

screenshot of ckeditor bar with embed pdf icon highlighted

Next is embedding PDF documents, which is explained in this article. Adding PDFs, particularly when set up to open on an appropriate section or page, can allow respondents to be better informed on the topic of the consultation which can result in higher quality responses.

screenshot of ckeditor bar with embed rich media icon highlighted

Lastly is embedding rich media such as videos, maps or slideshows. Adding this type of interactive media to your consultation is another great way to keep your respondent's interest and present information in a more appealing format. This article will guide you through the process of embedding these different media types.

Editing Source Code

 screenshot of ckeditor bar with edit source code icon highlighted

The last feature of the WYSIWYG bar is the source button. This allows you to edit the HTML source code of a text field. Only use this feature if you're confident editing and creating code as it can create unintended consequences otherwise! If you do use this to change the format or appearance of any text, make sure that accessibility is considered before finalising any changes.

Hopefully this guide has helped you feel confident using the features of the WYSIWYG bar to make your consultation content as well structured and engaging as possible.