编辑器回复和撤销和编辑问题

[15632031368]

将编辑器卸载弹框里，关闭再打开，关闭再打开，重复时会出现

1. 给文字加粗或者斜体，点击撤销会把对文字操作的文字直接给删除，点击恢复也恢复不了
2. 光标位置异常，选中要编辑的位置编辑，编辑的内容会增加到其他地方，而不是选中位置

[sunsonliu]

额，看描述看不出来是什么问题，可以尝试在每次打开弹窗时调用cherryObj.editor.editor.refresh()刷新编辑器的状态试试能否解决上述问题哈

[15632031368]

增加后确实有效果，谢谢，但现在发现了另一个问题，我的有序列表和无序列表设置后在预览页没有展示

代码如下：
`

Markdown视图

源码 预览

    <div style="width: 10px"></div>

    <!-- 保存和下载按钮 -->
    <t-button size="small" variant="text" @click="saveMarkdown">
      <template #icon>
        <t-icon name="save" />
      </template>
    </t-button>
    <t-button size="small" variant="text" @click="downloadMarkdown">
      <template #icon>
        <t-icon name="download" />
      </template>
    </t-button>
  </div>
</div>
<div class="markdown-edit-content">
  <div :id="editorId" ref="markdownEditorRef"></div>
</div>

<script setup lang="ts"> import 'cherry-markdown/dist/cherry-markdown.css'; // 引入CodeMirror主题和快捷键 import 'codemirror/theme/monokai.css'; import 'codemirror/keymap/sublime';

import Cherry from 'cherry-markdown';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';

import { useCdnUrl } from '@/hooks/useCdnUrl';

interface Props {
/** Markdown文件URL /
fileUrl: string;
/* 初始Markdown内容，优先使用 /
initialContent?: string;
/* 文件名 /
filename?: string;
/* 保存回调函数 */
onSave?: (content: string) => Promise<{ productionContent?: string }>;
}

interface Emits {
/** 内容变化事件 */
(e: 'content-change', content: string): void;
}

defineOptions({
name: 'MarkdownEdit',
});

const props = withDefaults(defineProps(), {
filename: '',
initialContent: '',
onSave: async () => ({}), // 默认空实现，返回空对象
});

const emit = defineEmits();

// 生成唯一编辑器ID，避免多个实例冲突
const editorId = ref(cherry-markdown-editor-${Date.now()}-${Math.floor(Math.random() * 1000)});

// 编辑模式：preview - 预览，edit - 源码
const editMode = ref<'preview' | 'edit'>('edit');
// 原始Markdown内容
const originalMarkdownContent = ref('');
// DOM引用
const markdownEditorRef = ref();
// Cherry实例引用
let cherryInstance: Cherry | null = null;

// 使用CDN URL处理
const { getFullUrl } = useCdnUrl();

// 初始化Cherry编辑器
const initCherry = () => {
// 如果编辑器已存在，先销毁
if (cherryInstance) {
cherryInstance.editor.editor.refresh();
destroyCherry();
}

if (!markdownEditorRef.value) return;

// 清理编辑器容器，确保每次初始化都是干净的
markdownEditorRef.value.innerHTML = '';

try {
// 解决table-echarts-plugin插件依赖echarts的问题
const globalWindow = window as any;
const originalEcharts = globalWindow.echarts;

// 临时模拟echarts对象
if (!globalWindow.echarts) {
  globalWindow.echarts = {
    init: () => ({ setOption: () => {}, resize: () => {}, dispose: () => {} }),
    dispose: () => {},
  };
}

// 使用最新的initialContent值，确保编辑器初始化时使用正确的内容
const currentContent = props.initialContent || originalMarkdownContent.value;

// 更新原始内容引用，确保一致
originalMarkdownContent.value = currentContent;

// 创建Cherry实例，启用完整功能
cherryInstance = new Cherry({
  id: editorId.value,
  value: currentContent,
  editor: {
    codeMirrorOptions: {
      keyMap: 'sublime',
      lineNumbers: true,
      theme: 'monokai',
      // 确保编辑器获得焦点，但不自动选中内容，解决光标位置问题
      autofocus: true,
      lineWrapping: true,
      autoCloseBrackets: true,
      matchBrackets: true,
    },
  },
  toolbars: {
    toolbar: [
      'undo',
      'redo',

      '|',
      { bold: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'ruby'] },
      'color',
      'size',

      '|',
      'header',
      'list',
      'justify',
      'quote',
      'detail',
      'panel',

      '|',
      { insert: ['image', 'link', 'hr', 'br', 'code', 'toc', 'table'] },
      '|',
      'shortcutKey',
    ],
    sidebar: [],
    toolbarRight: [],
    bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'ruby', '|', 'color', 'size'],
    float: ['table', 'code', 'graph'],
  },
});

// 恢复原始的echarts对象
if (originalEcharts === undefined) {
  delete globalWindow.echarts;
} else {
  globalWindow.echarts = originalEcharts;
}

} catch (error) {
console.error('Cherry初始化时出错:', error);
// 初始化失败时，尝试创建一个简化版的编辑器
cherryInstance = new Cherry({
id: editorId.value,
value: originalMarkdownContent.value,
});
}

// 切换模式
if (typeof cherryInstance.switchModel === 'function') {
cherryInstance.switchModel(editMode.value === 'preview' ? 'previewOnly' : 'editOnly');
}

// 监听内容变化
cherryInstance.on('afterChange', (value: string) => {
originalMarkdownContent.value = value;
emit('content-change', value);
});
};

// 销毁Cherry实例
const destroyCherry = () => {
if (cherryInstance) {
try {
// 1. 调用Cherry实例的destroy方法（Cherry内部会处理事件监听器）
if (typeof cherryInstance.destroy === 'function') {
cherryInstance.destroy();
}

  // 2. 手动清理编辑器容器DOM，确保所有子元素被移除
  if (markdownEditorRef.value) {
    markdownEditorRef.value.innerHTML = '';
  }

  // 3. 类型安全的方式检查和清理CodeMirror实例
  const cherryAny = cherryInstance as any;
  if (cherryAny.codeMirrorInstance && typeof cherryAny.codeMirrorInstance.destroy === 'function') {
    cherryAny.codeMirrorInstance.destroy();
  }

  // 4. 清理其他可能的资源引用（使用类型断言）
  if (cherryAny.$refs) {
    Object.keys(cherryAny.$refs).forEach((key) => {
      delete cherryAny.$refs[key];
    });
  }
} catch (error) {
  console.error('销毁Cherry实例时出错:', error);
} finally {
  // 确保实例被完全置为null
  cherryInstance = null;
}

}
};

// 切换编辑模式
const toggleEditMode = (mode: 'preview' | 'edit') => {
// 在切换模式前，总是获取当前编辑器的最新内容并保存
if (cherryInstance) {
const currentContent = cherryInstance.getMarkdown();
originalMarkdownContent.value = currentContent;
emit('content-change', currentContent);
}

editMode.value = mode;

// 直接使用switchModel切换模式，避免销毁重建实例导致的内容丢失
if (cherryInstance && typeof cherryInstance.switchModel === 'function') {
cherryInstance.switchModel(mode === 'preview' ? 'previewOnly' : 'editOnly');
}
};

// 保存Markdown，返回Promise以便外部调用
const saveMarkdown = async (): Promise<{ productionContent?: string }> => {
// 保存前获取编辑器的最新内容，确保保存的是最新版本
if (cherryInstance) {
const currentContent = cherryInstance.getMarkdown();
originalMarkdownContent.value = currentContent;
emit('content-change', currentContent);
}

// 调用父组件提供的保存回调函数，等待其完成并获取返回结果
return await props.onSave!(originalMarkdownContent.value);
};

// 下载Markdown源文件
const downloadMarkdown = async () => {
if (!props.fileUrl) {
MessagePlugin.warning('没有可下载的Markdown文件');
return;
}

const confirmDialog = DialogPlugin.confirm({
header: '确认下载',
body: 是否保存并下载最新版？,
confirmBtn: {
content: '下载',
theme: 'danger',
loading: false,
},
theme: 'warning',
onConfirm: async () => {
confirmDialog.update({ confirmBtn: { content: '保存中', loading: true } });
try {
// 先保存，获取保存结果
const saveResult = await saveMarkdown();
// 保存成功后开始下载
confirmDialog.update({ confirmBtn: { content: '下载中', loading: true } });

    // 使用保存返回的productionContent作为最新地址，如果没有则使用原来的fileUrl
    const downloadUrl = saveResult.productionContent || props.fileUrl;

    const fullUrl = getFullUrl(downloadUrl);
    const link = document.createElement('a');
    link.href = fullUrl;
    link.download = `${props.filename?.replace(/\.[^/.]+$/, '') || 'document'}.md`;
    link.target = '_blank';

    // 添加到DOM并触发点击
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);

    MessagePlugin.success('Markdown源文件下载已开始');
    // 关闭弹框
    confirmDialog.hide();
  } catch (error) {
    console.error('操作失败:', error);
    // 保存或下载失败时的处理
    if (error instanceof Error && error.message === '保存失败') {
      MessagePlugin.error('保存失败，无法下载');
    } else {
      MessagePlugin.error('下载失败');
    }
    confirmDialog.update({ confirmBtn: { content: '下载', loading: false } });
  }
},

});
};

// 监听initialContent变化，更新编辑器内容
watch(
() => props.initialContent,
(newInitialContent, oldInitialContent) => {
// 只有当内容真正变化时才更新编辑器，避免在用户编辑时干扰
if (newInitialContent !== oldInitialContent) {
// 更新原始内容引用
originalMarkdownContent.value = newInitialContent || '';

  // 如果编辑器实例已存在，直接更新内容，避免重新初始化
  if (cherryInstance && typeof cherryInstance.setMarkdown === 'function') {
    cherryInstance.setMarkdown(newInitialContent || '');
  } else {
    // 编辑器实例不存在时才重新初始化
    initCherry();
  }
}

},
);

// 组件挂载时初始化编辑器
onMounted(async () => {
await nextTick();
// 无论是否有内容，都初始化编辑器
initCherry();
});

// 组件卸载时销毁编辑器实例
onUnmounted(() => {
destroyCherry();
});
</script>

<style scoped> .markdown-edit-container { display: flex; flex-direction: column; height: 100%; background-color: #fff; border: 1px solid #e5e7eb; } .markdown-edit-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 14px; font-weight: 500; flex-shrink: 0; } .markdown-edit-title { display: flex; align-items: center; gap: 6px; color: #374151; } .markdown-edit-actions { display: flex; align-items: center; gap: 8px; } .markdown-edit-content { flex: 1; min-height: 0; position: relative; overflow: auto; } /* Cherry编辑器容器样式 */ .markdown-edit-content > div { width: 100%; height: 100%; min-height: 400px; } /* 修复Cherry工具栏样式 */ :deep(.cherry-toolbar) { background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; } :deep(.cherry-editor) { border: none; resize: none; font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace; font-size: 14px; line-height: 1.6; background-color: #fff; } /* 修复Cherry预览样式 */ :deep(.cherry-markdown-body) { padding: 20px; line-height: 1.6; background-color: #fff; } :deep(.cherry-shortcut-key-config-panel-wrapper) { left: 360px !important; max-height: 390px !important; } </style>

`

