Merge pull request #250 from nagisa77/codex/integrate-vditor-component-into-editors

Refactor Vditor initialization

open-isle-cli/src/components/CommentEditor.vue

@@ -19,13 +19,14 @@
 
 <script>
 import { ref, onMounted, computed, watch } from 'vue'
-import Vditor from 'vditor'
 import { themeState } from '../utils/theme'
-import 'vditor/dist/index.css'
+import {
+  createVditor,
+  getEditorTheme as getEditorThemeUtil,
+  getPreviewTheme as getPreviewThemeUtil
+} from '../utils/vditor'
 import LoginOverlay from './LoginOverlay.vue'
 import { isMobile } from '../utils/screen'
-import { API_BASE_URL } from '../main'
-import { getToken } from '../utils/auth'
 
 export default {
   name: 'CommentEditor',
@@ -52,10 +53,8 @@ export default {
   setup(props, { emit }) {
     const vditorInstance = ref(null)
     const text = ref('')
-    const getEditorTheme = () =>
-      document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
-    const getPreviewTheme = () =>
-      document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'
+    const getEditorTheme = getEditorThemeUtil
+    const getPreviewTheme = getPreviewThemeUtil
     const applyTheme = () => {
       if (vditorInstance.value) {
         vditorInstance.value.setTheme(getEditorTheme(), getPreviewTheme())
@@ -73,61 +72,13 @@ export default {
     }
 
     onMounted(() => {
-      vditorInstance.value = new Vditor(props.editorId, {
+      vditorInstance.value = createVditor(props.editorId, {
         placeholder: '说点什么...',
         height: isMobile.value ? 'auto' : 200,
-        theme: getEditorTheme(),
         preview: {
           actions: [],
-          markdown: { toc: false },
-          theme: { current: getPreviewTheme() }
+          markdown: { toc: false }
         },
-        cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',
-        toolbar: [
-          'emoji',
-          'bold',
-          'italic',
-          'strike',
-          '|',
-          'list',
-          'line',
-          'quote',
-          'code',
-          'inline-code',
-          '|',
-          'undo',
-          'redo',
-          '|',
-          'link',
-          'upload'
-        ],
-        upload: {
-          fieldName: 'file',
-          url: `${API_BASE_URL}/api/upload`,
-          accept: 'image/*,video/*',
-          multiple: false,
-          headers: { Authorization: `Bearer ${getToken()}` },
-          format(files, responseText) {
-            const res = JSON.parse(responseText)
-            if (res.code === 0) {
-              return JSON.stringify({
-                code: 0,
-                msg: '',
-                data: {
-                  errFiles: [],
-                  succMap: { [files[0].name]: res.data.url }
-                }
-              })
-            } else {
-              return JSON.stringify({
-                code: 1,
-                msg: '上传失败',
-                data: { errFiles: files.map(f => f.name), succMap: {} }
-              })
-            }
-          }
-        },
-        toolbarConfig: { pin: true },
         input(value) {
           text.value = value
         },

open-isle-cli/src/components/PostEditor.vue

@@ -10,10 +10,11 @@
 <script>
 import { ref, onMounted, watch } from 'vue'
 import { themeState } from '../utils/theme'
-import Vditor from 'vditor'
-import 'vditor/dist/index.css'
-import { API_BASE_URL } from '../main'
-import { getToken } from '../utils/auth'
+import {
+  createVditor,
+  getEditorTheme as getEditorThemeUtil,
+  getPreviewTheme as getPreviewThemeUtil
+} from '../utils/vditor'
 import { hatch } from 'ldrs'
 hatch.register()
 
@@ -41,10 +42,8 @@ export default {
   },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
-    const getEditorTheme = () =>
-      document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
-    const getPreviewTheme = () =>
-      document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'
+    const getEditorTheme = getEditorThemeUtil
+    const getPreviewTheme = getPreviewThemeUtil
     const applyTheme = () => {
       if (vditorInstance.value) {
         vditorInstance.value.setTheme(getEditorTheme(), getPreviewTheme())
@@ -91,59 +90,8 @@ export default {
     )
 
     onMounted(() => {
-      vditorInstance.value = new Vditor(props.editorId, {
+      vditorInstance.value = createVditor(props.editorId, {
         placeholder: '请输入正文...',
-        theme: getEditorTheme(),
-        preview: {
-          theme: { current: getPreviewTheme() },
-        },
-        cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',        
-        toolbar: [
-          'emoji',
-          'bold',
-          'italic',
-          'strike',
-          '|',
-          'list',
-          'line',
-          'quote',
-          'code',
-          'inline-code',
-          '|',
-          'undo',
-          'redo',
-          '|',
-          'link',
-          'upload'
-        ],
-        upload: {
-          fieldName: 'file',
-          url: `${API_BASE_URL}/api/upload`,
-          accept: 'image/*,video/*',
-          multiple: false,
-          headers: { Authorization: `Bearer ${getToken()}` },
-          format(files, responseText) {
-            const res = JSON.parse(responseText)
-            if (res.code === 0) {
-              return JSON.stringify({
-                code: 0,
-                msg: '',
-                data: {
-                  errFiles: [],
-                  succMap: { [files[0].name]: res.data.url }
-                }
-              })
-            } else {
-              return JSON.stringify({
-                code: 1,
-                msg: '上传失败',
-                data: { errFiles: files.map(f => f.name), succMap: {} }
-              })
-            }
-          }
-        },
-        toolbarConfig: { pin: true },
-        cache: { enable: false },
         input(value) {
           emit('update:modelValue', value)
         },

open-isle-cli/src/utils/vditor.js

@@ -0,0 +1,78 @@
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+import { API_BASE_URL } from '../main'
+import { getToken } from './auth'
+
+export function getEditorTheme() {
+  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
+}
+
+export function getPreviewTheme() {
+  return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'
+}
+
+export function createVditor(editorId, options = {}) {
+  const {
+    placeholder = '',
+    height,
+    preview = {},
+    input,
+    after
+  } = options
+
+  return new Vditor(editorId, {
+    placeholder,
+    height,
+    theme: getEditorTheme(),
+    preview: Object.assign({ theme: { current: getPreviewTheme() } }, preview),
+    cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',
+    toolbar: [
+      'emoji',
+      'bold',
+      'italic',
+      'strike',
+      '|',
+      'list',
+      'line',
+      'quote',
+      'code',
+      'inline-code',
+      '|',
+      'undo',
+      'redo',
+      '|',
+      'link',
+      'upload'
+    ],
+    upload: {
+      fieldName: 'file',
+      url: `${API_BASE_URL}/api/upload`,
+      accept: 'image/*,video/*',
+      multiple: false,
+      headers: { Authorization: `Bearer ${getToken()}` },
+      format(files, responseText) {
+        const res = JSON.parse(responseText)
+        if (res.code === 0) {
+          return JSON.stringify({
+            code: 0,
+            msg: '',
+            data: {
+              errFiles: [],
+              succMap: { [files[0].name]: res.data.url }
+            }
+          })
+        } else {
+          return JSON.stringify({
+            code: 1,
+            msg: '上传失败',
+            data: { errFiles: files.map(f => f.name), succMap: {} }
+          })
+        }
+      }
+    },
+    toolbarConfig: { pin: true },
+    cache: { enable: false },
+    input,
+    after
+  })
+}