<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: #!z@nko...;</title>
    <description>The latest articles on DEV Community by #!z@nko...; (@zankoan).</description>
    <link>https://dev.to/zankoan</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F734518%2Fa9cdf958-9576-416f-a629-318e42d8abdc.jpeg</url>
      <title>DEV Community: #!z@nko...;</title>
      <link>https://dev.to/zankoan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zankoan"/>
    <language>en</language>
    <item>
      <title>I Built a dj_telegram_bot pkg to create Telegram Bot with Django</title>
      <dc:creator>#!z@nko...;</dc:creator>
      <pubDate>Tue, 28 Jul 2026 11:56:26 +0000</pubDate>
      <link>https://dev.to/zankoan/-telegram-bot-with-django--1co6</link>
      <guid>https://dev.to/zankoan/-telegram-bot-with-django--1co6</guid>
      <description>&lt;p&gt;Hey everyone, especially those of you who are reading these posts and sticking around with me!&lt;/p&gt;

&lt;p&gt;For a few years now I've been writing Telegram bots on top of the Django codebase I already had lying around, but at some point I thought — why not just turn this into a proper package? It'd be easier to install and you could get moving on your work way faster.&lt;/p&gt;

&lt;p&gt;So that's how &lt;a href="https://github.com/zankoAn/dj_telegram_bot" rel="noopener noreferrer"&gt;dj_telegram_bot&lt;/a&gt; came to be — forked from a friend's project, and I pushed it everywhere it needed to go&lt;/p&gt;




&lt;h2&gt;
  
  
  First stop: Why, why, and... why?
&lt;/h2&gt;

&lt;p&gt;A question that probably crosses everyone's mind:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Why should I use this?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;What's actually the point?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;What does it even have over the alternatives?&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Well, here are a few advantages, and there will be more in future versions.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;1 - Simplicity and convenience:&lt;/strong&gt; if you've worked with Django before, you can build a bot here faster than a "hello world" project 😁 Django's admin panel and ORM handle a ton of the work for you.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2 - Custom admin panel:&lt;/strong&gt; there's a section of the admin panel built specifically for this library — you can easily add message text and create InlineKeyboardMarkup or ReplyKeyboardMarkup for them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3 - Type-safe and ready to go:&lt;/strong&gt; Telegram types are fully validated with pydantic, so you get helpful error hints right in your editor, plus there are some built-in defaults like a sponsor channel and bot status settings.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4 - Flexibility:&lt;/strong&gt; you can very easily send monitoring, logging, and notifications from your Django site over to Telegram.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Second stop: how do you actually write a bot with it?
&lt;/h2&gt;

&lt;p&gt;Since it's structured as a Django app, to work with it you need to build a Django project first; then add the library to &lt;code&gt;INSTALLED_APPS&lt;/code&gt;, You'll also need your own Django app (e.g., created with django-admin startapp bot).&lt;/p&gt;

&lt;p&gt;You can find the installation steps and more details either on the library's &lt;a href="https://pypi.org/project/dj-telegram-bot/" rel="noopener noreferrer"&gt;PyPI&lt;/a&gt; page or in the &lt;a href="https://github.com/zankoAn/dj_telegram_bot" rel="noopener noreferrer"&gt;GitHub README&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Here are a few screenshots of how to build a simple bot (there's also a demo video on GitHub).&lt;/p&gt;




&lt;p&gt;&lt;em&gt;See how quick it is? This example is literally just copy-pasted from another bot of mine&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The message-adding section in the admin panel&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhxdgy1wtzc5blea1ya7m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhxdgy1wtzc5blea1ya7m.png" alt="django admin panel to add msg and keyboards" width="800" height="734"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sample bot code&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0eqtp4vq9rzbtnyzmd33.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0eqtp4vq9rzbtnyzmd33.png" alt="Sample telegram bot code to show options and get the link from user" width="800" height="482"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Final bot output&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbrg3rogg4qizvjb2m1zw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbrg3rogg4qizvjb2m1zw.png" alt="telegram bot with dynamic keyboard and msgs" width="800" height="592"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;In the example above, I realized changing the "step" is a bit annoying... it'd be better to have a service for the user with an update-step method and so on.&lt;/p&gt;

&lt;p&gt;Oh, and the docs are still at version one — if I get the time, adding something with mkdocs would be nice.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;If you found this interesting or useful, I'd really appreciate a star on the GitHub&lt;/strong&gt; ⭐️&lt;/p&gt;

&lt;p&gt;If you'd like, you're welcome to contribute to the docs!!&lt;/p&gt;

&lt;p&gt;Thanks for sticking with me and reading all the way through, hope you're doing well. Cheers ❤️&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/zankoAn/dj_telegram_bot" rel="noopener noreferrer"&gt;https://github.com/zankoAn/dj_telegram_bot&lt;/a&gt;&lt;/p&gt;

