南宁网宿科技
76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<a-modal
|
|
width="80%"
|
|
:visible="visible"
|
|
:confirm-loading="loading"
|
|
:title="'富文本转MarkDown'"
|
|
:body-style="{ paddingBottom: '8px' }"
|
|
@update:visible="updateVisible"
|
|
:footer="null"
|
|
>
|
|
<!-- 编辑器 -->
|
|
<byte-md-editor
|
|
v-model:value="content"
|
|
:locale="zh_Hans"
|
|
:plugins="plugins"
|
|
height="600px"
|
|
:editorConfig="{ lineNumbers: true }"
|
|
/>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
|
// 中文语言文件
|
|
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
|
// 链接、删除线、复选框、表格等的插件
|
|
import gfm from '@bytemd/plugin-gfm';
|
|
// 插件的中文语言文件
|
|
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
|
// 预览界面的样式，这里用的 github 的 markdown 主题
|
|
import 'github-markdown-css/github-markdown-light.css';
|
|
import { copyText } from '@/utils/common';
|
|
import { htmlToText } from "ele-admin-pro";
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
}>();
|
|
|
|
// 编辑器内容，双向绑定
|
|
const content = ref('');
|
|
|
|
// 插件
|
|
const plugins = ref([
|
|
gfm({
|
|
locale: zh_HansGfm
|
|
})
|
|
]);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
/* 保存编辑 */
|
|
// const save = () => {
|
|
// copyText(content.value);
|
|
// console.log('复制成功');
|
|
// };
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
} else {
|
|
}
|
|
}
|
|
);
|
|
</script>
|