52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<div class="tp-view selectable">
|
|
<div v-if="renderContent && editor" ref="contentRef" class="content-wrap" :data-max-height="maxHeight">
|
|
<editor-content class="content" :editor="editor" />
|
|
</div>
|
|
<div v-else class="empty">
|
|
<span v-text="emptyText" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { normalizeContent, useTiptapView } from "timi-web/editor";
|
|
|
|
defineOptions({
|
|
name: "TiptapView"
|
|
});
|
|
|
|
const props = withDefaults(defineProps<{
|
|
content?: string;
|
|
emptyText?: string;
|
|
maxHeight?: string;
|
|
}>(), {
|
|
content: "",
|
|
emptyText: "暂无内容",
|
|
maxHeight: "400px"
|
|
});
|
|
|
|
const renderContent = computed(() => normalizeContent(props.content));
|
|
const { EditorContent, contentRef, editor } = useTiptapView(renderContent, toRef(props, "maxHeight"));
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tp-view {
|
|
width: 100%;
|
|
.empty {
|
|
padding: 1rem;
|
|
border-radius: .375rem;
|
|
color: var(--td-text-color-placeholder);
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-component-border);
|
|
}
|
|
|
|
.content {
|
|
border: 1px solid var(--td-component-border);
|
|
padding: 1rem;
|
|
min-height: 12rem;
|
|
background: var(--td-bg-color-container);
|
|
}
|
|
}
|
|
</style>
|