js-wysiwyg-editor v1.0.1

wysiwyg-editor

About Package

• This is the what you see is what you get editor for ReactJS Development
• This is the Basic of this Editor
• The Features will added in Future Releases

How to use this Package

• install package via

    npm i js-wysiwyg-editor

• go to location you want to use this Editor
• in ReactJS
• • import Package

import {Editor} from 'js-wysiwyg-editor'

• • Now set the place that you want to use this packge

import React, { useState } from 'react'
import { Editor } from 'js-wysiwyg-editor'
const TestingPack = () => {

  const [text, setText] = useState('');

  return (
    <div className='my-8 mx-12'>
        <div className="">
            <Editor dataValue={text} OutputTest={setText}/>
        </div>
        <div className="w-full p-2 bg-white border border-gray-300 rounded-md shadow-sm">
            <div dangerouslySetInnerHTML={{ __html: text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
        </div>
    </div>
  )
}

export default TestingPack

• if you are using this with forms
• follow the following exmple

import React, { useEffect, useState } from 'react'
import { Editor } from 'js-wysiwyg-editor'
import axios from 'axios'

const TestingPack = () => {
  // send backend
  const [EditorData, SetEditorData] = useState({
    title: '',
  })

  const [text, setText] = useState('');

  // headleSubmit

  const headleSubmit = async (e) => {
    e.preventDefault()

    try{
      const res = await axios.post('http://localhost:8081/AddEditorData', {EditorData, text})
      .then(res => {
        if(res.data.Status === "Success"){
          alert("Editor Data Added Successful")
          window.location.reload()
        }
        else{
          alert(res.data.Error)
        }
      })
    }
    catch (err) {
      console.log(err)   
    }
  }

  const [GetData, SetGetData] = useState([])

  useEffect(() => {
    axios.get('http://localhost:8081/DisplayData')
    .then(res => SetGetData(res.data.Result))
    .catch(err => console.log(err))
  }, [])

  

  return (
    <div className='my-8 mx-12'>
          <form onSubmit={headleSubmit}>
            <input type="text" name="" id="" className='h-12 bg-gray-200 rounded'
            onChange={e => SetEditorData({...EditorData, title:e.target.value})}/>
          

            <div className="">
              <Editor dataValue={text} OutputTest={setText}/>
            </div>


            <button type="submit" className="py-2 px-8 bg-blue-500 text-white rounded">Submit</button>
          </form>


        <div className="w-full p-2 bg-white border border-gray-300 rounded-md shadow-sm">
          <div dangerouslySetInnerHTML={{ __html: text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
        </div>
        
       <div className="my-8">
          <div className="bg-gray-200 rounded py-2 px4">
            {
              GetData.map((Data, index) => {
                return (
                  <div className="">
                    <h1 className="">{Data.editor_title}</h1>
                    <p className="">
                    <div dangerouslySetInnerHTML={{ __html: Data.editor_data.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') }} />
                    </p>
                  </div>
                )
              })
            }
          </div>
        </div>
    </div>
  )
}

export default TestingPack

Releases

v1.0.0 - 30 May 2024

• initial Release
• adding
• • Bold
• • italic
• • underLine

v1.0.1 - 31 May 2024

• 2nd Version
• Updating errors
• • fixing editor data sending to backend

Releases History

Developers and Designers

• JehanKandy
• Anupa Gamage