前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SpringBoot集成markdown实现文档管理

SpringBoot集成markdown实现文档管理

作者头像
code2roc
发布2023-07-19 14:58:29
3170
发布2023-07-19 14:58:29
举报

背景

最近在做一个部门内部简单的知识库系统,便于新人入职了解与一些常见问题的解答,知识库的形式是以文档为主,为了快速实现文档功能,决定采用markdown形式录入,生成本地文件后以html方式展现,层次清晰便于查看

表结构设计

文档信息表

代码语言:javascript
复制
DROP TABLE IF EXISTS `knowledge_documentinfo`;
CREATE TABLE `knowledge_documentinfo` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `UnitGuid` varchar(50) DEFAULT NULL,
  `AddDate` datetime DEFAULT NULL,
  `DocName` varchar(50) DEFAULT NULL,
  `DocType` int(11) DEFAULT NULL,
  `DocRemark` varchar(500) DEFAULT NULL,
  `DocTag` varchar(100) DEFAULT NULL,
  `DocClass` int(11) DEFAULT NULL,
  `GroupGuid` varchar(50) DEFAULT NULL,
  `SortNum` int(11) DEFAULT NULL,
  KEY `ID` (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8mb4;

文档内容表

代码语言:javascript
复制
DROP TABLE IF EXISTS `knowledge_documentcontentinfo`;
CREATE TABLE `knowledge_documentcontentinfo` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `UnitGuid` varchar(50) DEFAULT NULL,
  `DocGuid` varchar(50) DEFAULT NULL,
  `DocClass` int(11) DEFAULT NULL,
  `DocContent` longtext,
  KEY `ID` (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;

前端集成

前端为了markdown编辑操作便捷,集成了toastui-edit编辑器,具有所见即所得模式,和typora一样的效果。因为我们前端是自己开发,基于vue+html本地化方式开发,就简单封装了控件使用,同时需要引用zh-cn.js汉化,指定initialEditType模式为wysiwyg

template

代码语言:javascript
复制
<div v-if="!readonly" id="markdownedit"></div>
<div v-else id="markdownedit_viewer">  </div>

index.js

代码语言:javascript
复制
var mdeditortemplatepath = GetRootPath() + 'component/commonmdeditor/template.html';
Vue.component('common-markdowneditor', function(resolve, reject) {
    $.get(mdeditortemplatepath).then(function(res) {
        resolve({
            template: res,
            model: {
                prop: 'value', //要存在于props
                event: 'change' //当组件的值发生改变时要emit的事件名
            },
            props: {
                value: {},
                height: {
                    default: '300px'
                },
                readonly: {
                    default: false
                }
            },

            data() {
                return {
                    editorID: getNewGuid(),
                    editorImageStoreGroupType: "edtior",
                    editContent: this.value,
                    editorOption: {},
                    editorEntity: null,
                    editorViewEntity: null
                }
            },
            watch: {
                //组件输入同步到页面绑定的变量
                editContent: function(newVal, oldVal) {
                    this.$emit('change', newVal)
                },
                //页面变量同步到组件显示
                value: function(newVal, oldVal) {
                    //从页面向组件更新时
                    if (this.editContent != newVal) {
                        this.editContent = newVal;
                        if (this.editorEntity != null) {
                            this.editorEntity.setMarkdown(newVal, false)
                        }
                        if (this.editorViewEntity != null) {
                            this.editorViewEntity.setMarkdown(newVal, false)
                        }

                    }
                },
            },
            created() {
                var page = this;

            },
            mounted() {
                var page = this;
                this.$nextTick(function() {
                    if (!page.readonly) {
                        page.editorEntity = new toastui.Editor({
                            el: document.querySelector('#markdownedit'),
                            height: this.height,
                            initialValue: '',
                            initialEditType: 'wysiwyg',
                            hideModeSwitch: true,
                            language: "zh-CN",
                            events: {
                                change: function() {
                                    page.editContent = page.editorEntity.getMarkdown();
                                }
                            }
                        })
                        page.editorEntity.setMarkdown(page.editContent, true)
                    } else {
                        page.editorViewEntity =  toastui.Editor.factory({
                            el: document.querySelector('#markdownedit_viewer'),
                            viewer: true,
                            initialValue: page.editContent
                          });
                    }

                });


            },
            methods: {

            },

        })
    });
});

实际使用

代码语言:javascript
复制
 <common-markdowneditor v-model="form.docContent" ></common-markdowneditor>

后端集成

在把markdonw的内容保存到数据库后,同时同步生成本地markdown文件,为后续html展示做准备

代码语言:javascript
复制
    public void creatMarkdownFile(DocumentContentInfoDO entity) {
        if (entity.getDocClass() == DocEnum.DocClass.Markdown.get_value()) {
            try {
                //生成markdown文件
                String dicPath = "tempfiles/markdown/";
                String filePath = dicPath + entity.getDocGuid() + ".md";
                File dicInfo = new File(dicPath);
                if (!dicInfo.exists()) {
                    dicInfo.mkdirs();
                }
                File file = new File(filePath);
                if (file.exists()) {
                    file.delete();
                }
                file.createNewFile();
                BufferedWriter out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File(filePath)),"utf-8"));
                out.write(entity.getDocContent());
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
    }

文档显示

前端显示集成了docsify@4.js,通过动态的指定homepage主页markdown文件地址达到一个index.html页面根据文档标识显示不同内容的效果

代码语言:javascript
复制
<script>
    var showDocUrl = apiFrameUrl + "/foundation/documentinfo/getMarkdownUrl";
    var docTag = getUrlParam("docTag")
    $(function() {
        var data = {
            docTag: docTag,

        };
        JsonAjax_Sync(JSON.stringify(data), showDocUrl, function(result, status) {
            var mdFileUrl = GetRootPath() + result.data.obj;
            window.$docsify = {
                homepage: mdFileUrl
            }
        })
    })
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 表结构设计
  • 前端集成
  • 后端集成
  • 文档显示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档