https://github.com/pouchcms/sveditorjs

editorjs svelte wrapper
https://github.com/pouchcms/sveditorjs

Last synced: 26 days ago
JSON representation

editorjs svelte wrapper

• Host: GitHub
• URL: https://github.com/pouchcms/sveditorjs
• Owner: pouchcms
• Created: 2023-10-30T14:05:19.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-11-02T17:12:53.000Z (about 1 month ago)
• Last Synced: 2024-11-02T17:25:56.472Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://sveditorjs.vercel.app
• Size: 2.72 MB
• Stars: 35
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-editorjs - sveditorjs

README

        

## sveditorjs v2

sveditorjs can be embed into any svelte or sveltekit project,the editor is wraped around editorjs ,for block editing that outputs clean json document.json can be consumed by any app.

on version we added support for sveltekit

and added a utility helper 

that generates html

## docs and example

see the docs and example here [sveditorjs](https://sveditorjs.vercel.app):

```bash

npm install --save sveditorjs

```

```js

  import Editor ,{genHtml} from "$lib/index.js"; 

  

  let modes = {

          'js': 'JavaScript',

          'py': 'Python',

          'go': 'Go',

          'cpp': 'C++',

          'cs': 'C#',

          'md': 'Markdown',

        }

    let data = {}; //correct editorjs json data

    let urls = {} //this object should be 

    //{

      upload:"",

      load:"",

    }

 async function handleChange(ev){

    console.log(ev.detail) 

    let editor = ev.detail.editor;

    editor.save().then(async (savedData)=>{

      // do something with data

      console.log(window.current_sveditor); 

    // use helper to gen html

    let html = await genHtml(savedData);  

    console.log(html);

    }).catch((err)=>{console.log(err)})

  }

{console.log("ready",ev.detail)}} on:editor_change ={(ev)=>{handleChange(ev)}} >

  

    top

  

  

   aside

  

   extra unstyled

  

 

```