python-django 富文本编辑器

最新推荐文章于 2025-10-09 22:16:46 发布

原创最新推荐文章于 2025-10-09 22:16:46 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#python

思普大数据技术专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何在Django项目中集成TinyMCE富文本编辑器，包括安装配置、模型字段设置、视图处理及页面显示等关键步骤。

部署运行你感兴趣的模型镜像

创建富文本：
    1.添加富文本库：pip install tinymce
    2.在setting.py配置文件中添加tinymce应用
        INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'ansap',
        'tinymce',
    ]
    3.在setting.py中配置富文本的大小：
        #富文本
        TINYMCE_DEFAULT_CONFIG={
            'theme':'advanced',
            'width':600,
            'height':400,
        }
    4.添加富文本models类
        在models.py文件中添加Text类
        from tinymce.models import  HTMLField
        class Text(models.Model):
            str = HTMLField()
    5.创建迁移文件，执行迁移文件
        python manage.py makemigrations
        python manage.py migrate
    6.在admin.py文件中注册富文本对象
        from .models import Text
        admin.site.register(Text)

    7.在自定义页面显示富文本编辑器：
    a.在urls.py文件中配置访问路径，跳转到edit.html页面
        url('edit/',views.edit),
        url('saveEdit/',views.saveEdit),
    b.在views.py文件中定义跳转方法
        def edit(request):
            return render(request,"ansap/edit.html")
    c.在html中引入js文件并进行初始配置
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>富文本</title>
            <script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
            <script type="text/javascript">
                tinyMCE.init({
                    'mode':'textareas',
                    'name':'advanced',
                    'width':800,
                    'height':600,
                })
            </script>
        </head>
        <body>
            <form action="/saveEdit/" method="post">
                {% csrf_token %}
                <textarea name = "str">
                    测试富文本
                </textarea>
                <input type="submit" name="sbm" value="提交"/>
            </form>
        </body>
        </html>
     d.在views.py文件中定义方法，接收页面提交的数据
        def saveEdit(request):
            str = request.POST['str']
            return HttpResponse(str)

您可能感兴趣的与本文相关的镜像