Editor.Html

A WYSIWYG HTML editor component.

Demo

React

Vue

Example

React

import { useState } from 'react';
// Import component
import { Editor } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that the tooltip styles are also required.
import '@fintech-sandpit/ui/style/components/editor.css';
import '@fintech-sandpit/ui/style/tooltip.css';

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 component
import { Editor } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that the tooltip styles are also required.
import '@fintech-sandpit/ui/style/tooltip.css';
import '@fintech-sandpit/ui/style/components/editor.css';

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