</description>
      <category>telegram</category>
      <category>django</category>
      <category>python</category>
      <category>bot</category>
    </item>
    <item>
      <title>upload local image/video in django TinyMCE text editor.</title>
      <dc:creator>#!z@nko...;</dc:creator>
      <pubDate>Thu, 23 Dec 2021 21:20:46 +0000</pubDate>
      <link>https://dev.to/zankoan/upload-local-imagevideo-in-django-tinymce-text-editor-mkn</link>
      <guid>https://dev.to/zankoan/upload-local-imagevideo-in-django-tinymce-text-editor-mkn</guid>
      <description>&lt;p&gt;In the TinyMCE editor, when you want to upload an image, you do not have the option to upload your local image (i.e with the file browser dialog) like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzmsc6wffy3eslqu92cs3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzmsc6wffy3eslqu92cs3.png" alt="What? Where is the upload option!"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;to solve this problem you need to edit templates of django admin panel and create new js file for add upload option...&lt;/p&gt;




&lt;h2&gt;
  
  
  0. Directory Structures
&lt;/h2&gt;

&lt;p&gt;Suppose you have a directory structure like this:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

. 
├── core
│   ├── urls.py
│   ├── settings.py
│   └── ...
├── post
│   ├── admin.py
│   ├── models.py
│   └── ...
└── static
    └── js
        └── uploader.js


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;in this structure you have static directory to store your static file(&lt;a href="https://docs.djangoproject.com/en/4.0/howto/static-files/" rel="noopener noreferrer"&gt;if you don't have this static file read this page&lt;/a&gt;) and now create a js directory and then put the uploader.js file in this directory, But what data should be in this file?👇🏻&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Add upload feature to TinyMCE editor.
&lt;/h2&gt;

&lt;p&gt;You have to up this js code in uploader.js:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

tinymce.init({
      selector: "textarea#id_body",      
      height: "700",
      width: "1300",
      plugins: "insertdatetime media image preview",
      toolbar: "undo redo |  bold italic | alignleft alignright aligncenter alignjustify | image media | preview",
      image_title: true,
      image_caption: true,
      automatic_uploads: true,
      image_advtab: true,
      file_picker_types: "image media",

      file_picker_callback: function (cb, value, meta) {
        var input = document.createElement("input");
        input.setAttribute("type", "file");
        if (meta.filetype == "image") {
            input.setAttribute("accept", "image/*");}
        if (meta.filetype == "media") {
        input.setAttribute("accept", "video/*");}

        input.onchange = function () {     
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function () {
                var id = "blobid" + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(",")[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);
               cb(blobInfo.blobUri(), { title: file.name });
             };
             reader.readAsDataURL(file);
         };
         input.click();
      },
      content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
  });


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This script contains small configuration for the TinyMCE editor, if you want more options in the toolbar or add multiple plugins and so on.. you can put your configuration in this file, and you can find all the configuration options in the TinyMCE documentation...&lt;/p&gt;

&lt;p&gt;if you want to add more image configuration, you can read this link below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.tiny.cloud/docs/plugins/opensource/image" rel="noopener noreferrer"&gt;image&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.tiny.cloud/docs/configure/file-image-upload" rel="noopener noreferrer"&gt;file-image-upload&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Edit Django AdminPanel
&lt;/h2&gt;

&lt;p&gt;Ok lets edit admin panel template to add TinyMCE editor and upload image/video option.&lt;/p&gt;

&lt;p&gt;first you need to find this file and edited:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

/django/contrib/admin/templates/admin/change_form.html



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This file has the tag &lt;strong&gt;{\% endblock \%}&lt;/strong&gt; in the end line, you must put the following line before this line&lt;br&gt;
‍‍‍‍‍```&lt;br&gt;
&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
This line is to load uploader.js file, which is exactly my js script for adding the image/video upload feature, this line should be added to this file.

---
## 3. Upload Image/Video


Now your job is done! You can save **change_form.html** and reload the admin panel, now the image upload option has been added and you can use it to upload your video and images.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpwufgf0rsfvyw04gj3v.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o1i2c3pl01hcj2zmtml.png)


---

**Note:**
&amp;gt; If you have the TinyMCE configuration in **settings.py**, after this change in the &amp;lt;u&amp;gt;admin panel&amp;lt;/u&amp;gt;, all **TinyMCE** settings will be ignored and the configuration in the &amp;lt;u&amp;gt;uploader.js&amp;lt;/u&amp;gt; file will be applied.

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>django</category>
      <category>texteditor</category>
      <category>tinymce</category>
      <category>editor</category>
    </item>
  </channel>
</rss>
