editorjs-audio-tool

editorjs-audio-tool

Audio Tool for Editor.js

Install

For React

npm i  editorjs-audio-tool

example

import { useEffect } from 'react'
import AudioTool from 'editorjs-audio-tool'
import EditorJS from '@editorjs/editorjs'
import 'editorjs-audio-tool/dist/style.css'
function App() {
  useEffect(() => {
    const editor = new EditorJS({
      holder: 'editorjs',
      tools: {
        audio: {
          class: AudioTool,
          config: {
            endpointUrl: 'http://localhost:8080/upload',
          },
        },
      },
    })
    return () => editor.destroy()
  }, [])

  return <div id='editorjs'></div>
}

export default App

For Vue3

npm i  editorjs-audio-tool

example

<template>
    <div id='editorjs'></div>
</template>    
<script setup>
import { mounted, unmounted,ref } from 'vue'
import AudioTool from 'editorjs-audio-tool'
import EditorJS from '@editorjs/editorjs'
import 'editorjs-audio-tool/dist/style.css'
let editor = null
mounted(()=>{
     editor = new EditorJS({
      holder: 'editorjs',
      tools: {
        audio: {
          class: AudioTool,
          config: {
            endpointUrl: 'http://localhost:8080/upload',
          },
        },
      },
    })
})

unmounted(()=>{
  editor.destroy()
})

For Static web

<body>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/editorjs-audio-tool@latest"></script>
    <div id="editorjs"></div>
    <script>
        const editor = new EditorJS({
            tools: {
                audio: {
                    class: AudioTool,
                    config: {
                        endpointUrl: "http://localhost:8080/upload",
                    }
                }
            },
            holder: "editorjs"
        });
    </script>
</body>

API

Module config.

• EditorJSBlockObject - editor js block object that consist of block id and others data

• FetchRequestObject - It is object that will be pass to fetch api function

• FetchRespondObject - It is object respond from uploading file with fetch api

Module data