Редактор WeChat Markdown: простые и эффективные инструменты для графической верстки WeChat, ключ для вставки статьи в публичный номер WeChat

Общее введение

WeChat Markdown Editor (редактор WeChat Markdown) - это очень лаконичный инструмент для графической верстки WeChat, призванный помочь пользователям легко создавать красивые посты в WeChat. Редактор поддерживает весь базовый синтаксис Markdown и предоставляет богатые возможности, такие как математические формулы, рендеринг диаграмм Mermaid, подсветка блоков кода, пользовательские цвета темы и стили CSS, загрузка нескольких изображений, импорт и экспорт файлов и многое другое. Пользователям достаточно освоить базовый синтаксис Markdown, и вы сможете быстро генерировать простой стиль, красиво оформлять графический контент WeChat. Проект основан на разработке Vue3, обеспечивающей онлайн-редактор и развертывание Docker-образов, что удобно для пользователей, которые могут редактировать и публиковать в любое время и в любом месте.

Онлайн-редактор: Прямой доступ Адрес онлайн-редактора возможно альтернативный адресМы рекомендуем использовать Chrome для достижения наилучших результатов.

 

Список функций

• Поддерживает весь основной синтаксис Markdown
• Математические формулы и построение диаграмм русалок
• Тема для выделения блоков богатого кода
• Пользовательские цвета темы и стили CSS
• Функция загрузки нескольких изображений
• Функция импорта и экспорта файлов
• Локальное управление статьями и автоматическое сохранение черновиков
• Поддержка нескольких конфигураций граф-хранилищ (например, GitHub, AliCloud, Tencent Cloud и т. д.).
• Развертывание образов 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 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

Способ 2. Использование образов Docker

Если вы являетесь пользователем Docker, вы также можете просто использовать одну команду для запуска полностью принадлежащего вам частного экземпляра.

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

Когда контейнер будет запущен, откройте браузер и посетите сайт http://localhost:8080.

 

Руководство по использованию

1. базовая операция::
   • Откройте онлайн-редактор или локальный экземпляр и перейдите на экран редактирования.
   • Введите синтаксис Markdown в области редактирования и просматривайте результаты в режиме реального времени.
   • Используйте кнопки на панели инструментов для форматирования: жирный шрифт, курсив, списки и т. д.
2. Дополнительные возможности::
   • формула: Используйте синтаксис LaTeX для ввода математических формул, например $E=mc^2$.
   • Диаграмма русалки: Введите синтаксис Mermaid для создания блок-схем, диаграмм последовательности и т. д., например:

    graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
   

   • Выделение блоков кода: Создавайте блоки кода, используя тройные кавычки плюс название языка, например:

    def hello_world():
   print("Hello, world!")
   

   • Пользовательские стили: Добавьте пользовательские стили CSS в Настройки, чтобы настроить внешний вид постов.
   • Загрузка нескольких изображений: Нажмите кнопку Изображение на панели инструментов, чтобы выбрать несколько изображений для загрузки и настроить кровать для изображений.
   • Импорт и экспорт файлов: Удобное управление файлами статей с помощью функции импорта и экспорта в меню "Файл".
3. Конфигурация кровати с картой::
   • GitHub Tupelo: Настройте репозиторий и Токен см. в документации GitHub.
   • Алиюн ОСС: Настройте параметры AccessKey ID, AccessKey Secret, Bucket и Region, подробные шаги см. в документации AliCloud.
   • Tencent Cloud COS: Настройте параметры SecretId, SecretKey, Bucket и Region, подробные шаги см. в документации Tencent Cloud.
   • Другие графические кровати: При необходимости настраивайте другие граф-постели, такие как Seven Bulls Cloud, MinIO, Cloudflare R2 и т. д.

предостережение

• Некоторые плагины для браузеров могут влиять на стиль статьи, поэтому рекомендуется использовать редактор в режиме без плагинов.
• Если вы столкнулись с отсутствием стилей или проблемами рендеринга, вы можете обратиться к дискуссионному форуму проекта на GitHub или оставить отзыв о проблеме.

Выполнив вышеописанные действия, пользователи смогут легко начать работу с редактором WeChat Markdown Editor и быстро создавать и публиковать высококачественный графический контент WeChat.