vue-element-admin Markdown 输出样式排版问题修复方案

秒速五厘米 2022-12-03 15:45 99阅读 0赞

### vue-element-admin Markdown 输出样式排版问题修复方案 ###

*   *  1.1 事故现场
     *  1.2 问题解释
     *  1.3 修复解决方案
     *   *  1.3.1 修改package.json
         *  1.3.2 修改 src/components/MarkdownEditor/index.vue
     *  1.4 修复效果

## 1.1 事故现场 ##

最近在使用 [vue-element-admin][] 重构了我们的后台管理系统，然后当在使用Markdown 编辑器的时候发现了Markdown 输出样式有问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center]

> vue-element-admin 是一款基于Vue2.0 和element-ui 的优秀的后台管理模版框架，使用了最新的前端技术栈。

为了修复这个问题，我在Github 提了一个issue, 然后很快收到了一个热心人的回复。

[https://github.com/PanJiaChen/vue-element-admin/issues/3308\#event-3727463524][https_github.com_PanJiaChen_vue-element-admin_issues_3308_event-3727463524]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center 1]

## 1.2 问题解释 ##

大致意思是vue-element-admin master 分支使用的markdown 编辑器是基于tui.editor 这个库。

>  *  Markdown is based on [tui.editor][] ，simply wrapped with Vue. [Documentation][]
>  *  Originally used simplemde-markdown-editor as the markdown editor, but this library has not been updated and maintained for a long time, and there is also the risk of xss. So after the v3.9.3+ version, use tui.editor as the new editor. All the next documents are Based on tui.editor it. More Content.

翻译下就是：

> 最初使用simplemde-markdown-editor作为markdown编辑器，但是该库很长时间没有更新和维护，并且还存在xss的风险。 因此，在v3.9.3 +版本之后，请使用 [tui.editor][] 作为新编辑器。 接下来的所有文档都基于tui.editor它。

但是tui.editor在后来的版本更新中改名成了@toast-ui/editor

最新版本从2.0 版本开始修复了我们文章开头提到的那个bug.

## 1.3 修复解决方案 ##

这个[PR][]中已经修复了这个问题，但是主分支没有合并。

### 1.3.1 修改package.json ###

把package.json 文件中的依赖

"dependencies": { 
    "tui-editor": "1.3.3",
    }

替换成

"dependencies": { 
      "@toast-ui/editor": "^2.2.0",
    }

### 1.3.2 修改 src/components/MarkdownEditor/index.vue ###

把src/components/MarkdownEditor/index.vue 中的内容全选替换成我这个即可：

<template>
      <div :id="id" />
    </template>
    
    <script>
    // deps for editor
    // import 'codemirror/lib/codemirror.css' // codemirror
    // import 'tui-editor/dist/tui-editor.css' // editor ui
    // import 'tui-editor/dist/tui-editor-contents.css' // editor content
    
    import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
    import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
    // import Editor from 'tui-editor'
    import Editor from '@toast-ui/editor'
    import defaultOptions from './default-options'
    
    export default { 
      name: 'MarkdownEditor',
      props: { 
        value: { 
          type: String,
          default: ''
        },
        id: { 
          type: String,
          required: false,
          default() { 
            return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
          }
        },
        options: { 
          type: Object,
          default() { 
            return defaultOptions
          }
        },
        mode: { 
          type: String,
          default: 'markdown'
        },
        height: { 
          type: String,
          required: false,
          default: '300px'
        },
        language: { 
          type: String,
          required: false,
          default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
        }
      },
      data() { 
        return { 
          editor: null
        }
      },
      computed: { 
        editorOptions() { 
          const options = Object.assign({ }, defaultOptions, this.options)
          options.initialEditType = this.mode
          options.height = this.height
          options.language = this.language
          return options
        }
      },
      watch: { 
        value(newValue, preValue) { 
          if (newValue !== preValue && newValue !== this.editor.getMarkdown()) { 
            this.editor.setMarkdown(newValue)
          }
        },
        language(val) { 
          this.destroyEditor()
          this.initEditor()
        },
        height(newValue) { 
          this.editor.height(newValue)
        },
        mode(newValue) { 
          this.editor.changeMode(newValue)
        }
      },
      mounted() { 
        this.initEditor()
      },
      destroyed() { 
        this.destroyEditor()
      },
      methods: { 
        initEditor() { 
          this.editor = new Editor({ 
            el: document.getElementById(this.id),
            ...this.editorOptions
          })
          if (this.value) { 
            this.editor.setMarkdown(this.value)
          }
          this.editor.on('change', () => { 
            this.$emit('input', this.editor.getMarkdown())
          })
        },
        destroyEditor() { 
          if (!this.editor) return
          this.editor.off('change')
          this.editor.remove()
        },
        setValue(value) { 
          this.editor.setMarkdown(value)
        },
        getValue() { 
          return this.editor.getMarkdown()
        },
        setHtml(value) { 
          this.editor.setHtml(value)
        },
        getHtml() { 
          return this.editor.getHtml()
        }
      }
    }
    </script>

## 1.4 修复效果 ##

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center 2]  
本篇完～

你可能还遇到这样的问题，想要tinymce 富文本编辑器支持视频预览播放：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]  
参考另外一个博主的文章修复方法，亲测好用[tinymce编辑器上传本地视频预览][tinymce]

[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e8a388dfd9954a1eac027965ea42147f.png
[https_github.com_PanJiaChen_vue-element-admin_issues_3308_event-3727463524]: https://github.com/PanJiaChen/vue-element-admin/issues/3308#event-3727463524
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/9740f7cc77cf4bbbb1ed49d3448ff26f.png
[tui.editor]: https://github.com/nhn/tui.editor
[Documentation]: https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html
[PR]: https://github.com/PanJiaChen/vue-element-admin/commit/3057489cc66e17b97a77512c1e3621b96c37a4ba
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ef17f67259524f12922b41de08583ddb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70]: /images/20221123/49b2269e77fa43a98f967d5f3d204b58.png
[tinymce]: https://blog.csdn.net/weixin_42674576/article/details/105122719