【开源项目】私有化部署一个公众号markdown编辑工具

点击上方“AI搞事情”关注我们

---

简介

mdnice是一款由墨滴社区开发的强大的markdown编辑软件，拥有良好的兼容性、海量主题风格样式、免费的图床，具体可以见官网并体验：https://product.mdnice.com/，只是普通用户容量有限：文件夹容量 10、 文章容量100、图片容量 100.00MB，不然就得付费买会员了。

公众号大部分文章都是通过mdnice编辑的，包括本文，因为它支持一键复制到公众号及知乎、掘金等各类博客，且还有插件直接支持在公众号后台进行文章编辑。更重要的是，作者将代码进行了开源，虽然23年后面更新的没有继续开源，但是私有化部署后，把它作为一个markdown编辑工具使用完全够了，代码首页简介：

GitHub：https://github.com/mdnice/markdown-nice

Gitee：https://gitee.com/zhning12/markdown-nice.git

简介

• 支持自定义样式的 Markdown 编辑器

• 支持微信公众号排版

• 支持知乎、稀土掘金、博客园和 CSDN 等一系列平台

• 内容和自定义样式浏览器中实时保存

• 支持上传图片、脚注、公式

• 欢迎在线使用

示例

• 橙心：终于等到你，公众号排版神器

• 姹紫：JavaScript 数据结构与算法之美

• 绿意：前端硬核面试专题之 CSS 55 问

• 红绯：日常 | 我用什么工具写作？

• Wechat-Format：Markdown Nice新特性：阿里云图床

• 科技蓝：2019 前端秋季社招面试经历总结（二年多经验）

• 兰青：兰青 Demo

部署

1. 拉取代码

git clone https://github.com/mdnice/markdown-nice.git

目录结构如下：

2. 本地调试

环境要求：

Node.js v18.17.1、npm@10.8.0

版本不对报错：

npm ERR! engine Not compatible with your version of node/npm: npm@10.8.2 npm ERR! notsup Not compatible with your version of node/npm: npm@10.8.2 npm ERR! notsup Required:"node":"^18.17.0| >=20.5.0"npm ERR! notsup Actual:   {"npm":"8.0.0","node":"v16.11.1"}

阿里云镜像下载node：https://registry.npmmirror.com/binary.html?path=node/latest-v18.x/

解压后，添加到环境变量，测试

> node -v
v18.17.0

设置淘宝源，安装依赖包：

npm config set registry  https://registry.npmmirror.com
npm install

运行

npm run start 或者 npm start

默认端口3000，页面效果，但是点击主题，样式没有生效，需要改代码添加本地主题

在项目的src\json目录下添加localThemeList.json用于定义主题，文件地址：

https://gitee.com/Glory1020/markdown-nice/blob/master/src/json/localThemeList.json

然后修改项目的src\component\MenuLeft\Theme.js文件，主要是导入localThemeList.json、并将获取远程主题改为从本地获取，然后选择主题就可以看到效果了。

import localThemesData from "../../json/localThemeList.json"

.....

      } else {
        remoteThemelist = localThemesData
        // // 否则默认主题    
        // response = await axios.get(THEME_API());  
        // if (!response.data.success) {  
        //   throw new Error();  
        // }  
        // remoteThemelist = response.data.data.themeList;  
      }

至此，我们就跑通了整个代码，便可以进行构建部署或者二次开发了。

3. 构建部署

• 打包

npm run build

会在项目目录下产生build文件夹，里面是编译好的用于部署的静态资源

• docker镜像制作

docker pull nginx:latest

• 运行容器

docker run --name nginx-mdnice -p 8080:80 -v /markdown-nice/build:/usr/share/nginx/html -d nginx:latest

也可以用docker-compose部署容器

version: '3'
services:
  mdnice: 
    image: nginx:latest
    ports:
      - "3000:80"
    networks: 
      - mynetwork
    environment:
      LANG: C.UTF-8
      LC_ALL: C.UTF-8
      LANGUAGE: C.UTF-8
      TZ: Asia/Shanghai
    volumes:
      - ./:/usr/share/nginx/html
    restart: always
    container_name: mdnice
    stdin_open: true
    tty: true

networks:
  mynetwork:

然后就可以访问了，若绑定域名就可以使用域名访问，免费好用的公众号文章编辑器就部署好了。另外图片的处理可以参考1。

4. 参考

1. Markdown文章编写神器MdNice，如何私有化部署https://segmentfault.com/a/1190000044365170

2. 博客写作神器：介绍与部署Markdown Nicehttps://blog.csdn.net/weixin_44002151/article/details/132505674

3. 自己搭建一个md编辑工具https://www.cnblogs.com/junyao-ye/articles/17674615.html

4. 本地及 Docker 部署 MdNice 开源项目

   https://juejin.cn/post/7034714494374772773

长按二维码关注我们

有趣的灵魂在等你