CMS企业官网Word文档导入功能开发记录

需求分析

作为浙江的一名PHP开发者,我最近接手了一个帝国CMS企业官网的外包项目。客户提出了一个关键需求:在后台新闻管理系统的文章发布模块中,增加Word/Excel/PPT/PDF文档导入和一键粘贴功能。这个需求的核心价值在于:

  1. 提高内容发布效率,简化操作流程
  2. 为高龄用户提供更友好的操作体验
  3. 支持复杂文档格式的完美导入(包括公式、形状、样式等)
  4. 保持与现有系统架构的兼容性

技术调研过程

现有解决方案评估

经过对市场上主流开源产品的评估,我发现以下问题:

  1. 公式支持不足:大多数方案对emz/wmz格式的公式图片和形状支持不佳
  2. LaTeX/MathType兼容性差:很少有方案能完整支持数学公式的导入
  3. 样式保留不完整:字体、颜色、表格等格式经常丢失
  4. 集成复杂度高:很多方案需要大量二次开发

技术选型

基于评估结果,我决定采用以下技术组合:

  1. 编辑器插件:基于CKEditor的PasteFromWord插件进行二次开发
  2. 文档解析:使用PHPWord + PhpSpreadsheet + TCPDF组合处理不同格式
  3. 公式转换:MathJax + MathType SDK处理公式转换
  4. 图片处理:Intervention Image库 + 华为云OBS SDK
  5. 前端组件:Vue.js + Axios实现异步上传

开发实施过程

环境准备

首先,我在本地开发环境中搭建了与生产环境一致的系统:

# 开发环境配置
OS: CentOS 7.9
PHP: 7.4.33
MySQL: 5.7.41
Web Server: Nginx 1.20.1

插件架构设计

设计了一个模块化的插件架构:

empirecms-word-import/
├── config/                # 插件配置
├── controller/            # 控制器
├── helper/                # 辅助函数
├── library/               # 第三方库
│   ├── PHPWord/
│   ├── PhpSpreadsheet/
│   └── ...
├── model/                 # 数据模型
├── static/                # 静态资源
│   ├── css/
│   ├── js/
│   └── images/
├── view/                  # 视图模板
└── plugin.xml             # 插件元数据

核心功能实现

1. Word一键粘贴功能
// 在CKEditor配置中添加PasteFromWord插件
CKEDITOR.replace('editor', {
    extraPlugins: 'pastefromword',
    pasteFromWordPromptCleanup: true,
    pasteFromWordRemoveFontStyles: false,
    pasteFromWordRemoveStyles: false
});
2. 文档导入功能
// 文档导入控制器
public function importDocumentAction() {
    $file = $this->getRequest()->getFile('document');
    $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    
    switch ($ext) {
        case 'docx':
            $content = $this->importWord($file['tmp_name']);
            break;
        case 'xlsx':
            $content = $this->importExcel($file['tmp_name']);
            break;
        case 'pptx':
            $content = $this->importPowerPoint($file['tmp_name']);
            break;
        case 'pdf':
            $content = $this->importPDF($file['tmp_name']);
            break;
        default:
            throw new Exception('不支持的文档格式');
    }
    
    // 处理图片上传
    $content = $this->processImages($content);
    
    return $content;
}
3. 公式处理
// 前端公式渲染
function renderFormulas(content) {
    // 识别LaTeX公式
    content = content.replace(/\$\$(.*?)\$\$/g, function(match, formula) {
        return '' + formula + '';
    });
    
    // 识别MathType公式
    content = content.replace(/]*data-math-type="formula"[^>]*>/g, function(imgTag) {
        var formula = $(imgTag).data('formula');
        return '' + formula + '';
    });
    
    // 初始化MathJax
    if (window.MathJax) {
        MathJax.typeset();
    }
    
    return content;
}
4. 图片上传处理
// 图片上传到华为云OBS
protected function uploadToOBS($imageData, $fileName) {
    $obsClient = new ObsClient([
        'key' => config('obs.access_key'),
        'secret' => config('obs.secret_key'),
        'endpoint' => config('obs.endpoint')
    ]);
    
    $objectKey = 'uploads/' . date('Ymd') . '/' . $fileName;
    
    try {
        $result = $obsClient->putObject([
            'Bucket' => config('obs.bucket'),
            'Key' => $objectKey,
            'Body' => $imageData,
            'ACL' => ObsClient::AclPublicRead
        ]);
        
        return $result['ObjectURL'];
    } catch (ObsException $e) {
        throw new Exception('图片上传失败: ' . $e->getMessage());
    }
}

帝国CMS集成

在帝国CMS中集成插件的主要步骤:

  1. e/admin/ecmseditor/infoeditor/ckeditor/plugins/目录下创建插件文件夹
  2. 修改config.js添加插件配置
  3. e/admin/ecmseditor/infoeditor/ckeditor/ckeditor.js中注册新按钮
  4. 创建后台管理菜单项

测试与优化

