Editorjs-audio-tool NPM

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.

Name	Type	Description
endpointUrl	String	Url endpoint to upload file to
dowloadable	Boolean	Set if audio display will have download button
requestParser	Func(FetchRequestObject):FetchRequestObject	function to modify upload request before send
respondParser	Func(FetchRespondObject):FetchRespondObject	function to modify upload respond before display in block
onDelete	Func(EditorJSBlockObject)	this function is called after deleted

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

Name	Type	Description
url	string	URL of the audio file
type	string	this is mime type of the audio file such as "audio/mpeg3"

codex editor tool video editor.js editorjs

@infinitebrahmanuniverse/nolb-edi @everything-registry/sub-chunk-1554

1.0.1

2 years ago

1.0.0

2 years ago