maxlasting/ace-vue-editor

ace-vue-editor

The markdown editro for vue, like juejin.im.

Install

npm i -S ace-vue-editor

view

Live demo

demo

Usage

<template>
  <div class="editor">
    <!-- <ace-markdown-editor :value="defaultValue" title="Article title..." @submit="submitFn"></ace-markdown-editor> -->
    <!-- use lazy loading, the editor has 1.7mb size -->
    <!-- autosave will emit save event in per saveInterval seconds-->
    <component
      v-if="ready"
      :is="aceMarkdownEditor"
      :value="defaultValue"
      title=""
      @save="saveFn"
      @droped="dropedFn"
      ref="editor"
    >
      <!-- <div slot="logo">Logo</div> -->
      <div slot="title" style="height: 100%; display: flex; align-items: center;">自定义标题</div>
      <div class="editor_fns" slot="header">
        <a class="insert" @click="insertImageFn">插入图片</a>
        <div class="submit" @click="submitFn">提交</div>
        <div class="others">其它功能...</div>
      </div>
      <div slot="footer" style="margin-left: 16px;">底部插槽</div>
    </component>
    <div class="loading" v-else="ready">
      <div class="outer__line">
        <div class="inner"></div>
      </div>
      <span>资源加载中, 请耐心等待 ...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ready: false,
      aceMarkdownEditor: null,
      defaultValue: ""
    };
  },
  async mounted() {
    await this.initEditor();
  },
  methods: {
    async initEditor() {
      const aceMarkdownEditor = await import("ace-vue-editor");
      this.aceMarkdownEditor = aceMarkdownEditor.default;
      this.ready = true;
    },
    submitFn() {
      const data = this.$refs.editor.$submit();
      console.log(data);
    },
    saveFn(data) {
      console.log(data);
    },
    insertImageFn() {
      this.$refs.editor.$insertImage("https://");
    },
    dropedFn(images) {
      console.log(images);
      // this.$refs.editor.$insertImage('https://')
    }
  }
};
</script>

Others

If you have good suggestions, please leave a message on my GitHub.