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
相关文章
|
前端开发
RowFish v2.0.1 已经发布-一款集合教程,文档和导航的多功能开源博客系统
RowFish v2.0.1 已经发布-一款集合教程,文档和导航的多功能开源博客系统
104 0
|
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 - 护身法
616 1
zyplayer-doc1.1.2发布,一款开源好用的WIKI文档管理系统
|
数据采集 API Python
自制简易谷歌翻译器详解(附完整UI界面及代码文件)
自制简易谷歌翻译器详解(附完整UI界面及代码文件)
374 1
|
开发工具 数据安全/隐私保护 git
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
|
XML JSON 自然语言处理
SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
181 0
SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
|
文字识别 搜索推荐 数据可视化
|
存储 Web App开发 数据可视化
在线协作文档综合评测 :Notion、FlowUs、Wolai、飞书、语雀、微软 Office、谷歌文档、金山文档、腾讯文档、石墨文档、Dropbox Paper、坚果云文档、百度网盘在线文档
在线协作文档综合评测 :Notion、FlowUs、Wolai、飞书、语雀、微软 Office、谷歌文档、金山文档、腾讯文档、石墨文档、Dropbox Paper、坚果云文档、百度网盘在线文档 如今,在线协作文档已经成为效率办公的必备产品。然而,面临各种各样的在线文档产品,应该如何选择呢?
3036 0
在线协作文档综合评测 :Notion、FlowUs、Wolai、飞书、语雀、微软 Office、谷歌文档、金山文档、腾讯文档、石墨文档、Dropbox Paper、坚果云文档、百度网盘在线文档
|
Web App开发 Kubernetes JavaScript
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
近日,微软上线了一个新的开源网站。这不是微软唯一的开源网站,但却代表了新的起点。网友表示:这次真的拥抱开源了!从「恨」到「爱」,微软与开源有着一段长达30年的故事。
162 0
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得

热门文章

最新文章