52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import {
|
|
defineComponent,
|
|
onMounted,
|
|
} from 'vue';
|
|
|
|
import { startSchlechtenburg } from '@schlechtenburg/standalone';
|
|
import { SbMode } from '@schlechtenburg/core';
|
|
|
|
import SbLayout from '@schlechtenburg/layout';
|
|
import SbHeading from '@schlechtenburg/heading';
|
|
import SbParagraph from '@schlechtenburg/paragraph';
|
|
import SbImage from '@schlechtenburg/image';
|
|
|
|
import exampleData from './example-data';
|
|
|
|
import './ExampleEditor.scss';
|
|
|
|
export default defineComponent({
|
|
name: 'ExampleStandaloneEditor',
|
|
|
|
setup() {
|
|
const block = exampleData;
|
|
|
|
onMounted(async () => {
|
|
// getBlock could be used to access the block data inside the editor
|
|
const { getBlock } = await startSchlechtenburg(
|
|
'#example-editor',
|
|
{
|
|
// The input block data
|
|
block,
|
|
|
|
mode: SbMode.Edit,
|
|
// The list of available blocks in this editor instance
|
|
availableBlocks: [
|
|
SbLayout,
|
|
SbHeading,
|
|
SbParagraph,
|
|
SbImage,
|
|
],
|
|
|
|
// This callback will be alled any time the block data gets updated
|
|
onUpdate: (blockData) => {
|
|
console.log('got update', blockData);
|
|
}
|
|
},
|
|
)
|
|
});
|
|
|
|
return () => <div id="example-editor"></div>;
|
|
},
|
|
});
|