将editor.md组织成vue的模块后，多个editormd共存时出现的初始化失败问题

Question

在参考这个回答 将editormd组织成vue组件 后，出于将markdown转为html以及多个editormd共存的需求，对editormd组件进行了扩展，代码如下：

<template>
  <div :id="id" class="main-editor">
    <textarea v-model="content"></textarea>
  </div>
</template>

<script>
if (typeof window !== 'undefined') {
  var $s = require('scriptjs');
}


export default {
  name: 'Editor',
  props: {
    width: '',
    content:{
      type: String,
      default: ''
    },
    type: {
      type:String,
      default: 'editor'
    },
    id: {
      type: String,
      default: 'editor-md'
    },
    editorPath: {
      type: String,
      default: '../../public/',
    },
    editorConfig: {
      type: Object,
      default() {
        return {
          width: this.width,
          height: 530,
          path: '../../public/lib/', 
          codeFold: true,
          saveHTMLToTextarea: true,
          searchReplace: true,
          htmlDecode: 'style,script,iframe|on*',
          emoji: true,
          onload: () => {
            console.log('onload');
          },
        };
      },
    },
  },
  data() {
    return {
      instance: null,
    };
  },
  computed: {
  },
  mounted() {
    console.log('mounted')
    //加载依赖
    $s([
      `${this.editorPath}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`, () => {
        console.log('init Editor')
        this.initEditor();
      });
    });

  },
  beforeDestroy() {
  },
  methods: {
    initEditor() {
      this.$nextTick((editorMD = window.editormd) => {
        if (editorMD) {
          if (this.type == 'editor'){
            console.log('editor')
            this.instance = editorMD(this.id, this.editorConfig);
          } else {
            console.log('html')
            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig)
          }
        } 
      });
    }
  },
};
</script>

通过router-link跳转时有概率能够多个editor加载成功

在当前页面刷新时，第二个editor会在scriptjs加载处“卡住”

造成这种情况的可能原因是什么呢，如果有可能的猜想也欢迎讨论，提前感谢！

Answer 1

不太清楚你第二个editor为什么会卡在scriptjs加载的地方，但我发现你的代码有一点小小的问题，说不定能通过这个点解决你现在卡住的问题。

我发现你在mounted里通过scriptjs加载多个脚本，那么问题来了，当页面上有多个editormd实例的时候，mounted也会执行多次，导致scriptjs也会重复多次加载这些脚本。

其实你这里需要的是一个全局的加载，无论多个实例中的哪一个先调用了mounted方法，都在全局告知“正在加载中”，然后其他实例发现全局上有这样一个状态，不再重复加载脚本，而是等待通知。直到第一个加载脚本的editormd实例完成加载后，再通知全局加载完毕，然后所有组件实例执行回调，继续向下走

Answer 2

v-model一个props,难道你的vuejs不会报错吗?

Answer 3

博主，我想问下您，您的editorpath的路径public文件夹下是放了editor.md的资源文件夹吗？我现在引入editor.md总是报404