WYSIWYG Editor

Description

A rich text editing component with a "what you see is what you get" functionality in creating your content from basic to advance formatting.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-wysiwyg --save

Standard WYSIWYG

Configuration

import Wysiwyg from 'empower-wysiwyg';

<Wysiwyg
   label="MESSAGE"
   apiKey="THE_API_KEY"
   onChange={(template)  =>  onChangeHandler(template)}
   maxImgSize={2}
   totalMaxImgSize={2}
   maxTemplateSize={2}
   onError={(err)  =>  getError(err)}
/>

Uploading Image to a Storage

By default uploaded images is automatically attached to the template as blob data. However, this may cause some performance drawbacks for larger images. To resolve this you can use the onUpload prop to upload your image to some storages. Refer to sample code below

Configuration

import Wysiwyg from 'empower-wysiwyg';

const uploadImage = async(image) => {

   const response = await ...your api endpoint here to upload
   
   const {data} = response
   return data

   //NOTE!! the return must be an object with the following structure
   //{src: 'https://the-image-url.com/image.png', id: 'some-id-here'}

} 

<Wysiwyg
   ....other props
   onUpload={(image) => uploadImage(image)}
/>

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
height	Number	Optional	Sets the height of the component
label	String	Optional	Define the display label of the component
apiKey	String	Required	The API key issued by the TinyMCE to your account in order access the library.
maxImgSize	Number	Optional	Sets the allowed maximum size of image
totalMaxImgSize	Number	Optional	Sets the allowed maximum size of all the image that you'll be using in the component
maxTemplateSize	Number	Optional	Sets the allowed size limit of the template
value	String	Optional	Define the template value
loader	JSX Element	Optional	Sets the loader you want to display when the component is loading
onChange	Function	Required	A function to trigger upon editing the template. The template can be extracted in the function arguments Args: template - The template removedImages - All the removed images from the template (You can use this if you have an asset management)
onUpload	Function<Promise>	Optional	A function to trigger if you want to make use of a separate asset management. NOTE!! Your upload of image to an API Endpoint must also be located in this function. A return containing the information about the uploaded image such as the source and id is also expected Args: base64StringImage - The image file converted to base64 Expected Return: Obj{src: 'https://the-url-of-the-image.com/image.png', id: 'random-gen-id'} - The successfully uploaded image information
onError	Function	Optional	A function to trigger if the component encountered an error. The error indicator can be extracted in the function arguments Error Indicator max-template-size-exceeded (template size exceeded the max limit)
customFileTypeError	String	Optional	Sets the display error when an invalid file type has been uploaded
customFileSizeError	String	Optional	Sets the display error when the image file size exceeded the maximum size
customTotalFileSizeError	String	Optional	Sets the display error when the allowed maximum size of all image has been reached

References

Repository Link: https://bitbucket.org/empowerteams/empower-wysiwyg

NPM Package: npm: empower-wysiwyg

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git