README
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|