23-富文本框-526互联

配置

# 一般用于写文章,编辑内容自带样式
# 官网: https://pypi.org/project/django-tinymce/

# 1. 安装第三方库 django-tinymce
    pip install django-tinymce

# 2. 配置settings.py文件
    # 注册
    INSTALLED_APPS = ["tinymce",]
    
    # 富文本编辑器配置
    TINYMCE_DEFAULT_CONFIG = {
        "theme":"advanced",
        "width":600,
        "height":400
}
   
# 3. 将第三方库文件(静态文件)中site-packages-->tinymce-->static-->tinymce文件 复制到 static静态文件下
      site-packages-->tinymce-->static-->tinymce文件 复制到 static静态文件下

使用

# 1. 编写路由
      path('edit/', views.edit, name="edit"),# 富文本框

# 2. 编写视图函数
      def edit(request):
          if request.method == "POST":
              print(request.POST.get("content"))
          return render(request, 'article.html')

# 3. 编写html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    引入js#}
    <script src="/static/tinymce/tinymce.min.js"></script> 
    {#必填 #}
    <script type="text/javascript">
        tinyMCE.init({
            'mode':'textareas',
            "width": 800,
            "height": 600
        })
    </script>
</head>
<body>
<form action="{% url 'App03:edit' %}" method="post">
    {% csrf_token %}
    <textarea name="content" id="" cols="30" rows="10"></textarea>
    <br>
    <input type="submit">
</form>
</body>