Django-TinyMce

17042 단어 pythontinymcdjango
안녕하세요 친구,
내 블로그에 다시 오신 것을 환영합니다. 이 블로그에서는 몇 분만에 Django에 TinyMce Editor를 추가하는 방법을 보여드리겠습니다.

TinyMce는 무엇입니까?



TinyMCE는 MIT 라이선스에 따라 오픈 소스 소프트웨어로 출시된 온라인 서식 있는 텍스트 편집기입니다. HTML 텍스트 영역 필드 또는 기타 HTML 요소를 편집기 인스턴스로 변환하는 기능이 있습니다. Wikipedia

시작하자 :)
1.) 'tiny_mce'라는 프로젝트를 만듭니다.

your_directory/.../django-admin startproject tiny_mce


2.) 좋아하는 코드 편집기에서 'tiny_mce' 폴더를 열고 터미널에서 다음 명령을 실행합니다.

pip install django-tinymce
#command will install tinymce in your system


3.) 다음 명령을 사용하여 'tiny_mce' 폴더에 'main' 앱을 만듭니다.

python manage.py startapp main


4.) setting.py 파일을 열고 'main' 앱과 'tiny_mce'를 추가합니다.

INSTALLED_APPS = [
      #some other apps installed
      ..
      ..
      'main',
      'tinymce'
]


5.) 프로젝트 'urls.py' 파일을 열고 아래 코드를 추가합니다.

from django.contrib import admin  #already added
from django.urls import path, include #import include

urlpatterns = [
    path('admin/', admin.site.urls),   #already added
    path('', include('main.urls'))   #add this line
]


6.) 'main' 앱에 'urls.py' 파일을 생성하고 다음 코드를 추가합니다.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name='home')
]


7.) 'views.py' 파일 열기 및 코드 추가

from django.shortcuts import render
from .models import Post

# Create your views here.
def home(request):
    if request.method=='POST':
        title = request.POST['post_title']
        content = request.POST['post_description']
        create_post = Post.objects.create(title=title, desc=content)
        create_post.save()
    all_posts = Post.objects.all()[::-1]
    data = {'posts':all_posts}
    return render(request,'index.html',data)


8.) 'tiny_mce' 폴더에 'templates' 폴더를 만들고 이 디렉토리를 'settings.py'에 추가합니다.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR,'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


9.) models.py를 열고 Post 모델을 생성합니다.

from django.db import models
from tinymce.models import HTMLField   #import HTMLField 

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=100)
    desc = HTMLField()     #add here as Description section

    def __str__(self):
        return self.title


10.) admin.py 파일에 'Post' 모델 등록

from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)


11.) '템플릿' 폴더에 'index.html'을 만듭니다.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
        tinymce.init({
            selector: '#exampleFormControlTextarea1'
        });
    </script>
    <style>
        #posts{
            position:absolute;
            top:15px;
            right:0px;
        }
    </style>
    <title>Index page</title>
</head>

<body>
    <div class="container mx-5 my-3 w-50" style="border-right: 1px solid;">
        <h3>Create a Post</h3>
        <form method="post" action="{% url 'home' %}">
        {% csrf_token %}
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Post Title</label>
            <input type="text" class="form-control" name="post_title" id="exampleFormControlInput1" placeholder="Title">
        </div>
        <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">Content</label>
            <textarea class="form-control" name="post_description" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <div class="mb-3">
            <input type="submit" class="btn btn-primary"/>
        </div>
        </form>
    </div>

    <div class="container w-50" id="posts">
        {% for post in posts %}
            <div class="container mx-5">
                <h3 style="border-bottom:1px solid; display:inline">{{post.title}}</h3>
                <p>{{post.desc|safe}}</p>
                <hr>
            </div>
        {% endfor %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        </script>

</body>

</html>


제 블로그를 방문해 주셔서 감사합니다.

페이지 개체 모델 – Selenide 자습서 시리즈
Python을 사용한 웹 스크레이퍼(아름다운 수프) 및 Heroku에 배포 [2부]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage