@teamhive/rich-text-editor

Rich text editor web component. Built with Stencil.

Usage no npm install needed!

<script type="module">
  import teamhiveRichTextEditor from 'https://cdn.skypack.dev/@teamhive/rich-text-editor';
</script>

README

Built With Stencil

Hive Rich Text Editor

This web component allows you to add rich text editing to your applications.

 

Features

  • Add styling to your text inputs
  • Fully customizable toolbar
  • Flexbox based

 

Installation

  • npm i @teamhive/rich-text-editor

 

Usage

Somewhere in your project (e.g. main.ts):

import { defineCustomElements } from '@teamhive/rich-text-editor/dist/loader';
defineCustomElements(window);
<hive-rich-text [options]="options"></hive-rich-text>

Where options can be populated with any of the following properties:

 

Properties

Property Default Description Values
toolbar ['bold', 'italic', 'underline', 'strikethrough', '\|', 'link', '\|', 'color', 'highlight'] The components that will show up in the toolbar. bold, italic, underline, strikethrough, link, color, highlight, undo, redo, superscript, subscript, orderedList, unorderedList, removeFormat, -, \|
colors ['#FF4541', '#E65100', '#43A047', '#1C9BE6', '#6446EB', '#ACACC2', '#626272'] The colors that will show up for a quick selection when formating text color. Any valid hex code
highlights ['#f3f315', '#ff0099', '#83f52c', '#ff6600', '#6e0dd0'] The colors that will show up for a quick selection when formating highlight color. Any valid hex code
position top The position of the toolbar in relation to the text container. top or bottom
content null The content that will be loaded into the text container upon loading. plain text and/or html text as a string
placeholder Insert text... The text that will display when the rich editor is unfocused in the empty state. string
maxLength undefined The maximum number of available characters, if set. number
showToolbar always How the toolbar should be shown or hidden based on user actions always, onHover, or onSelect
autoFocus false To focus on the text component upon init. boolean
font: {
family,
size,
color,
faces
};
family: Arial
size: 12px
color: #626272
faces: null
To set what the font variables will be in the rich text editor. family: string
size: string
color: string
faces: FontFace[]

The font option allows for custom FontFace to be configured like this:

faces: [
    {
        weight: 400,
        style: 'normal',
        src: ['./SomeFont.ttf', './SomeFont.woff']
    },
    {
        weight: 400,
        style: 'italic',
        src: ['./SomeFont-Italic.ttf', './SomeFont-Italic.woff']
    },
    {
        weight: 500,
        style: 'normal',
        src: './SomeFont-Bold.ttf'
    },
    ...
]

You should define each weight and style separately similar to how you would define them in CSS using @font-face. You can also specific multiple file urls for src and they will each be specified in the font-face rule. If you just set src to a single url, it will be the only one used.

 

Custom Styling

Property Default
--hive-rte-background none
--hive-rte-button-size 25px
--hive-rte-border 1px solid #d1d1d1
--hive-rte-focus-border 1px solid #d1d1d1
--hive-rte-border-radius 0
--hive-rte-font-family Arial
--hive-rte-font-size 14px
--hive-rte-font-color #626272
--hive-rte-placeholder-color #ccc
--hive-rte-placeholder-position-top 10px
--hive-rte-placeholder-position-left 10px
--hive-rte-placeholder-position-right none
--hive-rte-placeholder-position-bottom none
--hive-rte-max-height none
--hive-rte-height 100%
--hive-rte-min-height 0
--hive-rte-max-width none
--hive-rte-width 100%
--hive-rte-min-width 0
--hive-rte-toolbar-padding 10px 5px
--hive-rte-body-padding 10px

 

Methods

Event Description Values Return
getContent() To return the current contents of the editor. null return: { text: 'Hive Rich Text Editor', html: '<b>Hive Rich Text Editor</b> }'
setContent(value: string) To set the content within the editor at any given time. Will override any and all values within the text editor. plain text and/or html text as a string null

 

Events

Event Description Return
textChange Key-up event hook when the user types in the editor. KeyboardEvent
styleChange Style change event hook when user selects a style from the toolbar. CustomEvent

 

Contributors

Austin Miller | :---: |Austin Miller|