mm-wiki超好用的开源文档系统

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: mm-wiki超好用的开源文档系统

前言


当前市场上众多的优秀的文档系统百家争鸣,但是能够完全开源支持私有化部署的却屈指可数。目前个人了解到的体验较好的有MrDoc和mm-wiki。


今天我们就一起来了解下mm-wiki的部署和使用。


更多开发工具参考:开发工具大全


依赖


mm-wiki的安装是需要mysql数据的,我们需要首先安装mysql-server。我们可以将mysql和mm-wiki安装在同一台服务器上(也可以分布在两台服务器)。


记得安装完修改root的密码。


mysqladmin password 123456
复制代码


部署mm-wiki


mm-wiki支持windows、Linux、Docker等多种部署方式,本次我们选择Linux虚拟机进行部署。


下载mm-wiki安装包


mm-wiki官方地址:Gitee | Github


我们在mm-wiki的Gitee项目首页,选择最新的发行版v0.2.1下载即可。


网络异常,图片无法展示
|


下载后我们将得到mm-wiki的安装包。


上传mm-wiki安装包到服务器


首先我们在服务器的/home路径下创建一个名为mmwk的目录。


然后使用SFTP工具(Xshell、MobaXterm等SSH工具)将mm-wiki的安装包上传到服务器上。


网络异常,图片无法展示
|


启动mm-wiki安装服务


首先我们解压mm-wiki的安装包。


tar -zxvf mm-wiki-v0.2.1-linux-amd64.tar.gz
复制代码


然后进入install目录,执行./install命令,启动安装程序。


网络异常,图片无法展示
|


最后我们在浏览器访问服务器ip+8090端口即可访问安装页面。


网络异常,图片无法展示
|


安装mm-wiki


我们点击运行安装向导开始安装mm-wiki。


  1. 勾选同意协议,下一步
  2. 下一步
  3. 修改服务监听地址和端口,输入文档保存目录,下一步
  4. 配置数据库的连接信息(密码就是前面重置的)和超级管理员,下一步
  5. 点击开始安装,下一步
  6. 耐心等待,安装完成


启动mm-wiki


安装完成后,系统会提示我们启动命令,我们在/home/mmwk路径下执行启动命令即可。


网络异常,图片无法展示
|


启动mm-wiki,让其后台运行。


网络异常,图片无法展示
|


我们在浏览器访问服务器ip+8080端口即可打开mm-wiki登录页面。


网络异常,图片无法展示
|


我们使用安装时候配置的超级管理员进行登录。


网络异常,图片无法展示
|


配置mm-wiki


更改mm-wiki的系统信息


我们在系统-配置管理-全局配置中可以对系统的名称、标题、描述等进行修改。


网络异常,图片无法展示
|


创建空间&页面


我们在系统-空间管理-添加空间即可添加一个新的空间。


网络异常,图片无法展示
|


然后我们点击空间-测试空间,即可开始在测试空间进行文档写作了。


网络异常,图片无法展示
|


更多功能请自行探索。比如用户,权限等。


完善


通过简单的体验,我发现一个问题,就是mm-wiki的编辑器不支持从粘贴板上传图片,这就很麻烦了,我们需要将图片保存到本地后才能使用编辑器中的上传图片按钮进行选择上传。那有什么办法可以解决呢?通过查看mm-wiki的issue,我发现已经有同学解决了这个问题,我们就直接拿来使用。


1、创建image-handle-paste.js文件


我们需要在项目的static/plugins/editor.md/plugins/image-handle-paste/路径下创建image-handle-paste.js文件,然后向其中输入以下代码:


/*!
 * editormd图片粘贴上传插件
 *
 * @file   image-handle-paste.js
 * @author codehui
 * @date   2018-11-07
 * @link   https://www.codehui.net
 */
