Django-富文本编辑器

最新推荐文章于 2024-03-28 09:42:19 发布

LyaJpunov

最新推荐文章于 2024-03-28 09:42:19 发布

阅读量834

点赞数

分类专栏： # Django 文章标签： django 前端 python

本文链接：https://blog.csdn.net/weixin_43903639/article/details/122888522

版权

Django 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、安装富文本编辑器

pip install django-tinymce

二、settings配置

2.1、安装app

INSTALLED_APPS = [
   ...
   'tinymce',
]

#富⽂本编辑器的配置
TINYMCE_DEFAULT_CONFIG = {
    'theme':'advanced',
    'width':600,
    'height':400
}

三、前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本</title>

    <script src="/static/js/tiny_mce/tiny_mce.js"></script>   <!--会去tinymce模块，按此路径寻找js文件-->
    <script>
        tinyMCE.init({
            'mode': 'textareas',   <!--定义textarea标签。否则在下面使用textarea标签 不会变为富文本-->
            'theme': 'advanced',   <!--主题：高级-->
            'width': 450,		 <!--宽、高-->
            'height': 300
        })
    </script>

</head>
<body>

<h1>下面就是富文本框</h1>
<form action="{% url 'app:edit' %} " method="post">
    {% csrf_token %}
    <label>
        <textarea name="comment_content">富文本</textarea>   <!--使用上面定义的textarea标签-->
    </label>
    <br>
    <input type="submit" value="提交评论" class="btn btn-default">
</form>

</body>
</html>

四、Url配置

urlpatterns = [
	path('edit', views.edit, name='edit'),
    path('tinymce/', include('tinymce.urls')),
]

五、视图函数配置

from django.shortcuts import render

def edit(request):
    if request.method == 'POST':
        print(request.POST.get('comment_content'))
    return render(request,'article.html')

六、运行

此时你运行会发现，嗯，错的，富文本框并没有出现，这是因为下面这个标签中的js文件并未存在

<script src="/static/js/tiny_mce/tiny_mce.js"></script>

我们需要把这个文件导入到我们的静态文件夹下

当然没有这个文件的可以在此处下载，也可以从库中拉取

https://download.csdn.net/download/weixin_43903639/80123049

LyaJpunov

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Django-富文本编辑器

一、安装富文本编辑器pip install django-tinymce二、settings配置2.1、安装appINSTALLED_APPS = [ ... 'tinymce',]#富⽂本编辑器的配置TINYMCE_DEFAULT_CONFIG = { 'theme':'advanced', 'width':600, 'height':400}三、前端页面<!DOCTYPE html><html lang="en">
复制链接

扫一扫