feat：初始化 -融骅

2023-10-17 09:15:30 +08:00
parent c9ff84e6a2
commit 405e152b38
1190 changed files with 138344 additions and 455 deletions
--- a/editor/src/views/manual/view.vue
+++ b/editor/src/views/manual/view.vue
@@ -0,0 +1,116 @@
+<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>