基本说明

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

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

如何使用

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

src/module-vendor/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渲染编辑器