目 ?錄

基于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文件。

<script src="ckeditor.js"></script>

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的配合使用，可以完美解決用戶使用瀏覽器編輯文本的需求。

總結

以上是生活随笔為你收集整理的基于CKEditor网页富文本编辑工具转PDF文件的技术预研分析报告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。