ویرایشگر Markdown

جنگو

سلام

می خواهیم از یک ویرایشگر Markdown خیلی باحال به اسم SimpleMD استفاده کنیم.

در ابتدا یا کتابخانۀ جاوا اسکریپت آن را دانلود یا از CDNشان استفاده می کنیم.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

هم می توان دو خط بالا را به فایل base.html اضافه کرد و هم این دو فایل را دانلود کرده و simplemde.min.js را در پوشۀ js و simplemde.min.css را در پوشۀ css درون فولدر static قرار داد. من در این برنامه دومین راه حل را انتخاب کرده ام.

حالا فایل base.html را برای اضافه کردن جاوا اسکریپت های جدید ویرایش می کنیم.

templates/base.html (مشاهده کد کامل)

<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    {% block javascript %}{% endblock %}  <!-- Add this empty block here! -->

ابتدا قالب reply_topic.html را ویرایش می کنیم.

templates/reply_topic.html(مشاهده کد کامل)

{% extends 'base.html' %}

{% load static %}

{% block title %}Post a reply{% endblock %}

{% block stylesheet %}
  <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/simplemde.min.js' %}"></script>
  <script>
    var simplemde = new SimpleMDE();
  </script>
{% endblock %}

به صورت پیشفرض این پلاگین به اولین text-areaای که از Markdown استفاده کند؛ انتقال خواهد یافت. بنابراین همین کد کفایت می کند.

همین کار را با قالب edit_post.html هم انجام می دهیم.

templates/edit_post.html (مشاهده کد کامل)

{% extends 'base.html' %}

{% load static %}

{% block title %}Edit post{% endblock %}

{% block stylesheet %}
  <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/simplemde.min.js' %}"></script>
  <script>
    var simplemde = new SimpleMDE();
  </script>
{% endblock %}

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی: انسانی کردن برنامه | Humanize

مطلب قبلی: اضافه کردن Markdown

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
پیکربندی گواهینامۀ https

سلام حالا می خواهیم برنامۀ خودمان را با گواهینامۀ https امن کنیم. ساده ترین کار برای انجام آن Let’s Encrypt است. قبل از Let’s Encrypt هرگز تنظیمات https به این راحتی نبوده و مهمتر اینکه اینکار کاملاً رایگان است. آن ها راه حلی به نام certbot را ارائه داده اند …

جنگو
پیکربندی سرویس ایمیل

سلام یکی از بهتر سرویس دهنده های ایمیل Mailgun با قابلیت ۱۲ هزار ایمیل رایگان در ماه است. به صورت رایگان ثبت نام کنید. برای اینکار باید آن را با سرویس دهندۀ دامین خود تنظیم کنید که در این آموزش از tamadon.org استفاده شده است. حالا اولین رکورد DNS را …

جنگو
پیکربندی NGINX

سلام کار بعدی که قرار است انجام شود؛ تنظیمان Nginx به شکلی است که پاسخگویی و سرویس دهی مربوط به فایل های استاتیک را خود انجام دهد و سایر درخواست ها را به Gunicorn بفرستد. یک فایل پیکربندی با نام boards را درون /etc/nginx/sites-available/ و با محتوای زیر اضافه می …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.