Block JSON Editor

Block JSON Editor is a frontend component that utilizes JSON structure blocks to store document content. Unlike traditional document content stored as HTML strings, this approach allows for better content structuring, improved extensibility, and easier content parsing.

Features

• Store document content using JSON structure blocks
• Each content block has a specific tag for better understanding and parsing
• Easily concatenate content blocks and move them around
• Customize the display of each content block by parsing its associated attributes
• Provides a wide range of basic web components to enhance HTML capabilities
• Allows for the integration of custom plugins to tailor the editor to your project's needs

Installation

You can install the Block JSON Editor component via pnpm:

pnpm add block-json-editor

Quick Start

You can use it in vue project, there is a demo:

<template>
  <block-json-editor ref="editorRef" v-model="content" :config="editorConfig" />
</template>

<script setup>
  import { ref } from 'vue'
  import BlockJsonEditor from 'block-json-editor'
  import 'block-json-editor/style.css'

  const editorRef = ref()
  const content = ref()

  const editorConfig = {
    tools: {
      media: {
        config: {
          uploader: {
            async uploadByFile(file: any) {
              const fileData = new FormData()
              fileData.append('file', file)
              const { url } = await uploadApi.upload(fileData)
              return {
                success: true,
                file: {
                  url
                }
              }
            },
            async uploadByUrl(url: string) {
              return {
                success: true,
                file: {
                  url
                }
              }
            }
          }
        }
      },
      attaches: {
        config: {
          uploader: {
            /**
             * Upload file to the server and return an uploaded image data
             * @param {File} file - file selected from the device or pasted by drag-n-drop
             * @return {Promise.<{success, file: {url}}>}
             */
            async uploadByFile(file: any) {
              const fileData = new FormData()
              fileData.append('file', file)
              const res = await uploadApi.upload(fileData)
              return {
                success: true,
                file: res
              }
            }
          }
        }
      }
    }
  }
</script>

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the License file for more information.