Editor.Html

A WYSIWYG HTML editor component.

Demo

React

Vue

Usage

React

import { useState } from 'react';
import { Editor } from '@fintech-sandpit/ui/react';

const [value, setValue] = useState('<h3>Lorem ipsum</h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>');

return (
  <Editor.Html
    value={value}
    onChange={setValue}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { Editor } from '@fintech-sandpit/ui/vue';

const value = ref('<h3>Lorem ipsum</h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>');
</script>

<template>
  <Editor.Html v-model="value" />
</template>

Props

React

Name	Type	Default	Description
value	string	—	The HTML content (controlled)
disabled	boolean	false	Whether the editor is disabled

Vue

Name	Type	Default	Description
model-value	string	—	The HTML content (controlled) 1
disabled	boolean	false	Whether the editor is disabled

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onChange	(value: string) => void	Callback fired when the HTML content changes

Vue

Name	Payload	Description
update:model-value	string	Event emitted when the HTML content changes