Add (new post)

resources/js/vue/VueEditorJs.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :id="holder" />
+</template>
+
+<script>
+import EditorJS from "@editorjs/editorjs";
+import { defineComponent, onMounted, reactive } from "vue";
+
+export const PLUGINS = {
+  header: import("@editorjs/header"),
+  list: import("@editorjs/list"),
+};
+
+export default defineComponent({
+  name: "vue-editor-js",
+  props: {
+    holder: {
+      type: String,
+      default: () => "vue-editor-js",
+      require: true,
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
+      require: true,
+    },
+    initialized: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup: (props, context) => {
+    const state = reactive({ editor: null });
+
+    function initEditor(props) {
+      destroyEditor();
+      state.editor = new EditorJS({
+        holder: props.holder || "vue-editor-js",
+        ...props.config,
+        onChange: (api, event) => {
+          saveEditor();
+        },
+      });
+      props.initialized(state.editor);
+    }
+
+    function destroyEditor() {
+      if (state.editor) {
+        state.editor.destroy();
+        state.editor = null;
+      }
+    }
+
+    function saveEditor() {
+      console.log("saveEditor");
+      if (state.editor) {
+        state.editor.save().then((data) => {
+          // Do what you want with the data here
+          console.log(data);
+          context.emit("saved", data);
+        });
+      }
+    }
+
+    onMounted((_) => initEditor(props));
+
+    return { props, state };
+  },
+  methods: {
+    useTools(props, config) {
+      const pluginKeys = Object.keys(PLUGINS);
+      const tools = { ...props.customTools };
+
+      if (pluginKeys.every((p) => !props[p])) {
+        pluginKeys.forEach((key) => (tools[key] = { class: PLUGINS[key] }));
+        Object.keys(config).forEach((key) => {
+          if (tools[key] !== undefined && tools[key] !== null) {
+            tools[key]["config"] = config[key];
+          }
+        });
+        return tools;
+      }
+
+      pluginKeys.forEach((key) => {
+        const prop = props[key];
+        if (!prop) {
+          return;
+        }
+
+        tools[key] = { class: PLUGINS[key] };
+
+        if (typeof prop === "object") {
+          const options = Object.assign({}, props[key]);
+          delete options["class"];
+          tools[key] = Object.assign(tools[key], options);
+        }
+      });
+
+      Object.keys(config).forEach((key) => {
+        if (tools[key] !== undefined && tools[key] !== null) {
+          tools[key]["config"] = config[key];
+        }
+      });
+
+      return tools;
+    },
+  },
+});
+</script>