위챗 마크다운 에디터: 간단하고 효율적인 위챗 그래픽 레이아웃 도구, 위챗 공개 번호에 기사를 붙여넣는 열쇠입니다.

2.3K 00

일반 소개

WeChat 마크다운 편집기(WeChat 마크다운 에디터)는 사용자가 아름다운 WeChat 게시물을 쉽게 작성할 수 있도록 고안된 매우 간결한 WeChat 그래픽 레이아웃 도구입니다. 이 에디터는 모든 기본 마크다운 구문을 지원하며 수학 공식, 머메이드 차트 렌더링, 코드 블록 강조 표시, 사용자 지정 테마 색상 및 CSS 스타일, 다중 이미지 업로드, 파일 가져오기 및 내보내기 등 다양한 기능을 제공합니다. 사용자는 기본 마크다운 구문만 익히면 간단한 스타일과 아름다운 레이아웃의 WeChat 그래픽 콘텐츠를 빠르게 생성할 수 있습니다. 이 프로젝트는 Vue3 개발을 기반으로 하며, 온라인 편집기 및 Docker 이미지 배포를 제공하여 사용자가 언제 어디서나 편리하게 편집하고 게시할 수 있습니다.

온라인 편집기직접 액세스 온라인 편집기 주소 어쩌면 대체 주소최상의 결과를 얻으려면 Chrome을 사용하는 것이 좋습니다.

微信Markdown编辑器：简洁高效的微信图文排版工具，一键粘贴文章到微信公众号

기능 목록

마크다운의 모든 기본 구문을 지원합니다.
수학 공식 및 머메이드 차트 렌더링
리치 코드 블록 강조 테마
사용자 정의 테마 색상 및 CSS 스타일
다중 이미지 업로드 기능
파일 가져오기 및 내보내기 기능
로컬 문서 관리 및 초안 자동 저장
여러 그래프 베드 구성 지원(예: GitHub, 알리클라우드, 텐센트 클라우드 등)
Docker 이미지 배포

도움말 사용

사용자 지정 업로드 로직

도구에서 사전 정의된 베드를 제공하지 않는 경우 업로드 로직을 사용자 지정할 수 있으므로, 예를 들어 공개 베드에 익숙하지 않고 자체 업로드 서비스를 사용하는 경우 유용합니다.

주어진 함수에서 업로드 코드를 변경하기만 하면 되며, 편의를 위해 사용할 수 있는 몇 가지 매개변수를 제공합니다:

샘플 코드:

const { file, util, okCb, errCb } = CUSTOM_ARG
const param = new FormData()
param.append(`file`, file)
util.axios
.post(`http://127.0.0.1:9000/upload`, param, {
headers: { 'Content-Type': `multipart/form-data` },
})
.then((res) => {
okCb(res.url)
})
.catch((err) => {
errCb(err)
})
// 提供的可用参数:
// CUSTOM_ARG = {
//   content, // 待上传图片的 base64
//   file, // 待上传图片的 file 对象
//   util: {
//     axios, // axios 实例
//     CryptoJS, // 加密库
//     OSS, // tiny-oss
//     COS, // cos-js-sdk-v5
//     Buffer, // buffer-from
//     uuidv4, // uuid
//     qiniu, // qiniu-js
//     tokenTools, // 一些编码转换函数
//     getDir, // 获取 年/月/日 形式的目录
//     getDateFilename, // 根据文件名获取它以 时间戳+uuid 的形式
//   },
//   okCb: resolve, // 重要！上传成功后给此回调传 url 即可
//   errCb: reject, // 上传失败调用的函数
// }

다른 타사 그래픽 베드에서 작동하는 업로드 코드를 만든 경우 이를 공유할 수 있습니다.

개발 및 배포 방법

# 安装依赖
npm i

# 启动开发模式
npm start

# 部署在 /md 目录
npm run build
# 访问 http://127.0.0.1:9000/md

# 部署在根目录
npm run build:h5-netlify
# 访问 http://127.0.0.1:9000/

비공개 서비스를 신속하게 구축

방법 1. npm cli 사용

[](https://github.com/doocs/md#%E6%96%B9%E5%BC%8F-1-%E4%BD%BF%E7%94%A8-npm-cli)

npm cli를 사용하면 자신만의 WeChat 마크다운 에디터를 쉽게 구축할 수 있습니다.

# 安装
npm i -g @doocs/md-cli

# 启动
md-cli

# 访问
open http://127.0.0.1:8800/md/

# 启动并指定端口
md-cli port=8899

# 访问
open http://127.0.0.1:8899/md/

md-cli는 다음과 같은 명령줄 인수를 지원합니다:

port 포트 번호를 지정합니다(기본값은 8800). 포트가 이미 사용 중이면 새 포트가 무작위로 사용됩니다.
spaceId dcloud 서비스 공간 구성
clientSecret dcloud 서비스 공간 구성

방법 2. Docker 이미지 사용

Docker 사용자라면 명령 한 번으로 완전히 소유하고 비공개로 실행되는 인스턴스를 직접 시작할 수도 있습니다.

docker run -d -p 8080:80 doocs/md:latest

컨테이너가 실행되면 브라우저를 열고 http://localhost:8080 을 방문합니다.

사용 가이드라인

기본 조작::
- 온라인 편집기 또는 로컬 인스턴스를 열고 편집 화면으로 이동합니다.
- 편집 영역에 마크다운 구문을 입력하고 효과를 실시간으로 미리 볼 수 있습니다.
- 도구 모음의 버튼을 사용하여 굵게, 이탤릭체, 목록 등의 서식을 지정할 수 있습니다.
고급 기능::
- 공식LaTeX 구문을 사용하여 다음과 같은 수학 공식을 입력합니다. $E=mc^2$ .
- 인어 차트: 머메이드 구문을 입력하여 다음과 같이 순서도, 시퀀스 다이어그램 등을 만들 수 있습니다:
```
 graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
- 코드 블록 강조 표시: 삼중 따옴표와 언어 이름을 사용하여 코드 블록을 만듭니다(예::
```
 def hello_world():
print("Hello, world!")
```
- 사용자 지정 스타일설정에서 사용자 정의 CSS 스타일을 추가하여 글의 모양을 조정합니다.
- 다중 이미지 업로드도구 모음에서 이미지 버튼을 클릭하여 업로드할 이미지를 여러 개 선택하고 이미지 베드를 구성합니다.
- 파일 가져오기 및 내보내기파일 메뉴의 가져오기 및 내보내기 기능을 사용하여 문서 파일을 편리하게 관리할 수 있습니다.
맵 베드 구성::
- GitHub 투펠로리포지토리 구성 및 토큰 매개 변수에 대한 자세한 단계는 GitHub 설명서를 참조하세요.
- 알리윤 OSS액세스 키 ID, 액세스 키 비밀, 버킷 및 지역 매개 변수를 구성합니다. 자세한 단계는 AliCloud 설명서를 참조하세요.
- 텐센트 클라우드 COSSecretId, SecretKey, Bucket 및 Region 매개변수 구성, 자세한 단계는 Tencent Cloud 설명서를 참조하세요.
- 기타 그래픽 베드필요에 따라 세븐불스 클라우드, 미니오, 클라우드플레어 R2 등과 같은 다른 그래프 베드를 구성합니다.