More Tips and Tricks using the Contentr Page Editor

Below is a screen shot of the button bar from the page editor in contentr setup.  This is a widely used, publicly available plugin called “SummerNote”.  You can find their website for more info. 




About the Menu bar:  Hovering over the icons in the editor will display their function.   The Image upload icon is third from last and looks like an image, and allows you to select and insert images to your Contentr page.  These are similar to the usual icons found in your word processor. 

The next to last icon changes the editor to Fullscreen mode.  This might be easier for editing larger pages.

The very last icon is Code View.  This allows a more advanced user to review and edit the actual html being generated by the editor.  You can insert or modify the html.

Code View:

  • modify width of image
  • add more styling to paragraphs with the style attricute - <p style="width: 100%;">
  • delete extra empty paragraph tags generated by the editor, or copy and paste more paragraphs. This is one way to modify spacing on your page. The extra paragraphs look like this -
        <p>&nbsp;</p>

Other menu buttons:

  • change font, font-size, color
  • create Headers ( h1, h2, etc)
  • format your page to Right justify, Left justify, or Center text. Change font size and color, insert Headers
  • create Ordered (with numbers) and Unordered list (like the list we are are in here)
  • insert Tables
  • hover over an inserted Image for a pop-up menu to size and align the image.
  • link icon to insert or edit links to other pages or websites.  Create display text for long links.