Lemmy Lemmy 14 травня 2026, 16:09

UJ4: Зробив редактор

Доро­бив реда­ктор, котрий пра­цює з Markdown роз­мі­ткою і під­три­мує обме­же­ний набір форматування.

Осо­бли­во­сті:

  • Пере­тво­рює ско­пі­йо­ва­ний HTML на Markdown, при копі­ю­ван­ні текс­ту з реда­кто­ру копі­ю­є­ться Markdown
  • Вида­ляє всі поси­ла­н­ня з HTML і встав­ляє їх як спи­сок поси­лань у кін­ці тексту
  • Під­три­мує встав­ку і авто­ма­ти­чне заван­та­же­н­ня зко­пі­йо­ва­них зобра­жень і реда­гу­ва­н­ня ALT зображення
  • Під­три­мує встав­ки з сай­тів: api​.soundcloud​.com, clips​.twitch​.tv, codepen​.io, dailymotion​.com, facebook​.com, fb​.com, figma​.com, giphy​.com, i.giphy.com, instagram​.com, linkedin​.com, loom​.com, m.facebook.com, media​.giphy​.com, new​.reddit​.com, old​.reddit​.com, open​.spotify​.com, pin​.it, pinterest​.ca, pinterest​.co​.uk, pinterest​.com, reddit​.com, soundcloud​.com, steamcommunity​.com, store​.steampowered​.com, t.me, telegram.dog, telegram​.me, threads​.com, threads​.net, tiktok​.com, twitch​.tv, twitter​.com, vimeo​.com, w.soundcloud.com, x.com, youtube​.com, youtu​.be, bsky.app, mastodon.social
  • Всі поси­ла­н­ня встав­ля­ю­ться в реда­ктор як окре­мі кар­тки, тоб­то поси­ла­н­ня в текс­ті не під­три­му­ю­ться. Зро­бле­но для біль­шої про­зо­ро­сті — можна пере­гля­ну­ти домен, title, icon посилання

Досту­пен як NPM пакет: 

npmjs.com/package/commently-editor веб-ресурс

Міні­маль­ний код для інте­гра­ції редактора:

<script>
  window.__UPLOAD_API_BASE__ = "https://uploads.commently.top";
  window.__DISCOVER_API_BASE__ = "https://discover.commently.top";
  window.__IMAGE_UPLOAD_JWT_URL__ = "/upload-jwt";
</script>
<script src="https://unpkg.com/commently-editor" defer></script>
<textarea id="create_content" name="content" required placeholder="Напишіть щось..."></textarea>
<commently-textarea-editor for="create_content"></commently-textarea-editor>

Реда­ктор при­в’я­зу­є­ться до <textarea> і сумі­сний зі зви­чай­ним <form>, тож можна інте­гру­ва­ти його у будь який сайт де потрі­бно мати реда­гу­ва­н­ня Markdown.

Змін­ні __UPLOAD_API_BASE__, __DISCOVER_API_BASE__ – від­по­від­а­ють сер­ві­сам які займа­ю­ться апло­а­дом зобра­жень і гене­ра­ці­єю кар­тки встав­ки по URL__IMAGE_UPLOAD_JWT_URL__ — це енд­по­інт для гене­ра­ції JWT токе­на, який вико­ри­сто­ву­ю­ться для авто­ри­за­ції у сер­ві­сі заван­та­же­ня зображень.

  • 5
  • 1
  • 41

1 комментар