目  录

基于CKEditor网页富文本编辑工具转PDF文件的技术预研分析报告 1

1. 预研背景 4

2. 预研目的和意义 4

3. 预研目标 4

4. 预研技术概述 4

5. 预研技术实现 7

5.1 环境准备 7

5.2 技术实现 7

6. 总结 11

本次预研是对浏览器富文本编辑工具转换PDF文件一种实现方法的技术研究。

本次预研主要解决陕西CA在电子签名签章业务流程中，用户不能在网页中直接编辑文件的问题，通过本次预研可实现用户在浏览器中直接编写文件内容。

通过查找市面上各种在线富文本编辑工具，结合各自的优缺点，找到一种适用于XXX电子签名签章业务场景的WEB在线编辑工具，从而达到实现WEB在线编辑的内容输出到转板式文件进行电子签名签章的目的。

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不懂HTML的用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。目前市面比较流行的富文本编辑工具有CKEditor、UEditor、KindEditor等。

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

Ckeditor界面

UEditor 是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。但从2016年之后百度已停止更新，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版）。

UEditor界面

KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word。

KindEditor界面

了解了市面上常用的富文本编辑工具后，如实现文件的电子签名签章还需将浏览器编辑的文本转换为PDF文件，通过了解HTML转PDF方法有很多，包括Java中的IText包提供了对html转PDF文件的支持；开源的wkhtmltopdf软件等。

经过对各种富文本编辑工具及pdf转换工具进行比较，前端编辑工具决定采用功能齐全、文档完整、性能高效及界面美观的Ckeditor，对比各种Html转换工具决定采用性能高效及兼容性较高的WkHtmlToPdf软件来实现富文本转换到板式文件。从而达到在浏览器对文本的编辑。

序号

名称

版本

1

操作系统

Windows10/Centos6.5+

2

浏览器

火狐/谷歌/IE11+

3

wkhtmltox

0.12.5

4

ckeditor

4.14

Wkhtmltox官网下载：wkhtmltopdf

Ckeditor 官网下载：CKEditor 4 - Download Latest Version

5.2.1 CKEditor实现WEB文本编辑

5.2.1.1 引用Ckeditor

在需要使用的界面引用ckeditor.js文件。

5.2.1.2 Ckeditor编辑文本的实现

使用浏览器访问demo.html，运行效果如下图：

编辑工具分为工具栏及编辑输入框，工具栏包含文字大小、样式、颜色、加粗、下划线、斜体、添加表格、文字对齐方式、部分数学符号等功能。用户使用编辑工具时，可像编辑word一样在网页中进行编辑文字，文字编辑完成后可点击提交按钮时，CKEditor提供了一系列常用的方法可将编辑的文本转换为HTML格式，具体API参考：https://ckeditor.com/docs/ckeditor4/latest/api/index.html

5.2.3 Wkhtmltox将Html转为PDF文件

5.2.1.1 html文件转PDF

在服务器上完成Wkhtmltox.exe的安装，进入安装目录（D:\Program Files\wkhtmltopdf\bin）调用如下命令：

$wkhtmltopdf [待转换的html文件路径] [pdf文件输出路径]

转换结果见下图：

正在上传…重新上传取消

通过CKEditor+Wkhtmltox的配合使用，可以完美解决用户使用浏览器编辑文本的需求。