背景

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

表结构设计

文档信息表

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;

文档内容表

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

<div v-if="!readonly" id="markdownedit"></div>
<div v-else id="markdownedit_viewer">  </div>

index.js

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: {

            },

        })
    });
});

实际使用

 <common-markdowneditor v-model="form.docContent" ></common-markdowneditor>

后端集成

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

    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页面根据文档标识显示不同内容的效果

<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>