富文本编辑器

发布时间：2020-08-25 15:48:03 作者：qq5ce69b6b60f8f
来源：网络阅读：348

Django 的富文本编辑器

想要用首先下载

pip install django-tinymce

创建应用
python manage.py startapp task_1

创建模型

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

class MessageInfo(models.Model):
    username = models.CharField(max_length=20)
    email = models.EmailField(blank=True, null=True)
    subject = models.CharField(max_length=50)

    info = HTMLField()

在settings中注册应用

INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',

    #需要使用到第三方的静态资源  必须注册应用
    `'tinymce'`

]****

生成迁移文件：根据模型类生成sql语句
python manage.py makemigrations

执行迁移：执行sql语句生成数据表
python manage.py migrate

tinymce配置

TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}

配置项目URL

from django.conf.urls import url
from . import views
app_name= 'blog'

urlpatterns = [

    url(r'^contactus/$', views.contactus, name='contactus'),
]

编写视图函数

from django.shortcuts import render
from .models import MessageInfo

def contactus(request):
    if request.method == 'GET':
        return render(request, 'contact.html')
    elif request.method == 'POST':
        x = MessageInfo()
        x.username = request.POST['name']
        x.email = request.POST['email']
        x.subject = request.POST['subject']
        x.info = request.POST['message']
        x.save()
        return render(request, 'index.html')

**编写模板文件    **

    <!DOCTYPE html>
<html>
    <head>
        <title>Black & White</title>

        <!-- meta -->
        <meta charset="UTF-8">

        <script src="/static/tiny_mce/tiny_mce.js"></script>
        <script type="text/javascript">
          tinyMCE.init({
              'mode':'textareas',
              'theme':'simple',
              'width': '100%' ,
              'height':100
          });
        </script>
    </head>
    <body>
        <div>
            <form action="{% url 'blog:contactus' %}" method="post">
                    <input type="text" name="name" placeholder="姓名" required>
                    <input type="email" name="email" placeholder="邮箱" required>
                    <input type="text" name="subject" placeholder="建议标题" required>
                    <textarea name="message" rows="7" placeholder="输入你的建议"></textarea>
                    <button type="submit">提交</button>``
            </form>
        </div>
    </body>
</html>

富文本编辑器

相关阅读