如何使用CKEditor 5输出Markdown格式内容？

开发者阿泽

2026-8-24

实现CKEditor 5输出Markdown而非HTML的方法

问题分析

你当前的代码存在两个核心问题：

使用的默认ClassicEditor CDN包未包含Markdown插件，直接声明Markdown插件会导致变量未定义错误
未调用CKEditor 5专门获取Markdown格式内容的API，默认getData()方法只会返回HTML

正确实现步骤

1. 替换为带Markdown插件的CDN构建

默认ClassicEditor不包含Markdown支持，需要改用官方预打包的带Markdown的构建版本：

<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic-with-markdown/ckeditor.js"></script>

2. 简化编辑器初始化配置

CDN构建已预包含基础编辑插件，无需手动声明plugins数组，只需按需配置工具栏：

<textarea class="editor"></textarea>

<script>
var myEditor;
ClassicEditor
    .create(document.querySelector('textarea.editor'), {
        toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'] // 按需添加工具按钮
    })
    .then(editor => {
        console.log('Editor was initialized', editor);
        myEditor = editor;
    })
    .catch(error => {
        console.error(error);
    });
</script>

3. 获取Markdown格式内容

调用editor.data.get()并指定format: 'markdown'参数，即可获取Markdown格式的内容：

// 示例：获取并打印Markdown内容
const markdownContent = myEditor.data.get({ format: 'markdown' });
console.log(markdownContent);

// 示例：表单提交时替换为Markdown内容
document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const markdown = myEditor.data.get({ format: 'markdown' });
    // 此处可将Markdown内容发送至后端或进行其他处理
    console.log('提交的Markdown内容:', markdown);
});