码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-21 19:19:01      阅读:508      评论:0      收藏:0      [点我收藏+]

标签:map   hand   pac   pos   pat   处理   orm   att   tmc   

# 这里以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开发

标签:map   hand   pac   pos   pat   处理   orm   att   tmc   

原文地址:http://www.cnblogs.com/pymkl/p/7705370.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!