封面

之前一直用的是editor.md 现在使用了前后台分离 所以学习了vue 然后组件写了一个vue-editor.md编辑器,不合理之处望提出,谢谢!有一个小bug图片上传有点问题 涉及到跨越,目前没有解决,希望哪位大神能改进一下

代码

<template>
  <div :id="id" />
</template>
<script>
import $ from 'jquery'
if (typeof window !== 'undefined') {
  var $s = require('scriptjs')
}

export default {
  name: 'EditorMD',
  model: {
    prop: 'content',
    event: 'content'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'editor'
    },
    id: {
      type: String,
      default: function() {
        return 'editor-md-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    editorPath: {
      type: String,
      default: 'http://localhost:9999/editor.md'
    },
    editorConfig: {
      type: Object,
      default() {
        return {
          width: this.width,
          height: 530,
          path: 'http://localhost:9999/editor.md/lib/',
          saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
          searchReplace: true,
          htmlDecode: 'style,script,iframe|on*', // 开启 HTML 标签解析,为了安全性,默认不开启
          emoji: true,
          taskList: true,
          watch: true,
          toolbarAutoFixed: false,
          tocm: true, // Using [TOCM]
          tex: true, // 开启科学公式TeX语言支持,默认关闭
          flowChart: true, // 开启流程图支持,默认关闭
          sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
          dialogMaskBgColor: '#fff', // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
          imageUpload: false,
          imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
          imageUploadURL: `${process.env.VUE_APP_BASE_API}/admin/article/update1`,
          crossDomainUpload: true, // 开启跨越
          uploadCallbackURL: '',
          onload: () => {
          },
          onchange: () => {
            if (this.instance) {
              this.$emit('content', this.instance.getMarkdown())
            } else {
              this.$emit('content', '')
            }
          }
        }
      }
    }
  },
  data() {
    return {
      instance: null
    }
  },
  watch: {
    content(val) {
      this.$nextTick(() =>
        this.$emit('content', val),
      $('.editormd-markdown-textarea').val(this.content)
      )
    }
  },
  mounted() {
    // 加载依赖
    $s([
      `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js`,
      `${this.editorPath}/lib/marked.min.js`,
      `${this.editorPath}/lib/prettify.min.js`,
      `${this.editorPath}/lib/raphael.min.js`,
      `${this.editorPath}/lib/underscore.min.js`
    ], () => {
      console.log('finish load js')
      $s(`${this.editorPath}/editormd.min.js`, () => {
        this.initEditor()
      })
    })
  },
  beforeDestroy() {
    if (this.instance) {
      this.instance.recreate()
    }
  },
  methods: {
    initEditor() {
      this.$nextTick((editorMD = window.editormd) => {
        if (editorMD) {
          if (this.type === 'editor') {
            this.instance = editorMD(this.id, this.editorConfig)
            this.instance.emoji = {
              path: `${this.editorPath}/plugins/emoji-dialog/emoji/`,
              ext: '.png'
            }
            if (this.content !== '') {
              $('.editormd-markdown-textarea').val(this.content)
            }
          } else {
            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig)
            if (this.content !== '') {
              $('.editormd-markdown-textarea').val(this.content)
            }
          }
        }
      })
    }
  }
}
</script>

dynamicLoadScript.js

let callbacks = []

function loadedTinymce() {
  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
  // check is successfully downloaded script
  return window.tinymce
}

const dynamicLoadScript = (src, callback) => {
  const existingScript = document.getElementById(src)
  const cb = callback || function() {}

  if (!existingScript) {
    const script = document.createElement('script')
    script.src = src // src url for the third-party library being loaded.
    script.id = src
    document.body.appendChild(script)
    callbacks.push(cb)
    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
    onEnd(script)
  }

  if (existingScript && cb) {
    if (loadedTinymce()) {
      cb(null, existingScript)
    } else {
      callbacks.push(cb)
    }
  }

  function stdOnEnd(script) {
    script.onload = function() {
      // this.onload = null here is necessary
      // because even IE9 works not like others
      this.onerror = this.onload = null
      for (const cb of callbacks) {
        cb(null, script)
      }
      callbacks = null
    }
    script.onerror = function() {
      this.onerror = this.onload = null
      cb(new Error('Failed to load ' + src), script)
    }
  }

  function ieOnEnd(script) {
    script.onreadystatechange = function() {
      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
      this.onreadystatechange = null
      for (const cb of callbacks) {
        cb(null, script) // there is no way to catch loading errors in IE8
      }
      callbacks = null
    }
  }
}

export default dynamicLoadScript

书不仅是生活,而且是现在、过去和未来文化生活的源泉。——库法耶夫