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: Arialsize: 12pxcolor: #626272faces: null | To set what the font variables will be in the rich text editor. | family: stringsize: stringcolor: stringfaces: 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|