1.0.1 • Published 3 years ago

editorjs-audio-editor v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

Audio Editor

This is a editor-js plugin that focus on audio displaying.

Install

For React

npm i --save-dev editorjs-audio-editor

example

import { useEffect } from 'react'
import AudioEditor from 'editorjs-audio'
import EditorJS from '@editorjs/editorjs'

function App() {
  useEffect(() => {
    const editor = new EditorJS({
      holder: 'editorjs',
      tools: {
        audio: {
          class: AudioEditor,
          config: {
            endpointUrl: 'http://localhost:8080/upload',
          },
        },
      },
    })
    return () => editor.destroy()
  }, [])

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

export default App

For Static web

git clone https://github.com/Tauhoo/editorjs-audio.git
cd editorjs-audio
npm run build

You will get the library file in dist/index.js

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

API

Module config.
NameTypeDescription
endpointUrlStringUrl endpoint to upload file to
dowloadableBooleanSet if audio display will have download button
requestParserFunc(FetchRequestObject):FetchRequestObjectfunction to modify upload request before send
respondParserFunc(FetchRespondObject):FetchRespondObjectfunction to modify upload respond before display in block
onDeleteFunc(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
NameTypeDescription
urlstringURL of the audio file
typestringthis is mime type of the audio file such as "audio/mpeg3"