基本说明

Markdown富文本编辑器组件eb-markdown-editor是全局组件，由模块a-markdown提供。出于性能考虑，模块a-markdown是异步加载的。所以，我们在使用中只要确保模块a-markdown加载完毕，那么就可以使用组件eb-markdown-editor了

关于前端组件的使用，请参见：模块前端：Component使用方式

如何使用

模块test-party提供了一个测试页面，专门用于演示如何使用组件eb-markdown-editor

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/markdownEditor.vue

  1. 1<template>
  2. 2  <eb-page>
  3. 3    <eb-navbar :title="page_title" eb-back-link="Back">
  4. 4      <f7-nav-right>
  5. 5        <eb-link ref="buttonSubmit" iconMaterial="save" :onPerform="onPerformSave"></eb-link>
  6. 6      </f7-nav-right>
  7. 7    </eb-navbar>
  8. 8    <template v-if="module">
  9. 9      <eb-box>
  10. 10        <eb-markdown-editor ref="editor" :value="content" @input="onInput" @save="onSave" />
  11. 11      </eb-box>
  12. 12    </template>
  13. 13  </eb-page>
  14. 14</template>
  15. 15<script>
  16. 16import Vue from 'vue';
  17. 17const ebPageDirty = Vue.prototype.$meta.module.get('a-components').options.mixins.ebPageDirty;
  18. 18export default {
  19. 19  mixins: [ebPageDirty],
  20. 20  meta: {
  21. 21    size: 'medium',
  22. 22  },
  23. 23  data() {
  24. 24    return {
  25. 25      module: null,
  26. 26      content: '',
  27. 27    };
  28. 28  },
  29. 29  computed: {
  30. 30    page_title() {
  31. 31      const title = this.$text('Markdown Editor');
  32. 32      return this.page_getDirtyTitle(title);
  33. 33    },
  34. 34  },
  35. 35  created() {
  36. 36    this.$meta.module.use('a-markdown', module => {
  37. 37      this.module = module;
  38. 38      this.content = `# Markdown Spec`;
  39. 39    });
  40. 40  },
  41. 41  methods: {
  42. 42    async onPerformSave() {
  43. 43      if (!this.$refs.editor) return;
  44. 44      await this.$refs.editor.checkContent();
  45. 45      this.$view.toast.show({ text: this.$text('Saved') });
  46. 46      this.page_setDirty(false);
  47. 47    },
  48. 48    onInput(data) {
  49. 49      if (this.content === data) return;
  50. 50      this.content = data;
  51. 51      this.page_setDirty(true);
  52. 52    },
  53. 53    onSave() {
  54. 54      this.$refs.buttonSubmit.onClick();
  55. 55    },
  56. 56  },
  57. 57};
  58. 58</script>

script

  • 行17/19：继承组件ebPageDirty，用于实现脏标记功能

  • 行21：设置当前页面所期望显示的尺寸：small/medium/large。如果不设置就默认为small

  • 行30-32：实现一个计算属性page_title，用于向标题添加脏标记

  • 行36：通过this.$meta.module.use异步加载模块a-markdown

  • 行42-47：保存内容

    • 执行this.$refs.editor.checkContent，对内容进行预处理。比如，如果检测到内容包含本地图片，就执行图片上传

    • 通过this.page_setDirty将脏标记设为false

  • 行51：响应输入事件，通过this.page_setDirty将脏标记设为true

  • 行54：响应编辑器中的onSave事件，该事件一般由快捷键Ctrl+S引发

template

  • 行8：判断模块a-markdown是否加载完毕

  • 行9：使用组件eb-box创建一个全尺寸的显示容器

  • 行10：使用组件eb-markdown-editor渲染编辑器