Django 2.1.7 使用富文本编辑器 tinymce

相关文献

Django 2.1.7 Admin - 注册模型、自定义显示列表字段 Django 2.1.7 上传图片 - Admin后台管理 https://django-tinymce.readthedocs.io/en/latest/

富文本编辑器

借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。

在虚拟环境中安装包。

pip3 install django-tinymce

安装完成后,可以使用在Admin管理中,也可以自定义表单使用。

安装tinymce应用

1)在项目/settings.py中为INSTALLED_APPS添加编辑器应用。

INSTALLED_APPS = (
    'tinymce', # 富文本编辑器
    ....
)

2)在项目/settings.py中添加编辑器配置。

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

3)在项目/urls.py中配置编辑器url。

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('tinymce/', include('tinymce.urls')), # 导入tinymce应用的urls.py
    ....
]

到这里已经配置好了tinymce库的注册使用了,下面在Admin后台使用。

在Admin中使用富文本编辑器

1)在assetinfo/models.py中,定义模型的属性为HTMLField()类型。

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

class GoodsInfo(models.Model):
    goods_name = models.CharField(verbose_name="商品名称",max_length=50, default=None, db_column='goods_name')  # 商品名称
    gcontent=HTMLField(verbose_name="商品详情") # 设置富文本字段

    class Meta:
        verbose_name = '商品信息'
        verbose_name_plural = verbose_name

2)执行迁移数据。

python3 manage.py makemigrations
python3 manage.py migrate

3) 在mysql中查看生成的表结构

mysql> desc assetinfo_goodsinfo;
+------------+-------------+------+-----+---------+----------------+
| Field      | Type        | Null | Key | Default | Extra          |
+------------+-------------+------+-----+---------+----------------+
| id         | int(11)     | NO   | PRI | NULL    | auto_increment |
| gcontent   | longtext    | NO   |     | NULL    |                |
| goods_name | varchar(50) | NO   |     | NULL    |                |
+------------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

mysql> 

可以看到生成的字段类型就是长文本类型。

4)在assetinfo/admin.py中注册模型类GoodsInfo

from django.contrib import admin
from .models import *

@admin.register(GoodsInfo)
class GoodsInfoAdmin(admin.ModelAdmin):
    list_display = ['id','gcontent','goods_name']

5)运行服务器,进入admin后台管理,点击GoodsInfo的添加,效果如下图

访问:http://127.0.0.1:8000/admin/

保存之后,如下:

6)返回mysql查看一下保存的数据

mysql> select * from assetinfo_goodsinfo;
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
| id | gcontent                                                                                                                                                                       | goods_name |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
|  1 | <h1><strong>商品详情:</strong></h1>
<ol>
<li><strong><strong><strong>详情内容1</strong></strong></strong><hr /></li>
<li><em>详情内容2</em><hr /></li>
</ol>              | 商品1      |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
1 row in set (0.00 sec)

mysql> 

自定义使用富文本编辑器

1)在assetinfo/views.py中定义类视图Editor,用于显示编辑器。

from django.views.generic import View

class Editor(View):
    
    def get(self, request):
        return render(request, 'assetinfo/editor.html')

2)在assetinfo/urls.py中配置url。

from .views import *

urlpatterns = [
    # ex:/assetinfo/editor
    path('editor', Editor.as_view() , name='editor'),
]

3)在项目目录下创建静态文件目录如下图:

4)打开python3环境的目录,找到tinymce的目录。

打开目录如下:

5)拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。

6)在项目/settings.py中配置静态文件查找路径。

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

7)在templates/assetinfo/目录下创建editor.html模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义使用tinymce</title>
    <script type="text/javascript" src='/static/js/tiny_mce_src.js'></script>
    <script type="text/javascript">
        tinyMCE.init({
            'mode':'textareas',
            'theme':'advanced',
            'width':400,
            'height':100
        });
    </script>
</head>
<body>
    <form method="post" action="#">
        <textarea name='gcontent'>测试富文本编辑器</textarea>
    </form>
</body>
</html>

8)运行服务器,在浏览器中输入如下网址:

http://127.0.0.1:8000/assetinfo/editor

显示富文本编辑的内容

通过富文本编辑器产生的字符串是包含html的。 在数据库中查询如下:

mysql> select * from assetinfo_goodsinfo;
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
| id | gcontent                                                                                                                                                                       | goods_name |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
|  1 | <h1><strong>商品详情:</strong></h1>
<ol>
<li><strong><strong><strong>详情内容1</strong></strong></strong><hr /></li>
<li><em>详情内容2</em><hr /></li>
</ol>              | 商品1      |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
1 row in set (0.00 sec)

mysql> 

在模板中显示字符串时,默认会进行html转义,如果想正常显示需要关闭转义。

问:在模板中怎么关闭转义

可以参考Django 2.1.7 模板 - HTML转义

  • 方式一:过滤器safe
  • 方式二:标签autoescape off

1)在assetinfo/views.py中定义类视图Show,用于显示富文本编辑器的内容。

from assetinfo.models import GoodsInfo

class Show(View):

    def get(self, request):
        goods = GoodsInfo.objects.get(pk=1)
        context = {'g': goods}
        return render(request,'assetinfo/show.html', context)

2)在assetinfo/urls.py中配置url。

urlpatterns = [
    # ex:/assetinfo/show
    path('show', Show.as_view() , name='show'),
]

3)在templates/assetinfo/目录下创建show.html模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示富文本编辑器内容</title>
</head>
<body>
    显示查询的id号:
    id:{{g.id}} <br>
    
    <hr>
    
    使用autoescape关闭转义:<br>
    {%autoescape off%}
    {{g.gcontent}}
    {%endautoescape%}
    
    <hr>
    
    使用safe过滤器,关闭转义:<br>
    {{g.gcontent|safe}}
</body>
</html>

4)运行服务器,在浏览器中输入如下网址: http://127.0.0.1:8000/assetinfo/show

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券