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

本文涉及的产品
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
云数据库 RDS MySQL Serverless,价值2615元额度,1个月
简介: 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服务,重新启动即可。

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3月前
|
Android开发
我用过的笔记 Markdown Wiki 工具
我用过的笔记 Markdown Wiki 工具
|
消息中间件 缓存 监控
Sentry 开发人员文档(中文手册,二次开发指南)
Sentry 开发人员文档(中文手册,二次开发指南)
2396 0
Sentry 开发人员文档(中文手册,二次开发指南)
|
6月前
|
安全 Java API
开源 WIKI 知识库 zyplayer-doc 的介绍和其商业化模式
zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具,提供在线化的知识库管理功能,专为私有化部署而设计,最大程度上保证企业或个人的数据安全,可以完全以内网的方式来部署使用它。
376 4
|
7月前
|
Cloud Native API Go
开源项目的文档:为什么它如此重要?
开源项目的文档:为什么它如此重要?
61 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 - 护身法
462 1
zyplayer-doc1.1.2发布,一款开源好用的WIKI文档管理系统
|
JSON 数据格式 开发者
用gitbook写一篇开源文档并不难
如何基于 gitbook 搭建文档站点,不涉及开源文档编写规范。
207 0
|
开发工具 数据安全/隐私保护 git
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
|
Android开发 UED 开发者
Material Design 非官方中文指导手册
今年 6 月 26 日 I/O 2014 开发者大会,Google 发布了他们的全新设计语言「Material Design」,将会成为统一 Android Mobile、Android Table、Desktop 等平台的设计语言规范,对从业人员意义重大。由于原文为英文,对于广大的国内设计师阅读起来比较困难,于是有热心的童鞋整合了国内的翻译。
336 0
Material Design 非官方中文指导手册
|
存储 安全 搜索推荐
为什么企业需要Wiki的111个原因
原作者:Martin Seibert Martin Seibert在德国SEIBERT MEDIA公司担任CEO职务,是企业Wiki和公司沟通方面的专家。
2410 0