TinyMCE富文本编辑器
- pip install django-tinymce
- 配置settings.py文件
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'tinymce'
]
TINYMCE_DEFAULT_CONFIG = {
'theme': 'silver',
'width': 800,
'height': 500,
'language':'zh-Hans',
"menubar": "file edit view insert format tools table help",
'toolbar': 'fontsize',
'font_size_formats': '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
'toolbar': 'fontfamily',
'font_family_formats': "微软雅黑=微软雅黑,Microsoft YaHei;宋体=宋体,SimSun;黑体=黑体,SimHei;仿宋=仿宋,FangSong;楷体=楷体,KaiTi;隶书=隶书,LiShu;幼圆=幼圆,YouYuan;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",}
- 项目models.py中增加方法
from tinymce.models import HTMLField
class TinymceText(models.Model):
title = models.CharField(max_length=100,verbose_name='标题',default='TinyMCE编辑页面')
content = HTMLField()
- 项目forms.py
from .models import TinymceText
from tinymce.widgets import TinyMCE
class TinyForm(forms.ModelForm):
content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
class Meta:
model = TinymceText
fields = ['content']
- 项目views.py
from django.http import HttpResponse
from .forms import TinyForm
@staff_member_required
def TinymceEditor(request):
""" 自定义form表单 """
if request.method == 'POST':
form = TinyForm(data=request.POST)
if form.is_valid():
form.save()
return HttpResponse('提交完了')
form = TinyForm()
return render(request, 'tinymce_editor.html', {'form':form})
- Admin.py 模型类站点注册
from django.contrib import admin
from .models import TinymceText
class TinymceTextAdmin(admin.ModelAdmin):
list_display = ('title','content')
admin.site.register(TinymceText,TinymceTextAdmin)
- 最后：
python3 manage.py makemigrations acidindexcal
python3 manage.py makemigrations
python3 manage.py migrate acidindexcal --database=acidindexdb
python3 manage.py migrate
python3 manage.py collectstatic #否则找不到js文件
- Tinymce自定义视图
- Apps/acidindexcal/urls.py
urlpatterns = [
path('', views.acidindexcal, name='index'),
path('index/', views.acidindex),
path('pdtlist/', views.Pdt_db_list),
path('Tinymce/', views.TinymceEditor, name='TinymceEditor'),
]
- 编辑Apps/acidindexcal/templates/tinymce_editor.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义页面使用富文本</title>
<script src="{% static 'tinymce/tinymce.min.js' %}"></script>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit">
</form>
<script>
tinymce.init({
selector:'textarea',
theme: 'silver',
width: 1200,
height: 600,
language: 'zh-Hans',
toolbar: 'fontsize',
font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
toolbar: 'fontfamily',
font_family_formats: "微软雅黑=微软雅黑,Microsoft YaHei;宋体=宋体,SimSun;黑体=黑体,SimHei;仿宋=仿宋,FangSong;楷体=楷体,KaiTi;隶书=隶书,LiShu;幼圆=幼圆,YouYuan;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
});
</script>
</head>
<body>
</body>
</html>
