t-input-editor

This component provides a WYSIWYG editor built on top of QuillJs, with validation and state. It has four different designs and has many options to tweak its properties.

Internally, it uses quill, quill-delta and @jaames/iro. And to limit tohama dependencies, you have to install them and pass them to the component.

Learn more about forms.

Basic Usage

<TInputEditor placeholder="Write your article..." />

Initial Value, Outlined Design, and Validation

<TInputEditor
  controller={TInputEditorController.create({
    value: '{"ops":[{"insert":"Hello world!\n"}]}',
    onValidate: async ({ value }) => {
      if (!value) {
        return "Field is required";
      }
    },
  })}
  placeholder="Write your article..."
  design="outlined"
/>

Read Mode

<TInputEditor
  controller={TInputEditorController.create({
    value:
      '{"ops":[{"insert":"Hello world!"},{"attributes":{"header":2},"insert":"\n"},{"insert":"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.\n"}]}',
  })}
  placeholder="Write your article..."
  mode="read"
  design="solo"
/>

API

No options available

Forms

t-input-dropdown

Forms

t-input-select

Table of Contents