53 lines
906 B
Vue
53 lines
906 B
Vue
<template>
|
|
<div id="editor"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import EditorJS from "@editorjs/editorjs";
|
|
import Header from "@editorjs/header";
|
|
import List from "@editorjs/list";
|
|
|
|
import { onMounted } from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
default: {},
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
onMounted(() => {
|
|
const editor = new EditorJS({
|
|
holder: "editor",
|
|
minHeight: 0,
|
|
tools: {
|
|
header: Header,
|
|
list: List,
|
|
},
|
|
onChange: (api, event) => {
|
|
api.saver.save().then(async (data) => {
|
|
emit("update:modelValue", data);
|
|
});
|
|
},
|
|
data: props.modelValue,
|
|
logLevel: "ERROR",
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.codex-editor path {
|
|
stroke: #69c350;
|
|
}
|
|
|
|
/*.ce-block {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.ce-paragraph, .ce-header {
|
|
outline: 1px solid #69c350 !important;
|
|
border-radius: 5px;
|
|
padding: .5em;
|
|
|
|
}*/
|
|
</style> |