เอกสาร Markdown จะแสดงผลโดยอัตโนมัติเป็นรูปภาพและข้อความ WeChat แบบเรียลไทม์เพื่อที่คุณจะได้ไม่ต้องกังวลเกี่ยวกับเค้าโครงบทความ WeChat อีกต่อไป! ตราบใดที่คุณรู้ไวยากรณ์มาร์เดอร์เดอร์พื้นฐานคุณสามารถสร้างภาพและข้อความที่มีสไตล์ที่กระชับและรูปลักษณ์ที่สวยงาม
หมายเหตุ: ขอแนะนำให้ใช้เบราว์เซอร์ Chrome ซึ่งเป็นผลลัพธ์ที่ดีที่สุด
ตัวแก้ไข Markdown WeChat Open Source ที่มีอยู่มีสไตล์ที่ซับซ้อนและไม่ตรงกับความต้องการด้านสุนทรียภาพส่วนตัวของฉัน เมื่อฉันใช้พวกเขาในการพิมพ์บทความฉันมักจะต้องทำการเปลี่ยนแปลงด้วยตัวเองซึ่งใช้เวลานานและใช้แรงงานมากดังนั้นฉันจึงเริ่มพัฒนารอง
เพื่อน ๆ ยินดีที่จะส่ง PR ได้ตลอดเวลาเพื่อให้ตัวแก้ไข WeChat Markdown นี้ดีขึ้น! หากคุณมีแนวคิดใหม่คุณสามารถตอบรับข้อเสนอแนะในพื้นที่สนทนาอภิปราย
หมายเหตุ: โครงการเวอร์ชันล่าสุดของเราได้รับการพัฒนาตาม Vue3 รุ่นเก่าที่ใช้ Vue2 ไม่ได้รับการดูแลอีกต่อไป หากคุณต้องการเวอร์ชัน Vue2 โปรดเปลี่ยนไปใช้สาขา 1.x
| - | เตียงรูปภาพ | จำเป็นต้องกำหนดค่าเมื่อใช้งาน | คำพูด |
|---|---|---|---|
| 1 | ค่าเริ่มต้น | เลขที่ | - |
| 2 | คนอื่น ๆ | กำหนดค่าพารามิเตอร์ Repo และ Token | จะรับโทเค็น GitHub ได้อย่างไร? |
| 3 | Alibaba Cloud | กำหนดค่า AccessKey ID , AccessKey Secret , Bucket , Parameters Region | จะใช้ Alibaba Cloud OSS ได้อย่างไร? |
| 4 | เมฆ tencent | กำหนด SecretId , SecretKey , Bucket , Parameters 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 | วิธีใช้งาน R2 โดยใช้ S3 API |
| 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 dcloudclientSecret dcloud การกำหนดค่าพื้นที่บริการหากคุณเป็นผู้ใช้ Docker คุณสามารถใช้คำสั่งเพื่อเริ่มต้นอินสแตนซ์ส่วนตัวที่เป็นของคุณได้
docker run -d -p 8080:80 doocs/md:latestหลังจากที่คอนเทนเนอร์เปิดใช้งานให้เปิดเบราว์เซอร์และเยี่ยมชม http: // localhost: 8080
สำหรับข้อมูลรายละเอียดเพิ่มเติมเกี่ยวกับรูปภาพ Docker ในโครงการนี้คุณสามารถติดตาม https://github.com/doocs/docker-md
หมายเหตุ: หากคุณใช้ตัวแก้ไข Markdown นี้สำหรับเค้าโครงบทความและต้องการแสดงบัญชีอย่างเป็นทางการของคุณในโครงการนี้โปรดฝากข้อความไว้ใน #5