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