Django积木块九——富文本编辑器

富文本编辑器

前端和后端都可以用富文本编辑器

# pip install django-tinymce

# setting
'tinymce'

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

# url 
url(r'^tinymce/',include('tinymce.urls')),

# model
from tinymce.models import HTMLField
class Html(models.Model):
    content = HTMLField()
    
# admin
admin.site.register(Html)

# 创建超级用户，在后台打开就可以看到这个富文本编辑器了，而且可以写html代码的

# 前端显示
# html
<script type="text/javascript" src='{% static 'tiny_mce/tiny_mce.js' %}'></script>
    <script type="text/javascript">
        tinyMCE.init({
            'mode':'textareas',
            'theme':'advanced',
            'width':400,
            'height':100
        });
    </script>
<form method="post" action="/htmlshow">
    {% csrf_token %}
    <input type="text" name="hname">
    <br>
    <textarea name='hcontent'>哈哈，这是啥呀</textarea>
    <br>
    <input type="submit" value="提交">
</form>

# url
   url(r'^htmleditor/$',HtmlEditor),
    url(r'^htmlshow$',HtmlHandler)

# view
def HtmlEditor(request):
    return render(request,'htmlEditor.html')

def HtmlHandler(request):
    content = request.POST.get('hcontent')
    <!--数据库如何新增一条数据-->
    html = Html()
    html.content = content
    html.save()
    <!--定义上下文，是一个字典，但是在模版中调用的时候直接使用关键字就可以了-->
    context = {'content':content}
    return render(request,'htmlShow.html',context)
    
# html
{{ content|safe }}