当前位置：首页 > news >正文

使用Docker搭建StackEdit在线MarkDown编辑器

news 2025/8/29 8:20:43

1、安装Docker

# 安装Docker
https://docs.docker.com/get-docker/# 安装Docker Compose
https://docs.docker.com/compose/install/# CentOS安装Docker
https://mp.weixin.qq.com/s/nHNPbCmdQs3E5x1QBP-ueA

2、安装StackEdit

2.1、方式1

详见：
https://benweet.github.io/stackedit.js
https://github.com/benweet/stackedit.js

创建目录；

mkdir stackedit

切换目录：

cd stackedit

创建index.js文件：

/* https://benweet.github.io/stackedit.js/index.js */
/* eslint-disable prefer-arrow-callback, comma-dangle */
/* global Stackedit */function makeEditButton(el) {const div = document.createElement('div');div.className = 'stackedit-button-wrapper';div.innerHTML = '<a href="javascript:void(0)"><img src="icon.svg">Edit with StackEdit</a>';el.parentNode.insertBefore(div, el.nextSibling);return div.getElementsByTagName('a')[0];
}const textareaEl = document.querySelector('textarea');
makeEditButton(textareaEl).addEventListener('click', function onClick() {const stackedit = new Stackedit();stackedit.on('fileChange', function onFileChange(file) {textareaEl.value = file.content.text;});stackedit.openFile({name: 'Markdown with StackEdit',content: {text: textareaEl.value}});});const htmlEl = document.querySelector('.html');
let markdown = 'Hello **Markdown** writer!';function doOpen(background) {const stackedit = new Stackedit();stackedit.on('fileChange', function onFileChange(file) {markdown = file.content.text;htmlEl.innerHTML = file.content.html;});stackedit.openFile({name: 'HTML with StackEdit',content: {text: markdown}}, background);
}doOpen(true);
makeEditButton(htmlEl).addEventListener('click', function onClick() {doOpen(false);});

创建index.html文件：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>stackedit.js</title>
</head><body><textarea></textarea>
</body><script src="https://unpkg.com/stackedit-js@1.0.7/docs/lib/stackedit.min.js"></script>
<script src="index.js"></script>
</html>

运行容器：

docker run -it -d --name stackedit -p 8080:80 nginx:latest

查看容器列表：

docker ps

复制文件到容器：

# 备份：
docker exec -it stackedit \cp /usr/share/nginx/html/index.html \/usr/share/nginx/html/index.html-bak # 复制文件到容器：
docker cp index.js stackedit:/usr/share/nginx/html
docker cp index.html stackedit:/usr/share/nginx/html

停止容器；

docker stop stackedit

删除容器：

docker rm stackedit

删除镜像：

docker rmi nginx:latest

2.2、方式2

详见：https://github.com/benweet/stackedit

拉取镜像：

docker pull benweet/stackedit:latest

运行容器：

docker run -it -d --name stackedit -p 8080:8080 benweet/stackedit:latest

查看容器列表：

docker ps

停止容器：

docker stop stackedit

删除容器：

docker rm stackedit

删除镜像：

docker rmi benweet/stackedit:latest

3、浏览器访问

假设当前ip为192.168.186.128
浏览器访问：http://192.168.186.128:8080

首页：

点击“START WRITING”：

4、详见

https://stackedit.io
https://github.com/benweet/stackedit
https://benweet.github.io/stackedit.js
https://github.com/benweet/stackedit.js
https://mp.weixin.qq.com/s/OtqnXgnOwrA7eYHkaPGrwQ

查看全文

http://www.dtcms.com/a/355365.html