富文本编辑器的使用 | Django开发

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本编辑器的使用 | Django开发相关的知识,希望对你有一定的参考价值。

# 这里以tinymce为例;
1.安装django-tintmce

pip install django-tinymce

2.添加应用到settings.py

INSTALLED_APPS = (
...
tinymce,
)

3.添加编辑配置项到settings.py中

TINYMCE_DEFAULT_CONFIG = {
theme: advanced,
# ‘theme‘: ‘simple‘,
width: 600,
height: 400,
language: zh-CN,
theme_advanced_buttons1: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator,
theme_advanced_buttons2: col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor,charmap,visualaid,spacer,cut,copy,paste
}

4.在项目urls.py中配置

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

5.展示方法
5.1 在后台展示
-- views.py

定义模型类属性;
from django.db import models
from tinymce.models import htmlField
class Test1(models.Model):
  hcontent = HTMLField()

-- urls.py

url(r^tinymce/, include(tinymce.urls)),
-- admin.py
admin.site.register(Test1)

5.2 自定义使用(页面中使用)
-- htmlEditor

<!DOCTYPE html>
<html>
<head>
<title>富文本编辑器</title>
<script type="text/javascript" src=‘/static/tiny_mce/tiny_mce.js‘></script>
<script type="text/javascript">
tinyMCE.init({
mode:textareas,
// mode指向的文本样式都改成符文本编辑框
theme:advanced,
width:400,
height:100
});
</script>
</head>
<body>
<form method="post" action="/htmlEditorHandle/">
<input type="text" name="hname">
<br>
<textarea name=‘hcontent‘>哈哈,这是啥呀</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

>>><<<
-- views.py

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

def htmlEditorHandle(request):
# 处理接收数据
    html = request.POST[hcontent]
    test1 = Test1.objects.get(pk=1)
    # 将接收到的属性赋给字段对象的属性;
    test1.content = html
    # 存入数据库
    test1.save()
    context = {content:html}
    return render(request,booktest/htmlShow.html, context)

-- urls.py

url(r^htmlEditor/, views.htmlEditor),
url(r^htmlEditorHandle/, views.htmlEditorHandle),

-- htmlShow.html

<!DOCTYPE html>
<html>
<head>
<title>htmlShow</title>
</head>
<body>
{{ content|safe }}
<!-- 防止html转义 -->
</body>
</html>

 

以上是关于富文本编辑器的使用 | Django开发的主要内容,如果未能解决你的问题,请参考以下文章

python3Django中使用Uediter百度富文本编辑器的配置方法

python3Django中使用Uediter百度富文本编辑器的配置方法

Django Admin后台使用tinymc 富文本编辑器

django中集成富文本编辑器

django之百度Ueditor富文本编辑器后台集成

用django-tinymce搞个富文本编辑器