Django富文本编辑器

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

安藤青司

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

阅读量3.2k

点赞数

分类专栏： Python Django

本文链接：https://blog.csdn.net/qq_36910634/article/details/90341866

版权

Python 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

Django

2 篇文章 0 订阅

订阅专栏

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

在虚拟环境中安装包。

pip install django-tinymce==2.6.0

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

示例

1）在settings.py中为INSTALLED_APPS添加编辑器应用。

INSTALLED_APPS = (
    ...
    'tinymce',
)

2）在settings.py中添加编辑器配置。

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

3）在urls.py中配置编辑器url。

urlpatterns = [
    ...
    url(r'^tinymce/', include('tinymce.urls')),
]

接下来介绍在Admin页面、自定义表单页面的使用方式。

在Admin中使用

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

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

class GoodsInfo(models.Model):
    gcontent=HTMLField()

用于改变

2）生成迁移文件。

python manage.py makemigrations

3）执行迁移。

python manage.py migrate

4）在本示例中没有定义其它的模型类，但是数据库中有这些表，提示是否删除，输入no后回车，表示不删除，因为其它的示例中需要使用这些表。

5）迁移完成，新开终端，连接mysql，使用test2数据库，查看表如下：

6）发现并没有表GoodsInfo，解决办法是删除迁移表中关于booktest应用的数据。

delete from django_migrations where app='booktest';

7）再次执行迁移。

python manage.py migrate

成功完成迁移，记得不删除no。

8）在booktest/admin.py中注册模型类GoodsInfo

from django.contrib import admin
from booktest.models import *
class GoodsInfoAdmin(admin.ModelAdmin):
    list_display = ['id']

admin.site.register(GoodsInfo,GoodsInfoAdmin)

9）运行服务器，进入admin后台管理，点击GoodsInfo的添加，效果如下图

在编辑器中编辑内容后保存。

10）查询数据库

自定义使用

1）在booktest/views.py中定义视图editor，用于显示编辑器。

def editor(request):
    return render(request, 'booktest/editor.html')

2）在booktest/urls.py中配置url。

    url(r'^editor/',views.editor),

4）打开py_django虚拟环境的目录，找到tinymce的目录。

/home/python/.virtualenvs/py_django/lib/python3.5/site-packages/tinymce/static/tiny_mce

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

6）在test6/settings.py中配置静态文件查找路径。

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

7）在templates/booktest/目录下创建editor.html模板。

<html>
<head>
    <title>自定义使用tinymce</title>
    <script type="text/javascript" src='/static/js/tiny_mce.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/editor/

浏览效果如下图：

显示

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

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

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

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

1）在booktest/views.py中定义视图show，用于显示富文本编辑器的内容。

from booktest.models import *
...
def show(request):
    goods=GoodsInfo.objects.get(pk=1)
    context={'g':goods}
    return render(request,'booktest/show.html',context)

2）在booktest/urls.py中配置url。

    url(r'^show/', views.show),

3）在templates/booktest/目录下创建show.html模板。

<html>
<head>
    <title>展示富文本编辑器内容</title>
</head>
<body>
id:{{g.id}}
<hr>
{%autoescape off%}
{{g.gcontent}}
{%endautoescape%}
<hr>
{{g.gcontent|safe}}
</body>
</html>

4）运行服务器，在浏览器中输入如下网址：

http://127.0.0.1:8000/show/

浏览效果如下图：

安藤青司

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Django富文本编辑器

借助富文本编辑器，网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例，其它富文本编辑器的使用也是类似的。在虚拟环境中安装包。pip install django-tinymce==2.6.0安装完成后，可以使用在Admin管理中，也可以自定义表单使用。示例1）在settings.py中为INSTALLED_APPS添加编辑器应...
复制链接

扫一扫

专栏目录