md
v1.6.0
Markdown 문서는 자동으로 WeChat 사진 및 텍스트로 실시간으로 렌더링되므로 WeChat 기사 레이아웃에 대해 더 이상 걱정하지 않습니다! 기본 Markdown 문법을 아는 한 간결한 스타일과 아름다운 외관으로 WeChat 사진과 텍스트를 만들 수 있습니다.
참고 : 최상의 결과 인 Chrome 브라우저를 사용하는 것이 좋습니다.
기존 오픈 소스 Wechat Markdown 편집기에는 복잡한 스타일이 있으며 개인적인 미학적 요구를 충족시키지 못합니다. 기사를 입력하는 데 사용될 때 종종 시간이 많이 걸리고 노동 집약적 인 직접 변경해야하므로 2 차 개발을 시작했습니다.
친구들은 언제든지 PR을 제출 하여이 Wechat Markdown 편집자를 개선 할 수 있습니다! 새로운 아이디어가 있다면 토론 토론 영역에서 피드백에도 오신 것을 환영합니다.
참고 : 우리 프로젝트의 최신 버전은 vue3를 기반으로 개발되었습니다. vue2를 기반으로 한 이전 버전은 더 이상 유지 관리되지 않습니다. vue2 버전이 필요한 경우 1.x 브랜치로 전환하십시오.
| 틀 | 그림 침대 | 사용할 때 구성해야합니까? | 주목 |
|---|---|---|---|
| 1 | 기본 | 아니요 | - |
| 2 | github | Repo 및 Token 매개 변수를 구성하십시오 | Github 토큰을 얻는 방법? |
| 3 | 알리바바 클라우드 | AccessKey ID , AccessKey Secret , Bucket , Region 매개 변수 구성 | 알리바바 클라우드 OSS를 사용하는 방법? |
| 4 | Tencent Cloud | SecretId , SecretKey , Bucket , Region 매개 변수를 구성하십시오 | Tencent Cloud Cos를 사용하는 방법? |
| 5 | qiniu 클라우드 | AccessKey , SecretKey , Bucket , Domain , Region 매개 변수 구성 | Qiniu Cloud Kodo를 사용하는 방법? |
| 6 | 미니오 | Endpoint , Port , UseSSL , Bucket , AccessKey , SecretKey 파라미터 구성 | Minio를 사용하는 방법? |
| 7 | 공식 계정 | appID , appsecret ,代理域名매개 변수를 구성하십시오 | 공식 계정 개발자 ID 비밀번호를 얻는 방법? |
| 8 | CloudFlare R2 | AccountId , AccessKey , SecretKey , Bucket , Domain 매개 변수 구성 | S3 API를 사용하여 R2를 작동하는 방법 |
| 9 | 사용자 정의 업로드 | 예 | 업로드를 사용자 정의하는 방법은 무엇입니까? |
도구에 사전 정의 된 그래프 베드가 제공되지 않은 경우 업로드 로직을 사용자 정의하면됩니다. 예를 들어 공개 그래프 베드를 사용하는 것이 편리하지 않고 대신 자신의 업로드 서비스를 사용하는 경우에 매우 유용합니다.
주어진 기능에서 업로드 코드 만 변경하면됩니다. 편의를 위해이 기능은 사용할 수있는 몇 가지 매개 변수를 제공합니다.
샘플 코드 :
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/ NPM CLI를 통해 자신의 WeChat Markdown 편집기를 쉽게 구축 할 수 있습니다.
# 安装
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 서비스 공간 구성Docker 사용자 인 경우 명령을 사용하여 귀하에게 속한 완전히 개인 인스턴스를 시작할 수도 있습니다.
docker run -d -p 8080:80 doocs/md:latest컨테이너가 실행되면 브라우저를 열고 http : // localhost : 8080을 방문하십시오.
이 프로젝트의 Docker 이미지에 대한 자세한 정보는 https://github.com/doocs/docker-md를 참조하십시오.
참고 : 기사 레이아웃 에이 Markdown 편집기를 사용 하고이 프로젝트 readme에 공식 계정을 표시하려면 #5에 메시지를 남겨주세요.
