diff --git a/frontend/src/assets/global.css b/frontend/src/assets/global.css
index 77be29063..1997730f4 100644
--- a/frontend/src/assets/global.css
+++ b/frontend/src/assets/global.css
@@ -71,6 +71,16 @@ body {
   top: var(--header-height) !important;
 }
 
+.vditor-panel {
+  min-width: 400px;
+}
+
+.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;
diff --git a/frontend/src/utils/markdown.js b/frontend/src/utils/markdown.js
index 579a6749c..dbcd352b7 100644
--- a/frontend/src/utils/markdown.js
+++ b/frontend/src/utils/markdown.js
@@ -2,7 +2,7 @@ import MarkdownIt from 'markdown-it'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github.css'
 import { toast } from '../main'
-import { tiebaEmoji, TIEBA_EMOJI_CDN } from './tiebaEmoji'
+import { tiebaEmoji } from './tiebaEmoji'
 
 function mentionPlugin(md) {
   const mentionReg = /^@\[([^\]]+)\]/
@@ -32,7 +32,7 @@ function tiebaEmojiPlugin(md) {
   md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
     const name = tokens[idx].content
     const file = tiebaEmoji[name]
-    return `<img class="emoji" src="${TIEBA_EMOJI_CDN}${file}" alt="${name}">`
+    return `<img class="emoji" src="${file}" alt="${name}">`
   }
   md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
     const pos = state.pos
diff --git a/frontend/src/utils/tiebaEmoji.js b/frontend/src/utils/tiebaEmoji.js
index da413d0e9..ce91ea0ff 100644
--- a/frontend/src/utils/tiebaEmoji.js
+++ b/frontend/src/utils/tiebaEmoji.js
@@ -1,10 +1,11 @@
 export const TIEBA_EMOJI_CDN = 'https://cdn.jsdelivr.net/gh/microlong666/tieba_mobile_emotions@master/'
+// export const TIEBA_EMOJI_CDN = 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor/dist/images/emoji/'
 
 export const tiebaEmoji = (() => {
-  const map = { tieba1: 'image_emoticon.png' }
+  const map = { tieba1: TIEBA_EMOJI_CDN + 'image_emoticon.png' }
   for (let i = 2; i <= 124; i++) {
     if (i > 50 && i < 62) continue
-    map[`tieba${i}`] = `image_emoticon${i}.png`
+    map[`tieba${i}`] = TIEBA_EMOJI_CDN + `image_emoticon${i}.png`
   }
   return map
 })()
diff --git a/frontend/src/utils/vditor.js b/frontend/src/utils/vditor.js
index a7fabe346..f0a83214a 100644
--- a/frontend/src/utils/vditor.js
+++ b/frontend/src/utils/vditor.js
@@ -3,7 +3,7 @@ import 'vditor/dist/index.css'
 import { API_BASE_URL } from '../main'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
-import { tiebaEmoji, TIEBA_EMOJI_CDN } from './tiebaEmoji'
+import { tiebaEmoji } from './tiebaEmoji'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -45,12 +45,9 @@ export function createVditor(editorId, options = {}) {
     theme: getEditorTheme(),
     preview: Object.assign({
       theme: { current: getPreviewTheme() },
-      customEmoji: tiebaEmoji,
-      emojiPath: TIEBA_EMOJI_CDN
     }, preview),
     hint: {
       emoji: tiebaEmoji,
-      emojiPath: TIEBA_EMOJI_CDN,
       extend: [
         {
           key: '@',