Django Ueditor二次展示富文本内容（三）

benny

发布于 2020-04-23 13:51:59

7340

发布于 2020-04-23 13:51:59

在上一篇文章：在非admin页面使用 Django Ueditor（二）中我们使用form向前端模板渲染了Ueditor富文本编辑器界面，但当时只讲到了创建一个新文本内容的界面的做法，对于该文本内容在修改界面的二次展示并未作进一步解释，这对一些初学者很是不便，特别是不熟悉JavaScript的同学更是不知如何下手，所以出一个解决方案，关键见下文第三步。
注意：下面教程内容基于上一篇文章的环境，如对下文的表述不理解，建议先翻看上一篇文章，下文仍是以文章模型为例。

本来，展示富文本很简单：{{article.content|safe}}，但是如何把这些内容放入富文本编辑器呢？请看以下三步骤：

三步走

1、写一个url

首先，请求时是要带上能识别所请求文章的标记，如文章id，所以该url可以这样写：

urlpatterns = [
    path('manage_article/<id>/', manage_article, name='manage_article'),
]

2、写一个view函数

def manage_article(request, id):
    context = {
        'article': Article.objects.get(id=id),
        'content_form': ContentForm()
    }

    if request.method == 'GET':
        return render(request, 'app_manage/article.html', context=context)
    elif request.method == 'POST':  # 因为前端只是用form表单提交，所以我们在这里用post代替put作为修改数据的意思，简单起见，不考虑restfull那些标准做法哈
        Article.objects.filter(id=id).update(**request.POST)
        return HttpResponseRedirect('/manage/manage_article/' + id)  # 我这里是返回修改后的最新文章内容页面，等于做了一次get请求

3、前端界面依然用上一篇文章的界面代码，但是

因为这次是二次展示，是有文章内容的，所以我们应该把文章内容按照富文本的原样格式放到富文本编辑器中展示出来，我们可以用js来实现：

<script>
{% if article %}
    //如果文章有内容就填充在content_form中
    document.getElementById("id_content").value='{{ article.content|safe }}';
{% endif %}
</script>

解释：这里的id_content是根据form的字段默认设置的富文本标签id，如果你不知道它的id是什么，可以在前端按F12或者查看源码查看该文本的id是什么，一般都是id_+form的字段名称。通过DOM获取到该id的标签元素后，直接用模板语言渲染即可，这里要用上safe过滤器以原样展示富文本。

关于 Django Ueditor 的教程到此结束啦，真心希望能够帮助到各位有需要的同志们，前进路上，一起加油

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-04-10，如有侵权请联系 cloudcommunity@tencent.com 删除

django