Skip to main content

How HTML Editor Works across Loialcard App

Know more about the functionality of the HTML editor.

Updated over 4 months ago

Loialcard provides an HTML editor for the admins to craft module-wise descriptions that look descriptive and presentable wherever necessary. The following modules in the application contain the HTML editor,

  • Pages

  • Locations

  • Events

  • Card Theme Benefits

  • Popup on home screen

To start editing content

When starting fresh with new content in a section that includes a HTML editor, click the Add Content if you want to get started.
​

The editor has a default view only mode in the administration tool when presenting existing content. To edit the content clicked the edit icon to the right above the HTML field.
​

HTML editor feature highlights

The editor features include standard functionalities such as text formatting and undo/redo. Features are found in the tool bar as well as in the drop down menu above.

Apart from formatting options there some specific features worth mentioning:

  • Preview: Although not a presentation of the content in a mobile phone context, the preview function is helpful since it gives you a bigger view of the content and how it would render for your users.

  • Fullscreen: Gives you the possibility to expand the HTML editor inside the browser window presenting a better overview when editing. To exit the fullscreen mode, untick it in the menu, same as where you initiated it.

  • SHIFT+Enter: When hitting enter, a new paragraph is created in the HTML content, adding line spacing between the sections. This is great for paragraphs. By instead using Shift+Enter on the keyboard, the content changes row, but without line spacing. Great for keeping content more together, for example when presenting opening hours of your business (when you don't want to use the bullet feature that also does not add line spacing).

  • Images: The feature of adding images has two options:

    • From the menu, select insert and then use the Source option, adding a URL from the Internet leading to the image to be presented. Images like these are not optimised by the administaton tool, so when linking to a large and heavy image, this could affect loading times for the users of the app.

    • Uploading an image, which is then managed by the image plugin of the administration tool making sure the images are optimised, scaled and adjusted to a fitting image ratio. Upload can be done either through the insert / edit image option in the menu or simply by dragging the image from the computer desktop into the HTML-editor.

  • URL and linking: Mark content that you want to link to an external Internet web address and then click the Insert / Edit Link icon. Apart from linking to web addresses it is also possible to initiate an email, by using the format "mailto:[email protected]".

  • Clear formatting: By marking a text and then clicking the clear formatting icon (or from the menu) any undesired formatting will be removed. This is helpful when having pasted for example existing HTML content or text from Word documents.

Did this answer your question?