Java实现在线协作文档编辑

大家在工作和学习中时常会遇到多人编辑一个文件的情况，而多人在线协作文档编辑器则是一个很实用、常用的工具，适合小组内的文档编辑。例如可用于小团队内部进行实时编写和收集周报等。

这个项目 介绍了如何设计实现该功能，使用java编写代码，应用非常流行的spring mvc框架，引入ckeditor插件，并加入localStorage缓存技术，最终利用Eclipse完成该实验。非常适合Java学习者用于练手。

项目涉及知识点：

• 重点掌握 CKEditor
• 重点掌握 LocalStorage 的使用
• 了解 Java Web 方向的 SpringMVC 框架开发技巧
• 了解 Java Web 方向的 Spring JDBCTemplate 开发技巧
• 了解如何在 MySQL 中创建数据、创建表

项目效果截图：

代码开发完成后的效果图，如下：

此处输入图片的描述

实验原理：

待实现的功能需求

技术调研

在线协作编辑

实现多人在线编辑的功能，可自行开发web编辑器插件，但是实现成本较高，经调研目前已经有很多在线编辑器插件可以调用，请参考： HTML编辑器-HTML网页表单可视化在线编辑器插件大全

其中，CKEditor（原FCKEditor）是一个现成的使用旨在简化Web内容创建HTML文本编辑器。是国外比较流行的网页文本在线编辑器，早期DEDECMS管理后台发布内容地方使用此编辑器，这是一个所见即所得的编辑器，带来了共同的文字处理器的功能，直接到您的网页。

最后，因为 CKEditor 免费开源、完全可定制、高标准的质量等优点，该课程选择该插件作为前端的输入。

实时自动保存

Web 缓存技术，涉及内容较多。可参考：

• Web前后端缓存技术
• 简谈常用缓存技术
• HTML5本地存储 localStorage 、sessionStorage、WebSQL、indexedDB

最终，为了兼顾数据保存的简单高效和安全，我们选用 sessionStorage作为前端存储，因为sessionStorage的优点就是方便高效；同时为了保证数据的安全不丢失，我们在用户确认编写信息无误后，通过触发按钮的方式将数据提交后台，交由服务器进行存储，因为服务器存储数据安全性高。

系统设计

系统框架图

项目开发：

新建项目

双击桌面的eclipse图标，打开eclipse软件，点击工具栏FILE-New-Dynamic Web Project，进入新建java web项目页面；新建 Dynamic Web Project，命名为 WeekReport，然后点击 Next，

new-project

第二次点击 Next 按钮会进入如下所示的步骤，注意勾选生成 web.xml 选项。

勾选web.xml

导入jar包

先下载依赖的jar包，在终端执行以下命令

$ wget //labfile.oss.aliyuncs.com/courses/742/lib.zip $ unzip lib.zip $ cp lib/* /home/shiyanlou/workspace/WeekReport/WebContent/WEB-INF/lib

解压复制jar包

将jar包解压之后，将所有的jar包文件，全部都复制到WeekReport项目工程下的 WebContent/WEB-INF/lib 目录下面即可(jar文件目录截图如下)。

jar文件目录截图

。

学习Java的同学注意了！！！

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群，群号码：392216227我们一起学Java！