首页 > 其他分享 >Django-6.1富文本编辑器-笔记

Django-6.1富文本编辑器-笔记

时间:2022-11-29 18:03:35浏览次数:42  
标签:文本编辑 show py tinymce booktest editor 6.1 Django

富文本编辑器

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

在虚拟环境中安装包。

pip install django-tinymce==2.6.0

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

示例

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

INSTALLED_APPS = (
...
'tinymce',
)

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

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

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

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

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

1.在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

Django-6.1富文本编辑器-笔记_html

3)执行迁移。

python manage.py migrate

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

Django-6.1富文本编辑器-笔记_html_02

5)迁移完成,新开终端,连接mysql,使用test2数据库,查看表如下:

Django-6.1富文本编辑器-笔记_富文本编辑器_03

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

delete from django_migrations where app='booktest';

7)再次执行迁移。

python manage.py migrate

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

Django-6.1富文本编辑器-笔记_html_04

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的添加,效果如下图

Django-6.1富文本编辑器-笔记_django_05

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

2.自定义使用

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

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

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

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

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

Django-6.1富文本编辑器-笔记_富文本编辑器_06

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/目录下。

Django-6.1富文本编辑器-笔记_富文本编辑器_07

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/

浏览效果如下图:

Django-6.1富文本编辑器-笔记_富文本编辑器_08

3.显示

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

Django-6.1富文本编辑器-笔记_django_09

在模板中显示字符串时,默认会进行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/

浏览效果如下图:

Django-6.1富文本编辑器-笔记_富文本编辑器_10

标签:文本编辑,show,py,tinymce,booktest,editor,6.1,Django
From: https://blog.51cto.com/chen8866/5896196

相关文章

  • Django-6.2全文检索-笔记
    全文检索全文检索不同于特定字段的模糊查询,使用全文检索的效率更高,并且能够对于中文进行分词处理。haystack:全文检索的框架,支持whoosh、solr、Xapian、Elasticsearc四种全文......
  • Django-6.3-笔记
    发送邮件Django中内置了邮件发送功能,被定义在django.core.mail模块中。发送邮件需要使用SMTP服务器,常用的免费服务器有:​​163​​​、​​126​​​、​​QQ​​,下面以163......
  • 【Django】设置 接口
    api.pyfromdss.Serializerimportserializerfromdjango.httpimportHttpResponsedefresponse_as_json(data,foreign_penetrate=False):jsonString=seria......
  • Django-5.常用-笔记
    常用到此为止,关于Django框架的三大块M、V、T已经全部讲完了,接下来学习一些其它的知识点,这些知识点不在三大块范围内,Django提供了这些功能后,可以帮助我们更快更好的完成开发......
  • Django-5.1静态文件-笔记
    静态文件项目中的CSS、图片、js都是静态文件。一般会将静态文件放到一个单独的目录中,以方便管理。在html页面中调用时,也需要指定静态文件的路径,Django中提供了一种解析的方......
  • Django-4.4CSRF跨站请求伪造-笔记
    CSRFCSRF全拼为CrossSiteRequestForgery,译为跨站请求伪造。CSRF指攻(敏感词)击者盗用了你的身份,以你的名义发送恶意请求。CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取......
  • Django-4.5验证码-笔记
    验证码在用户注册、登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻业务服务器、数据库服务器的压力。手动实现验证码接下来的代码不要......
  • Django-3.1URLconf-笔记
    URLconf用户通过在浏览器的地址栏中输入网址请求网站,对于Django开发的网站,由哪一个视图进行处理请求,是由url匹配找到的。配置1)在test3/settings.py中通过ROOT_URLCONF指定ur......
  • Django-3.2视图-笔记
    视图视图就是python中的函数,视图一般被定义在"应用/views.py"文件中,此例中为"booktest/views.py"文件。视图必须返回一个HttpResponse对象或子对象作为响应。响应可以是一张......
  • Django-2.5关联-笔记
    模型类关系关系字段类型关系型数据库的关系包括三种类型:ForeignKey:一对多,将字段定义在多的一端中。ManyToManyField:多对多,将字段定义在任意一端中。OneToOneField:一对一,将字......