[sunsonliu]

有可能出现这些“异常”是因为用了代理的原因，可以参考这个issue，因为cherry引用的codemirror V5 对代理的情况支持的不好，所以会有各种奇怪的现象，可以通过去掉代理方式再试试哈

[15632031368]

有可能出现这些“异常”是因为用了代理的原因，可以参考这个issue，因为cherry引用的codemirror V5 对代理的情况支持的不好，所以会有各种奇怪的现象，可以通过去掉代理方式再试试哈

编辑器打开时，出现多个问题：
问题1：给文字加粗或者斜体，点击撤销会把对文字操作的文字直接给删除，点击恢复也恢复不了
问题2：光标位置异常，选中要编辑的位置编辑，编辑的内容会增加到其他地方，而不是选中位置
问题3：使用快捷键隐藏工具栏 功能不好使
但是并没有new Cherry并没有被代理

`

Markdown视图

编辑 预览

    <div style="width: 10px"></div>

    <!-- 保存和下载按钮 -->
    <t-button size="small" variant="text" @click="saveMarkdown">
      <template #icon>
        <t-icon name="save" />
      </template>
    </t-button>
    <t-button size="small" variant="text" @click="downloadMarkdown">
      <template #icon>
        <t-icon name="download" />
      </template>
    </t-button>
  </div>
</div>
<div class="markdown-edit-content">
  <div :id="editorId" ref="markdownEditorRef"></div>
</div>

<script setup lang="ts"> import 'cherry-markdown/dist/cherry-markdown.css'; // 引入CodeMirror主题和快捷键 import 'codemirror/theme/monokai.css'; import 'codemirror/keymap/sublime';

import Cherry from 'cherry-markdown';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';

import { useCdnUrl } from '@/hooks/useCdnUrl';

interface Props {
/** Markdown文件URL /
fileUrl: string;
/* 初始Markdown内容，优先使用 /
initialContent?: string;
/* 文件名 /
filename?: string;
/* 保存回调函数 */
onSave?: (content: string) => Promise<{ productionContent?: string }>;
}

interface Emits {
/** 内容变化事件 */
(e: 'content-change', content: string): void;
}

defineOptions({
name: 'MarkdownEdit',
});

const props = withDefaults(defineProps(), {
filename: '',
initialContent: '',
onSave: async () => ({}), // 默认空实现，返回空对象
});

const emit = defineEmits();

// 生成唯一编辑器ID，避免多个实例冲突
const editorId = ref(cherry-markdown-editor-${Date.now()}-${Math.floor(Math.random() * 1000)});

// 编辑模式：preview - 预览，edit - 源码
const editMode = ref<'preview' | 'edit'>('edit');
// 原始Markdown内容
const originalMarkdownContent = ref('');
// 编辑器内容是否被修改
const isDirty = ref(false);
// 保存生成的路径
const savedProductionPath = ref();
// DOM引用
const markdownEditorRef = ref();
// Cherry实例引用
let cherryInstance: Cherry | null = null;

// 使用CDN URL处理
const { getFullUrl } = useCdnUrl();

// 初始化Cherry编辑器
const initCherry = () => {
// 如果编辑器已存在，先销毁
if (cherryInstance) {
cherryInstance.editor.editor.refresh();
destroyCherry();
}

if (!markdownEditorRef.value) return;

// 清理编辑器容器，确保每次初始化都是干净的
markdownEditorRef.value.innerHTML = '';

try {
// 解决table-echarts-plugin插件依赖echarts的问题
const globalWindow = window as any;
const originalEcharts = globalWindow.echarts;

// 临时模拟echarts对象
if (!globalWindow.echarts) {
  globalWindow.echarts = {
    init: () => ({ setOption: () => {}, resize: () => {}, dispose: () => {} }),
    dispose: () => {},
  };
}

// 使用最新的initialContent值，确保编辑器初始化时使用正确的内容
const currentContent = props.initialContent || originalMarkdownContent.value;

// 更新原始内容引用，确保一致
originalMarkdownContent.value = currentContent;
// 初始化内容修改状态
isDirty.value = false;

// 创建Cherry实例，启用完整功能
cherryInstance = new Cherry({
  id: editorId.value,
  value: currentContent,
  editor: {
    keyMap: 'sublime',
    codemirror: {
      // 是否自动focus 默认为true
      autofocus: true,
    },
  },
  previewer: {
    // 关闭预览区编辑相关配置
    enablePreviewerBubble: false, // 关闭预览区域气泡菜单
    floatWhenClosePreviewer: false,
    enablePreviewer: {
      // 关闭预览区的编辑功能
      edit: false,
    },
  },
  // 预览页面不需要绑定事件
  isPreviewOnly: false,
  toolbars: {
    toolbar: [
      'undo',
      'redo',

      '|',
      { bold: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'ruby'] },
      'color',
      'size',

      '|',
      'header',
      'list',
      'justify',
      'quote',
      'detail',
      'panel',

      '|',
      { insert: ['image', 'link', 'hr', 'br', 'code', 'toc', 'table'] },
      '|',
      'shortcutKey',
    ],
    sidebar: [],
    toolbarRight: [],
    bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'ruby', '|', 'color', 'size'],
    float: ['table', 'code', 'graph'],
  },
});

// 恢复原始的echarts对象
if (originalEcharts === undefined) {
  delete globalWindow.echarts;
} else {
  globalWindow.echarts = originalEcharts;
}

} catch (error) {
console.error('Cherry初始化时出错:', error);
// 初始化失败时，尝试创建一个简化版的编辑器
cherryInstance = new Cherry({
id: editorId.value,
value: originalMarkdownContent.value,
});
}

// 切换模式
if (typeof cherryInstance.switchModel === 'function') {
cherryInstance.switchModel(editMode.value === 'preview' ? 'previewOnly' : 'editOnly');
}

// 监听内容变化
cherryInstance.on('afterChange', (value: string) => {
originalMarkdownContent.value = value;
// 更新内容修改状态
isDirty.value = value !== props.initialContent;
emit('content-change', value);
});
};

// 销毁Cherry实例
const destroyCherry = () => {
if (cherryInstance) {
try {
// 1. 调用Cherry实例的destroy方法（Cherry内部会处理事件监听器）
if (typeof cherryInstance.destroy === 'function') {
cherryInstance.destroy();
}

  // 2. 手动清理编辑器容器DOM，确保所有子元素被移除
  if (markdownEditorRef.value) {
    markdownEditorRef.value.innerHTML = '';
  }

  // 3. 类型安全的方式检查和清理CodeMirror实例
  const cherryAny = cherryInstance as any;
  if (cherryAny.codeMirrorInstance && typeof cherryAny.codeMirrorInstance.destroy === 'function') {
    cherryAny.codeMirrorInstance.destroy();
  }

  // 4. 清理其他可能的资源引用（使用类型断言）
  if (cherryAny.$refs) {
    Object.keys(cherryAny.$refs).forEach((key) => {
      delete cherryAny.$refs[key];
    });
  }
} catch (error) {
  console.error('销毁Cherry实例时出错:', error);
} finally {
  // 确保实例被完全置为null
  cherryInstance = null;
}

}
};

// 切换编辑模式
const toggleEditMode = (mode: 'preview' | 'edit') => {
// 在切换模式前，总是获取当前编辑器的最新内容并保存
if (cherryInstance) {
const currentContent = cherryInstance.getMarkdown();
originalMarkdownContent.value = currentContent;
emit('content-change', currentContent);
}

editMode.value = mode;

// 直接使用switchModel切换模式，避免销毁重建实例导致的内容丢失
if (cherryInstance && typeof cherryInstance.switchModel === 'function') {
cherryInstance.switchModel(mode === 'preview' ? 'previewOnly' : 'editOnly');
}
};

// 保存Markdown，返回Promise以便外部调用
const saveMarkdown = async (): Promise<{ productionContent?: string }> => {
// 保存前获取编辑器的最新内容，确保保存的是最新版本
if (cherryInstance) {
const currentContent = cherryInstance.getMarkdown();
originalMarkdownContent.value = currentContent;
emit('content-change', currentContent);
}

// 调用父组件提供的保存回调函数，等待其完成并获取返回结果
const result = await props.onSave!(originalMarkdownContent.value);

// 保存成功后，更新保存生成的路径和重置isDirty状态
savedProductionPath.value = result.productionContent;
isDirty.value = false;

return result;
};

// 下载Markdown源文件
const downloadMarkdown = async () => {
if (!props.fileUrl) {
MessagePlugin.warning('没有可下载的Markdown文件');
return;
}

// 如果内容未修改，直接下载，不需要弹框
if (!isDirty.value) {
try {
// 优先使用保存生成的路径，如果没有则使用原来的fileUrl
const downloadUrl = savedProductionPath.value || props.fileUrl;
const fullUrl = getFullUrl(downloadUrl);
const link = document.createElement('a');
link.href = fullUrl;
link.download = ${props.filename?.replace(/\.[^/.]+$/, '') || 'document'}.md;
link.target = '_blank';

  // 添加到DOM并触发点击
  document.body.appendChild(link);
  link.click();

  // 清理
  document.body.removeChild(link);

  MessagePlugin.success('Markdown源文件下载已开始');
} catch (error) {
  console.error('下载失败:', error);
  MessagePlugin.error('下载失败');
}
return;

}

// 内容已修改，显示弹框询问
const confirmDialog = DialogPlugin.confirm({
header: '确认下载',
body: '是否保存并下载最新版？',
confirmBtn: {
content: '下载',
theme: 'danger',
loading: false,
},
theme: 'warning',
onConfirm: async () => {
try {
// 内容已修改，先保存
confirmDialog.update({ confirmBtn: { content: '保存中', loading: true } });
const saveResult = await saveMarkdown();
const downloadUrl = saveResult.productionContent || props.fileUrl;

    // 开始下载
    confirmDialog.update({ confirmBtn: { content: '下载中', loading: true } });

    const fullUrl = getFullUrl(downloadUrl);
    const link = document.createElement('a');
    link.href = fullUrl;
    link.download = `${props.filename?.replace(/\.[^/.]+$/, '') || 'document'}.md`;
    link.target = '_blank';

    // 添加到DOM并触发点击
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);

    MessagePlugin.success('Markdown源文件下载已开始');
    // 关闭弹框
    confirmDialog.hide();
  } catch (error) {
    console.error('操作失败:', error);
    // 保存或下载失败时的处理
    if (error instanceof Error && error.message === '保存失败') {
      MessagePlugin.error('保存失败，无法下载');
    } else {
      MessagePlugin.error('下载失败');
    }
    confirmDialog.update({ confirmBtn: { content: '下载', loading: false } });
  }
},

});
};

// 监听initialContent变化，更新编辑器内容
watch(
() => props.initialContent,
(newInitialContent, oldInitialContent) => {
// 只有当内容真正变化时才更新编辑器，避免在用户编辑时干扰
if (newInitialContent !== oldInitialContent) {
// 更新原始内容引用
originalMarkdownContent.value = newInitialContent || '';

  // 如果编辑器实例已存在，直接更新内容，避免重新初始化
  if (cherryInstance && typeof cherryInstance.setMarkdown === 'function') {
    cherryInstance.setMarkdown(newInitialContent || '');
  } else {
    // 编辑器实例不存在时才重新初始化
    initCherry();
  }
}

},
);

// 组件挂载时初始化编辑器
onMounted(async () => {
await nextTick();
// 无论是否有内容，都初始化编辑器
initCherry();
});

// 组件卸载时销毁编辑器实例
onUnmounted(() => {
destroyCherry();
});
</script>

<style scoped> .markdown-edit-container { display: flex; flex-direction: column; height: 100%; background-color: #fff; border: 1px solid #e5e7eb; } .markdown-edit-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 14px; font-weight: 500; flex-shrink: 0; } .markdown-edit-title { display: flex; align-items: center; gap: 6px; color: #374151; } .markdown-edit-actions { display: flex; align-items: center; gap: 8px; } .markdown-edit-content { flex: 1; min-height: 0; position: relative; overflow: auto; } /* Cherry编辑器容器样式 */ .markdown-edit-content > div { width: 100%; height: 100%; /* min-height: 400px; */ } /* 修复Cherry工具栏样式 */ :deep(.cherry-toolbar) { background-color: #f9fafb; border-bottom: 1px solid #e5e7eb; } :deep(.cherry-editor) { border: none; resize: none; font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace; font-size: 14px; line-height: 1.6; background-color: #fff; } /* 修复Cherry预览样式 */ :deep(.cherry-markdown-body) { padding: 20px; line-height: 1.6; background-color: #fff; overflow-x: auto; min-height: 100%; } :deep(.cherry-markdown .cherry-table-container) { overflow: visible; } :deep(.cherry-shortcut-key-config-panel-wrapper) { left: 360px !important; max-height: 390px !important; } :deep(.cherry-markdown) { ul { list-style-type: disc !important; /* 实心圆点 */ } ol { list-style-type: decimal !important; /* 数字 */ } /* 兼容不同浏览器的样式重置 */ :deep(.cherry-markdown-body) li { list-style-position: inside !important; /* 标记在列表项内部（可选，根据需求调整） */ } ul li p, ol li p { margin: revert !important; } } </style>`

[sunsonliu]

抱歉，提供的代码有点杂不太好分析原因。建议将ref去掉试试，或者在有问题的步骤里主动调用cherryObj.editor.editor.refresh() 试试哈