如何实现CKEditor 4内容按可视化格式复制到Microsoft Word文档？

数据老陈

2026-6-21

解决CKEditor 4内容复制到Word丢失格式的问题

你当前的实现是将CKEditor输出的HTML源码放入textarea后执行复制，但textarea仅支持纯文本内容，导致HTML标签被当作普通字符复制，粘贴到Word时无法解析出原有的排版格式。要实现和手动选中编辑器内容复制一致的效果，可以用以下两种方法：

方案一：模拟手动选中编辑器内容

直接选中CKEditor编辑区域内的所有内容，再执行复制操作，完全还原手动复制的逻辑：

var editor = CKEDITOR.replace('textarea');

document.getElementById('copy').onclick = function() {
    // 获取编辑器的可编辑区域
    const editable = editor.editable();
    // 创建选中范围，覆盖所有内容
    const range = editor.createRange();
    range.selectNodeContents(editable);
    // 应用选中范围
    const selection = editor.getSelection();
    selection.selectRanges([range]);
    
    // 执行复制
    document.execCommand('copy');
};

方案二：使用Clipboard API写入富文本

利用现代浏览器的Clipboard API，直接向剪贴板写入HTML格式的数据，让Word能识别并解析排版：

var editor = CKEDITOR.replace('textarea');

document.getElementById('copy').onclick = async function() {
    const htmlContent = editor.getData();
    const plainText = editor.document.getBody().getText();
    
    try {
        await navigator.clipboard.write([
            new ClipboardItem({
                'text/html': new Blob([htmlContent], { type: 'text/html' }),
                'text/plain': new Blob([plainText], { type: 'text/plain' })
            })
        ]);
    } catch (err) {
        console.error('复制失败:', err);
    }
};