(function() {
    var factory = function (exports) {
        var $            = jQuery;           // if using module loader(Require.js/Sea.js).
        var pluginName   = "image-handle-paste";  // 定义插件名称
        //图片粘贴上传方法
        exports.fn.imagePaste = function() {
            var _this       = this;
            var cm          = _this.cm;
            var settings    = _this.settings;
            var editor      = _this.editor;
            var classPrefix = _this.classPrefix;
            var id       = _this.id;
            if(!settings.imageUpload || !settings.imageUploadURL){
                console.log('你还未开启图片上传或者没有配置上传地址');
                return false;
            }
            //监听粘贴板事件
            $('#' + id).on('paste', function (e) {
                var items = (e.clipboardData || e.originalEvent.clipboardData).items;
                //判断图片类型
                if (items && items[0].type.indexOf('image') > -1) {
                    var file = items[0].getAsFile();
                    /*生成blob
                    var blobImg = URL.createObjectURL(file);
                    */
                    /*base64
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        var base64Img = e.target.result //图片的base64
                    }
                    */
                    // 创建FormData对象进行ajax上传
                    var forms = new FormData(document.forms[0]); //Filename
                    forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件
                    _this.executePlugin("imageDialog", "image-dialog/image-dialog");
                    _ajax(settings.imageUploadURL, forms, function(ret){
                        if(ret.success == 1){
                            $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
                            //cm.replaceSelection("![](" + ret.url  + ")");
                        }
                        console.log(ret.message);
                    })
                }
            })
        };
        // ajax上传图片 可自行处理
        var _ajax = function(url, data, callback) {
            $.ajax({
                "type": 'post',
                "cache": false,
                "url": url,
                "data": data,
                "dateType": "json",
                "processData": false,
                "contentType": false,
                "mimeType": "multipart/form-data",
                success: function(ret){
                    callback(JSON.parse(ret));
                },
                error: function (err){
                    console.log('请求失败')
                }
            })
        }
    };
    // CommonJS/Node.js
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
    { 
        module.exports = factory;
    }
    else if (typeof define === "function")  // AMD/CMD/Sea.js
    {
        if (define.amd) { // for Require.js
            define(["editormd"], function(editormd) {
                factory(editormd);
            });
        } else { // for Sea.js
            define(function(require) {
                var editormd = require("./../../editormd");
                factory(editormd);
            });
        }
    } 
    else
    {
        factory(window.editormd);
    }
})();
复制代码


2、修改document_page.html文件


我们需要向views/layouts/document_page.html文件中的第47行添加如下内容:


<script type="text/javascript" src="/static/plugins/editor.md/plugins/image-handle-paste/image-handle-paste.js"></script>
复制代码


3、修改views/page/edit.html文件


在views/page/edit.html文件的第116行添加如下内容:


editor.imagePaste();
复制代码


4、重启mm-wiki服务


我们停止mm-wiki服务,重新启动即可。

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
6月前
|
JSON 前端开发 JavaScript
Docusaurus框架——快速搭建markdown文档站点介绍sora
Docusaurus框架——快速搭建markdown文档站点介绍sora
176 0
|
6月前
|
Android开发
我用过的笔记 Markdown Wiki 工具
我用过的笔记 Markdown Wiki 工具
|
3月前
|
存储 自然语言处理 前端开发
Star 6.9k!开源的全能Markdown格式文件提取器:MinerU
总的来说,MinerU是一款非常实用且强大的数据提取工具。无论你是开发者、互联网从业者,还是有具体需求的新人小白,MinerU都能极大地提升你的工作效率,让你专注于更有价值的工作。 最后,如果你对MinerU感兴趣,不妨亲自尝试一下,相信你会爱上这款全能的Markdown格式文件提取器。
|
6月前
|
存储 Docker 容器
Star 8.3k!强烈推荐这款强大的 PDF 文件处理工具,PDF处理它全包了!
Star 8.3k!强烈推荐这款强大的 PDF 文件处理工具,PDF处理它全包了!
136 1
|
6月前
|
XML 移动开发 开发工具
使用markdown,knitr和pandoc在R语言中编写可重现的报告
使用markdown,knitr和pandoc在R语言中编写可重现的报告
|
SQL 存储 Oracle
zyplayer-doc1.1.2发布,一款开源好用的WIKI文档管理系统
zyplayer-doc是一款现代化的适合团队和个人使用的WIKI文档管理工具,同时还包含数据库文档、Api接口文档 在线文档:zyplayer-doc使用文档 体验地址:http://doc.zyplayer.com 开源地址:https://gitee.com/zyplayer/zyplayer-doc 本此更新参与的社区贡献者: - diantu - Mdai - 〝走走停停 - handy - 护身法
603 1
zyplayer-doc1.1.2发布,一款开源好用的WIKI文档管理系统
|
开发工具 C++ iOS开发
搭建 Markdown 强大写作环境-VS Code
搭建 Markdown 强大写作环境-VS Code
搭建 Markdown 强大写作环境-VS Code
|
开发工具 数据安全/隐私保护 git
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
自行设计开源的pdf转word软件(python开发设计)
自行设计开源的pdf转word软件(python开发设计)
自行设计开源的pdf转word软件(python开发设计)

相关实验场景

更多