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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 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服务,重新启动即可。

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
8月前
|
Android开发
我用过的笔记 Markdown Wiki 工具
我用过的笔记 Markdown Wiki 工具
|
3月前
|
Ubuntu 安全 Linux
|
5月前
|
Linux Shell Android开发
40K+Star的开源免费美化命令行工具
40K+Star的开源免费美化命令行工具
|
安全 Java API
开源 WIKI 知识库 zyplayer-doc 的介绍和其商业化模式
zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具,提供在线化的知识库管理功能,专为私有化部署而设计,最大程度上保证企业或个人的数据安全,可以完全以内网的方式来部署使用它。
576 4
|
8月前
|
存储 JavaScript API
《VitePress 简易速速上手小册》第7章 高级功能与动态内容(2024 最新版)(上)
《VitePress 简易速速上手小册》第7章 高级功能与动态内容(2024 最新版)
324 2
|
8月前
|
存储 缓存 自然语言处理
《VitePress 简易速速上手小册》第7章 高级功能与动态内容(2024 最新版)(下)
《VitePress 简易速速上手小册》第7章 高级功能与动态内容(2024 最新版)
189 1
|
前端开发
RowFish v2.0.1 已经发布-一款集合教程,文档和导航的多功能开源博客系统
RowFish v2.0.1 已经发布-一款集合教程,文档和导航的多功能开源博客系统
107 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 - 护身法
625 1
zyplayer-doc1.1.2发布,一款开源好用的WIKI文档管理系统
|
JavaScript Java 程序员
为什么人家的开源项目文档如此炫酷?原来用的是这款神器
VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。 使用VuePress具有如下优点: 使用Markdown来写文章,程序员写起来顺手,配置网站非常简洁。 我们可以在Markdown中使用Vue组件,如果你熟悉Vue的话会非常方便。 打包网站时会为每个页面预渲染生成静态的HTML,性能好,也有利于SEO。
秒建炫酷的开源项目文档,这款神器用起来够优雅
学习过我的开源项目mall的朋友应该知道,我有一个使用Docsify 搭建的项目文档网站。使用Docsify搭建文档网站虽然简单,但是缺少分类、标签、SEO这类功能,随着文档越来越多,查找起来有点不方便!今天给大家推荐一个炫酷的文档主题vuepress-theme-hope,用来搭建项目文档网站正合适! vuepress-theme-hope 简介 vuepress-theme-hope是一个具有强大功能的VuePress主题,为Markdown添加了更多增强语法,可用于搭建项目文档和博客网站。支持分类和标签功能,可以让你的文档更加结构化!内置多种插件,功能强大,值得一试!

热门文章

最新文章

相关实验场景

更多