@inftechsol/react-slate-wysiwyg v1.8.7
@inftechsol/react-slate-wysiwyg
About component
It is a simle Wysiwyg component using Slate (slate-react) with some basic formatting.
Compatibility
This component use slate-react v0.95.0, react v18.2.0, react-dom v18.2.0. You should use FontAwesome 6 for the button icons, and Boostrap 5.
Installation
npm i @inftechsol/react-slate-wysiwyg
Basic usage
import React from 'react';
import { Wysiwyg, initialValue, Editor, setEditorValue } from '@inftechsol/react-slate-wysiwyg';
const App = () => {
const initVal = initialValue || [ type: 'align-left', style: {{ fontSize: '17px', textALign: 'left' }} ];
const [value, setValue] = useState(initVal);
const onChange = (value) => {
setValue(value);
}
const getDataFromServer = () => {
fetch('https://example.com/api/getData', { method: 'GET' }).then((value) => {
setEditorValue(value, Editor);
})
}
return (
<div>
<div>
<button onClick={getDataFromServer}>Get Data</button>
</div>
<div>
<Wysiwyg onChange={onChange} value={value} />
</div>
</div>
);
};
export default App;
Properties
- Wysiwyg properties:
- value: CustomElement[] (required) - see initialValue or Slate documents,
- onChange: function (required)
- className: string (optional) // default: 'react-slate-wysiwyg',
- id: (optional) string | number
- colors: object (optional) - Formatting buttons font color // default: { normal: { activeColor: '#0f0', color: '#000' }, reverse: { activeColor: 'black', color: '#0f0' } },
- reserved: (optional) boolean - colors is reserved // default false,
- placeholder: (optional) // default: 'Ide írjon szöveget...',
- uploadType: (optional) 'link' || 'pc' // default 'link' - PC upload is not working yet,
- customButtons: (optional) Array - add custom Text(format) - [{ format: string, text: string }] - [{ format: ${variable}, text: ${variable} }]
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
8 months ago
8 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago