Best Practices: Content Editor (WYSIWYG Editor)

Table of Contents

Code view

Paragraph format

Paragraph style

Formatting

Lists

Indent

Insert image

Insert video

Insert table

Insert link

Align

Insert horizontal line

Colors

Emoji Picker

 

With each type of content (pages, events and albums) published on Simpplr, you're offered a content editor bar, otherwise known as a "What You See Is What You Get" or WYSIWYG editor. It looks like this...
wysiwyg_editor.png

Below we'll break down what each component of the editor does, as well as some best practices we've seen customers put in place using the editor. 

Code view

The code view button offers the most flexibility of any component in the editor. However, you may want to have some basic coding/HTML skills to utilize it. Opening the code view allows you to customize the HTML of your content, add widgets and more. 

Note:

Simpplr does not support custom CSS within content. Only inline CSS with HTML is supported via the Code view editor.

 

Expandable/collapsable text

Often you may have a page containing a lot of text, such as an article or blog post you're sharing on the intranet. It may be helpful for your End users to expand and collapse the text on-screen so it's not overly long. The code view in your WYSIWYG bar allows you to add custom HTML to your page. 

Follow the steps below to add an expandable/collapsible to the text in your page. 

  1. Input your text in the page. At the point where you want to introduce the expand/collapse function, we recommend writing "Click here for more" or something similar. See the example below.
    expand_text_1.png
  2. Open the code view in your WYSIWYG bar.
    code_view.png
  3. At the beginning of your text, introduce two tags; 
    <details>
    and 
    <summary>
  4. Then after your text "Click here for more..." close your <summary> tag. To close it, add 
    </summary>
  5. At the very end of your text, close the <details> tag with
    </details>
    Your code should look like this:
    code_view_2.png
  6. Close your code view to go back to the text. Click the "Click here for more..." text to see the rest of the page content expand. Click it again to collapse it.
    expand_collapse_gif.gif 
  7. Publish your page as you normally would. In the final version of the page, test the function again to ensure it will work for your End users.
    expand_collapse_2.gif

Anchor text/bookmarks

Often with longer content, it's good to have anchors or bookmarks to make the information more easily navigable to your users. You see this often, even in the article you're reading now. The code view button allows you to do this, or just link to specific parts of your content.

To get started:

  1. Input your content. 
  2. Add the anchor text. We'll create a table of contents for our example here.
    anchor_text_sample.png
  3. From the code view editor, assign the anchors to the headings in your ToC. The first anchor tag you'll create should be an "a href" tag, and resemble this: 
    <h2><a href="#first" target="_self">Heading 1</a></h2>

    As you can see, we've assigned a name (id) to our anchor by calling it "#first". You can title this whatever you'd like, just be sure you'll remember it. It's how we match up where we want the anchor to take us within the page. Once all your tags are input, your ToC should resemble something like this:
    anchor_text_sample_2.png

  4. Close the code view editor to see your new text. The anchor text color will be your Branding color set by the App manager.
    anchor_text_sample.png
  5. Now, back in the code view window, scroll to the area within your content where you want this tag to take the reader upon clicking. For our example, we want to assign "#first" to "Heading 1".
  6. Now we assign our anchor to the appropriate heading by creating an id tag. Based on the tag we created a moment ago, this new tag should look like this: 
    <h2 id="first">Heading 1</h2>

     

  7. Repeat this step with each anchor text you want to create. Remember, the h2 id must match the a href id you created in your first tag. You will just need to remove the # symbol. When you finish, be sure to test your page to make sure each bookmark works as intended.
    anchor_text_sample_3.gif
  8. If you wish, you can also create "Back to top" anchors to go wherever in the content you'd like. Just make sure that the a href tag is at the right place in the content, and that the id tag is at the top of the content. One good practice here would be to make "Table of Contents" itself an anchor tag that all your "Back to top" anchors go to when clicked.
    back_to_top_anchor_text.gif
  9. The code snippets you'll need for a "Back to top" function should look like this: 
    <p><a href="#top">Back to top</a></p>

    <p id="top">Table of Contents</p>

Remove table borders 

You're able to create tables in your content via the Insert table icon. However, by default the table will have borders around the cells. You can remove these in the code editor with the tag <td style="border:none;">. Anywhere you see a <td> or <td style> tag, insert the code snippet <td style="border:none;">.

Before
border_table.png

Code view
table_code_view.png

After
border_gone.png

As you can see, the border around "Hello" has been removed thanks to our code snippet. Copy & paste this code into each cell in the code editor to remove your table's borders.

 

Paragraph format

Since not everyone feels comfortable using the code view editor, the rest of the WYSIWYG options still offer plenty of customization! 

With the Paragraph format button, you're able to highlight whatever text you want, and assign it as any size heading within your content, normal text, or code view text.
Paragraph_format.gif

Paragraph style

The Paragraph style button lets you take text and format it into different styles that may be beneficial depending on the text. You can choose to create a callout box on the left, right, or center of the screen. This will emphasize the highlighted text to stand out within the content. callout_box_1.gif

Adding a center callout box will result in something like this:
callout_box_2.png

You're also able to make text into a standout quote with the Paragraph style
quote_addition.gif

Formatting

The formatting options include bolditalicizeunderline, and strikethrough text. The eraser icon allows you to clear the formatting of any selected text. 

Lists

Similar to a Word document, you can add numbered or bulleted lists to your content using these options. 

Indent

The indent button allows you to increase or decrease the indent at the start of a paragraph.
indent_editor.gif

Insert image

This button lets you add images from your computer or from the site files on the site you're posting the content to. For example, we're posting content onto the Information Technology site, so you can add an image that's already saved in the Information Technology site files.
add_image_to_content.gif

You also have the option of adding an image from a 3rd party url. This may be useful if your org has images stored on a file hosting site outside of Simpplr.

Insert video

The Insert video button allows you to paste a video URL from a video hosting website such as YouTube, Vimeo, Wistia, and more. You can paste the URL or embed code from the video to make the video inline with the content.
embed_video_to_content.gif

If you have Simpplr Video enabled on your instance, you can also use this button to upload a video from your computer. 

Insert table

This button allows you to create and add a table to your content. You set the required dimensions, and Simpplr does the rest. Simpplr limits the tables to 10x10 in order to make for a better mobile user experience.

If you want to show more data in a table, we recommend attaching a spreadsheet to your content.
insert_table_to_content.gif

Insert link

Here you can add a link to your content. This can be any URL you'd like. Add the link, then choose what the text should say that users will click. Once added, you'll be able to open, edit or unlink the link.
insert_link_to_content.gif

Align

Here you can align the highlighted text to the right, left, or center of the screen or justified.
align_text_in_content.gif

Insert horizontal line

This button adds a line to the spot of your cursor. This is useful for breaking up text throughout your content.
insert_horizontal_line.gif

Colors

This button allows you to change the color of the highlighted text in your content or the background color of the content. You can choose from one of the pre-selected options or insert the hex code for your desired color.
color_change_in_content.gif

Emoji picker

Finally, there's our Emoji picker. As you can guess, this allows you to add emojis to your content. We offer hundreds of emojis that you can browse through or search for. The settings icon lets you choose a default skin tone for character emojis as well.
Emoji_picker.gif

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.

Articles in this section