HTML Text Editor

Owned by Ashley Sneesby, created
Last updated: Feb 28, 2024 by Pascal Brammeier
6 min read

This documentation describes how to use the HTML text editor in Pika configuration forms.

Top of page

Table of Contents

HTML Text Editor Uses and Functions

The HTLM Text Editor is typically used for system messages, self-registration messages, header text, material request summary, archive header text, archive claim authorship header text, librarian reviews, and location admin header text.

Paragraph

Paragraph drop down can be used to change the text heading size.

Paragraph and heading options in HTML editor.

Paragraph inline formatting options

Inline formatting is automatically added to text when typing the characters listed below:

To create headings – Start a line with # or ## or ### followed by a space to create different headings.

  • # = Heading 1

  • ## = Heading 2

  • ### = Heading 3

Top of page

Text

The B is for bolding text, the I is for italics text, and the U is to underline text.

Text inline formatting options

Inline formatting is automatically added to text when typing the characters listed below:

  • Bold : Type **text** or __text__

  • Italic : Type *text* or _text_

  • Code : Type `text`

  • Strikethrough : Type ~~text~~

Top of page

URL

You can paste a URL in the box and it will save it as a clickable hyperlink.

 

You can set text with a hyperlink as the target destination. Type the text that you want to act as a link and use the hyperlink symbol to add the link to the text. Highlight the desired text and click on the hyperlink symbol, then paste the target hyperlink into the Link URL box. Click on the green check to save your edits. The red X does not delete information, it simply closes the edit function for the link form.

 

Top of page

Font Size

Highlight the text and click on the font size drop-down to change the size of the font.

Top of page

Text Alignment

Highlight the text and click on the text alignment dropdown to choose the alignment of your text.

The text alignment Library System Message is centered on default.

Top of page

Bulleted Lists

Click on the bulleted list icon to start adding a bullet list. The paragraph drop down will change to Choose heading.

Bulleted List inline formatting options

Inline formatting is automatically added to text when typing the characters listed below:

  • Start a line with an asterisk * or a dash - followed by a space

Top of page

Numbered List

Click on the Numbered List icon to start adding a numbered list. The paragraph drop down will change to Choose heading.

Numbered List inline formatting options

Inline formatting is automatically added to text when typing the characters listed below:

  • Start a line with 1. or 1) followed by a space.

Top of page

Indenting options for bulleted or numbered lists

The Increase indent becomes active when using the bulleted list and the numbered list.

The Decrease Indent becomes active when using the bulleted list and the numbered list.

Top of page

HTML

The HTML icon can be used when including information you would like to edit in HTML.

This will open up the HTML snippet window to add the codes for the inline formatting of your text.

The following HTML tags are allowed when inserting HTML:

<p> <div> <span> <a> <strong> <b> <em> <i> <ul> <ol> <li> <br> <hr> <h1> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <img> <script>

 You must click the green checkmark button in the HTML snippet window for your HTML changes to be saved.

If adding any JavaScript code to a field that allows it, please notify Marmot as third party JavaScript code could be a security or patron privacy risk.

Accessibility requirements for HTML elements

IFrames

When using the HTML editor feature to add an HTML element to Pika such as a chat widget in the sidebar links, the corresponding iframe need a title attribute to meet accessibility standards. The iframe title provides text-only users with a good decision point for them to choose to either enter the iframe content or to move on to the next element in the page.

<iframe title="[Useful description of the embedded widget for text-only viewers]" ... >

An example iframe for a chat widget title is below :

<iframe title="Chat Widget" ... >
Embedded images

When using the HTML editor feature to add an HTML element to Pika such as an embedded image, the corresponding image requires alternate text to explain the content of the image.

<img alt="[Useful description of Image for text-only viewers]" ... >

Top of page

HTML Alerts

When entering HTML for System Messages you can use HTML bootstrap alerts to easily highlight messaging for your patrons with different colored backgrounds.

Yellow System Message

  • Use this HTML in the ‘warning’ for a special yellow system message

  • <p class="alert alert-warning">

  • <a href="url here">link text here</a> - can be added when you want a hyperlink

Red System Message

  • Use this HTML in the ‘danger’ for a special red system message

  • <p class="alert alert-danger">

  • <a href="url here">link text here</a> - can be added when you want a hyperlink

Blue System Message

  • Use this HTML in the ‘info’ for a special blue system message

  • <p class="alert alert-info">

  • <a href="url here">link text here</a> - can be added when you want a hyperlink

Green System Message

  • Use this HTML in the ‘success’ for a special green system message

  • <p class="alert alert-success">

  • <a href="url here">link text here</a> - can be added when you want a hyperlink

Top of page

Block quote

Highlight the text you would like to use as a quote, and click on the quotation marks icon.

 

 

Block quote inline formatting option

Inline formatting is automatically added to text when typing the characters listed below:

  • Start a line with a greater-than sign > followed by a space.

Top of page

Insert Table

Click on the Insert Table icon to create a table.

Top of page

Undo and Redo

Click on the Undo (CTRL +Z) to undo anything in the text editor box.

Click on the Redo (CTRL + Y) to redo anything in the text editor box.

Top of page