ckeditor

src/components/NoteEditor.vue

@@ -0,0 +1,49 @@
+<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 LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
+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,
+    LinkPlugin,
+    ParagraphPlugin,
+  ],
+
+  toolbar: {
+    items: ['bold', 'italic', 'link', 'undo', 'redo'],
+  },
+}
+</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>