diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50d80b7f..1fce2e78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
- 全局表格加上id 方便进行缓存列排序的操作
- 支持菜单名称i18n
- 登录页 验证码登录
+- Markdown编辑/预览组件(基于vditor)
**BUG FIXES**
diff --git a/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue b/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue
index 5322a6b4..bd010347 100644
--- a/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue
@@ -1,15 +1,24 @@
-
+
+
diff --git a/packages/effects/common-ui/src/components/markdown/editor.vue b/packages/effects/common-ui/src/components/markdown/editor.vue
index c476554c..8a64c67c 100644
--- a/packages/effects/common-ui/src/components/markdown/editor.vue
+++ b/packages/effects/common-ui/src/components/markdown/editor.vue
@@ -21,15 +21,38 @@ const props = defineProps({
type: [String, Number],
default: 500,
},
- // 编辑器唯一ID 缓存使用
+ /**
+ * 编辑模式。默认值: 'wysiwyg'
+ * wysiwyg: 所见即所得
+ * ir: 即时渲染
+ * sv: 分屏预览
+ */
+ mode: {
+ type: String as PropType<'ir' | 'sv' | 'wysiwyg'>,
+ default: 'wysiwyg',
+ },
+ // 编辑器唯一ID 缓存使用 可记录上次输入
id: {
type: String,
- required: true,
+ required: false,
+ default: '',
+ validator(value, props) {
+ if (!value && props.enableCache) {
+ console.warn('The id is required when enableCache is true');
+ return false;
+ }
+ return true;
+ },
},
enableCache: {
type: Boolean,
default: false,
},
+ // 禁用编辑器
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
// 其他配置项
options: {
type: Object as PropType,
@@ -60,8 +83,19 @@ const content = defineModel('value', {
default: '',
});
+// 监听禁用
+function changeDisabled(disabled: boolean) {
+ if (disabled) {
+ vditorInstance.value?.disabled();
+ } else {
+ vditorInstance.value?.enable();
+ }
+}
+watch(() => props.disabled, changeDisabled);
+
onMounted(() => {
vditorInstance.value = new Vditor(vditorRef.value!, {
+ mode: props.mode,
value: content.value,
height: props.height,
lang: locale.value.replace('-', '_') as any,
@@ -76,6 +110,8 @@ onMounted(() => {
},
// 加载完成的事件
after() {
+ // 需要初始化就禁用的情况
+ changeDisabled(props.disabled);
emit('mounted');
},
...props.options,
diff --git a/packages/effects/common-ui/src/components/markdown/index.ts b/packages/effects/common-ui/src/components/markdown/index.ts
index 76e8f668..dfea14d6 100644
--- a/packages/effects/common-ui/src/components/markdown/index.ts
+++ b/packages/effects/common-ui/src/components/markdown/index.ts
@@ -1,2 +1,2 @@
export { default as MarkdownEditor } from './editor.vue';
-export { default as MarkdownPreview } from './preview.vue';
+export { default as MarkdownPreviewer } from './preview.vue';
diff --git a/packages/effects/common-ui/src/components/markdown/preview.vue b/packages/effects/common-ui/src/components/markdown/preview.vue
index 52abd2b6..a0c5cabb 100644
--- a/packages/effects/common-ui/src/components/markdown/preview.vue
+++ b/packages/effects/common-ui/src/components/markdown/preview.vue
@@ -17,18 +17,10 @@ import 'vditor/dist/index.css';
const props = defineProps({
// 编辑器高度
height: {
- type: Number,
+ // string或者number类型
+ type: [String, Number],
default: 500,
},
- // 编辑器唯一ID 缓存使用
- id: {
- type: String,
- required: true,
- },
- enableCache: {
- type: Boolean,
- default: false,
- },
// 其他配置项
options: {
type: Object as PropType,
@@ -65,10 +57,11 @@ onMounted(() => {
height: props.height,
lang: locale.value.replace('-', '_') as any,
cache: {
- enable: props.enableCache,
- id: props.id,
+ enable: false,
},
theme: isDark.value ? 'dark' : 'classic',
+ // 预览(只读模式) 不显示工具栏
+ toolbar: [],
// 手动响应式
input(value) {
content.value = value;
@@ -76,6 +69,8 @@ onMounted(() => {
// 加载完成的事件
after() {
emit('mounted');
+ // 禁用编辑器
+ vditorInstance.value?.disabled();
},
...props.options,
});
@@ -90,3 +85,10 @@ onBeforeUnmount(() => {
+
+