117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<template>
|
||
<div class="manual-view">
|
||
<am-loading :loading="loading">
|
||
<div class="editor-wrapper editor-wrapper-view">
|
||
<am-outline v-if="!isMobile && engine" :engine="engine" />
|
||
<div ref="container" class="editor-container" />
|
||
<am-outline v-if="!isMobile && engine" :engine="engine" />
|
||
</div>
|
||
</am-loading>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { $, View, isMobile } from '@aomao/engine';
|
||
import AmLoading from '@/components/editor/loading.vue';
|
||
import AmOutline from '@/components/editor/outline.vue';
|
||
import { cards, plugins, onLoad } from '@/components/editor/config';
|
||
import { getDocValue } from '@/utils';
|
||
|
||
const viewPlugins = plugins.filter(
|
||
(plugin) =>
|
||
plugin.pluginName.indexOf('uploader') < 0 &&
|
||
['mark-range'].indexOf(plugin.pluginName) < 0,
|
||
);
|
||
|
||
export default defineComponent({
|
||
name: 'manual-view',
|
||
components: {
|
||
AmLoading,
|
||
AmOutline,
|
||
},
|
||
setup() {
|
||
const container = ref<HTMLElement | null>(null);
|
||
const engine = ref<any>(null); // EngineInterface | null
|
||
const members = ref([]);
|
||
const loading = ref(true);
|
||
onMounted(() => {
|
||
if (container.value) {
|
||
const view = new View(container.value, {
|
||
plugins: viewPlugins,
|
||
cards,
|
||
config: {
|
||
table: {
|
||
overflow: {
|
||
maxLeftWidth: () => {
|
||
return 0;
|
||
},
|
||
maxRightWidth: () => {
|
||
if (isMobile) return 0;
|
||
const wrapper = $('.editor-wrapper-view');
|
||
const view = $('.am-engine-view');
|
||
const wRect = wrapper.get<HTMLElement>()?.getBoundingClientRect();
|
||
const vRect = view.get<HTMLElement>()?.getBoundingClientRect();
|
||
const width = (wRect?.width || 0) - (vRect?.width || 0);
|
||
return width <= 0 ? 100 : width;
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
// 设置显示成功消息UI，默认使用 console.log
|
||
view.messageSuccess = (msg: string) => {
|
||
message.success(msg);
|
||
};
|
||
// 设置显示错误消息UI，默认使用 console.error
|
||
view.messageError = (error: string) => {
|
||
message.error(error);
|
||
};
|
||
// 默认编辑器值，为了演示，这里初始化值写死，正式环境可以请求api加载
|
||
const value = getDocValue() || '<strong>Hello</strong>,This is demo';
|
||
// 非协同编辑，设置编辑器值，异步渲染后回调
|
||
view.render(value);
|
||
loading.value = false;
|
||
|
||
engine.value = view;
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (engine.value) engine.value.destroy();
|
||
});
|
||
|
||
return {
|
||
loading,
|
||
isMobile,
|
||
container,
|
||
engine,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.manual-view {
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
overflow: auto;
|
||
.editor-wrapper {
|
||
width: 100%;
|
||
min-width: 1460px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
.editor-container {
|
||
flex: 1;
|
||
border: 1px solid #f0f0f0;
|
||
background: #fff;
|
||
min-width: 800px;
|
||
min-height: calc(100vh - 40px);
|
||
margin: 0 10px;
|
||
position: relative;
|
||
padding: 40px 60px 60px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|