72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import CKEditor from '@/components/CKEditor'
|
|
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
|
|
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
|
|
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
|
|
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
|
|
import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline'
|
|
import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
|
|
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
|
|
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
|
|
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
|
|
import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
|
|
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
|
|
|
|
import { mdToHtml } from '@/utils/markdown'
|
|
import { getNoteById } from '@/composables/useNotes'
|
|
|
|
const props = defineProps<{
|
|
note: Note
|
|
}>()
|
|
|
|
const editor = BalloonEditor
|
|
const editorData = mdToHtml(props.note.content, 'c@', getNoteById)
|
|
const editorConfig = {
|
|
plugins: [
|
|
EssentialsPlugin,
|
|
BoldPlugin,
|
|
ItalicPlugin,
|
|
UnderlinePlugin,
|
|
StrikethroughPlugin,
|
|
LinkPlugin,
|
|
HeadingPlugin,
|
|
ParagraphPlugin,
|
|
ListPlugin,
|
|
AutoformatPlugin,
|
|
],
|
|
|
|
toolbar: {
|
|
items: [
|
|
'bold',
|
|
'italic',
|
|
'underline',
|
|
'strikethrough',
|
|
'link',
|
|
'undo',
|
|
'redo',
|
|
'heading',
|
|
'bulletedList',
|
|
'numberedList',
|
|
],
|
|
},
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<CKEditor
|
|
class="h-full"
|
|
:editor="editor"
|
|
v-model="editorData"
|
|
:config="editorConfig"
|
|
></CKEditor>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.ck-content {
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|