美文网首页webIT课程分享
Java实现在线协作文档编辑

Java实现在线协作文档编辑

作者: 蓝桥云课 | 来源:发表于2017-03-08 16:00 被阅读1973次

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

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

    项目涉及知识点:

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

    项目效果截图:

    代码开发完成后的效果图,如下:

    此处输入图片的描述此处输入图片的描述

    实验原理:

    待实现的功能需求

    序号 需求名称 需求详述
    1 在线协作编辑 嵌入浏览器网页的在线编辑器,支持多人协作编辑,刷新后读取后台最新编辑保存的内容
    2 实时自动保存 通过在线编辑器,输入的内容,能够实时自动保存到客户端;刷新后数据不丢失;点击提交能够保存到数据库中

    技术调研

    在线协作编辑

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

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

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

    实时自动保存

    Web 缓存技术,涉及内容较多。可参考:

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

    系统设计

    系统框架图系统框架图

    项目开发:

    新建项目

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

    new-projectnew-project

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

    勾选web.xml勾选web.xml

    导入jar包

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

    $ wget http://labfile.oss.aliyuncs.com/courses/742/lib.zip
    $ unzip lib.zip
    $ cp lib/* /home/shiyanlou/workspace/WeekReport/WebContent/WEB-INF/lib
    
    解压复制jar包解压复制jar包

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

    jar文件目录截图jar文件目录截图

    后续内容可以在实验楼查看:Java实现在线协作文档编辑

    相关文章

      网友评论

      • 工程设计:用成熟的ONLYOFFICE DOCUMENT SERVER或许是不错的选择,免注册,免登陆……简单安全高效……

      本文标题:Java实现在线协作文档编辑

      本文链接:https://www.haomeiwen.com/subject/fsibgttx.html