测试用例

  1. Word文档导入测试

    • 包含复杂表格、图片、公式的文档
    • 样式保留情况检查
    • 大文档(10MB+)导入性能
  2. 一键粘贴测试

    • 从Word直接复制内容
    • 从微信公众号复制内容
    • 保留格式检查
  3. 公式支持测试

    • LaTeX公式渲染
    • MathType公式转换
    • 化学方程式显示

性能优化

针对大文档处理进行了以下优化:

  1. 引入分块处理机制,避免内存溢出
  2. 使用Redis缓存解析结果
  3. 图片上传采用异步队列
// 分块处理大文档
public function processLargeDocument($filePath) {
    $chunkSize = 1024 * 1024; // 1MB
    $reader = new \PhpOffice\PhpWord\Reader\Word2007();
    $sections = $reader->loadSections($filePath, $chunkSize);
    
    $content = '';
    foreach ($sections as $section) {
        $content .= $this->processSection($section);
        unset($section); // 及时释放内存
    }
    
    return $content;
}

部署方案

提供了两种部署方式:

  1. 标准部署

    • 将插件包复制到指定目录
    • 执行SQL脚本创建必要的数据表
    • 修改配置文件
  2. Docker部署

    FROM centos:7
    RUN yum install -y php php-mysql php-gd php-xml
    COPY empirecms-word-import /var/www/html/plugins/word-import
    EXPOSE 80
    CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]
    

用户文档

编写了详细的用户手册,包括:

  1. 快速开始指南
  2. 常见问题解答
  3. 格式支持矩阵
  4. 性能优化建议

项目总结

这个项目实现了客户的所有需求,主要成果包括:

  1. 开发了一个完整的Word文档导入插件
  2. 实现了复杂公式的完美支持
  3. 与帝国CMS无缝集成
  4. 提供了详细的文档和支持

通过这个项目,我深入掌握了CKEditor插件开发和文档处理技术,为未来类似项目积累了宝贵经验。

下载插件包

插件包

解压

解压

复制里面的目录e

目录
覆盖到帝国CMS根目录
cms根目录

插件包自动覆盖下面目录

e/extend/WordPaster
注意:插件包包含ueditor,如果您已经集成了ueditor,您可以删除插件包的中ueditor
编辑器目录

4.修改数据表字段
修改数据表字段

选择相应的模板表名

模块表名

修改newstext字段

newstext字段

替换表单HTML代码

html代码

填入代码


var classid='<?=$classid?>',infoid='<?=$id?>',filepass='<?=$filepass?>',ehash='<?=$ecms_hashur[ehref]?>',qiantai='<?=$qiantai?>';//把参数传给编辑器,增加支持7.2版本的金刚模式














"name="">


var pos= window.location.href.indexOf("/e/admin");
var website= window.location.href.substr(0, pos);
WordPaster.getInstance({
    //上传接口:http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
    PostUrl: website+"/e/extend/WordPaster/upload.php",
    //为图片地址增加域名:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
    ImageUrl: "",
    //设置文件字段名称:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
    FileFieldName: "file",
    //提取图片地址:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    ImageMatch: '',
    ui:{render:"wdpst"}
});//加载控件
=UE.getEditor('',{
serverUrl: "e/extend/ueditor/php/controller.php",//自己的请求接口
toolbars:Default,//工具栏配置文件,具体参考ueditor.toolbarconfig.js文件中说明
pageBreakTag:'',//帝国分页标签
initialFrameWidth:'100%',//编辑器宽
initialFrameHeight:300//编辑器高
//等等其它配置自行添加,参考UE默认配置文件复制修改即可
});
//自定义请求参数
.ready(function(){
.execCommand('serverparam',{
'filepass':'',//修改时候是信息ID
'classid' :'',
'qiantai':
});
});



 >
关键字替换   
远程保存图片(

加水印)  

远程保存FLASH(地址前缀:

)


 图片链接转为下一页   自动分页
,每

个字节为一页   取第

张上传图为标题图片(

缩略图: 宽
">
*高
">
)


填写授权码

在本地(localhost)中使用时不需要配置授权码。
在线上环境,正式环境(非localhost,非127.0.0.1)中使用时需要配置授权码。
授权码

整合效果

编辑器界面

效果

导入Word文档,支持doc,docx

粘贴Word和图片

导入Excel文档,支持xls,xlsx

粘贴Word和图片

粘贴Word

一键粘贴Word内容,自动上传Word中的图片,保留文字样式。
粘贴Word和图片

Word转图片

一键导入Word文件,并将Word文件转换成图片上传到服务器中。
导入Word转图片

导入PDF

一键导入PDF文件,并将PDF转换成图片上传到服务器中。
导入PDF转图片

导入PPT

一键导入PPT文件,并将PPT转换成图片上传到服务器中。
导入PPT转图片

上传网络图片

一键自动上传网络图片,自动下载远程服务器图片,自动上传远程服务器图片
自动上传网络图片

图片保存的路径

图片保存路径

示例下载

下载完整示例

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