Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

🔹 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

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:

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://gitlab.com/empowerteams/empower-wysiwyg

NPM Package: npm: empower-wysiwyg

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

  • No labels