@teamhive/rich-text-editor
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.2 • Public • Published

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

    Keywords

    none

    Install

    npm i @teamhive/rich-text-editor

    DownloadsWeekly Downloads

    98

    Version

    2.3.2

    License

    MIT

    Unpacked Size

    1.2 MB

    Total Files

    86

    Last publish

    Collaborators

    • em843
    • caleb_hursh
    • sarcolemna
    • wzachsmith
    • granttw
    • jpinkster
    • sbannigan
    • jgibson55
    • emrad
    • jsmit2239
    • ryankayne
    • mriess260
    • nkosy