問(wèn)題背景

在Django后臺(tái)的使用admin view綁定model后，可以很方便的通過(guò)網(wǎng)頁(yè)對(duì)底層的數(shù)據(jù)表進(jìn)行增刪查改操作。
在實(shí)際工作中有一些數(shù)據(jù)字段會(huì)存儲(chǔ)了json或者其他包含換行符、空格符的文本內(nèi)容，這些文本內(nèi)容在記錄編輯詳情頁(yè)是能正常顯示換行、空格的，如下：

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出寧縣免費(fèi)做網(wǎng)站回饋大家。

但是在changelist頁(yè)面則會(huì)省略所有空格、換行，導(dǎo)致可讀性較差，如下：

原因

究其原因，其實(shí)是因?yàn)樵诰庉嬙斍轫?yè)面，存放文本的標(biāo)簽是textarea，在該標(biāo)簽中的文本內(nèi)容并不會(huì)忽略換行、空格字符，通過(guò)使用瀏覽器開(kāi)發(fā)者工具可以看到如下代碼：

{
  "en": "this is a content",
  "zh-hant": "這是默認(rèn)正文內(nèi)容"
} 

而在changelist頁(yè)面，默認(rèn)使用的是直接就是td標(biāo)簽，即直接放入一個(gè)表單元格之中，這時(shí)根據(jù)HTML標(biāo)準(zhǔn)會(huì)將所有連續(xù)的空格、換行符均處理為單個(gè)空格：

{
  "en": "this is a content",
  "zh-hant": "這是默認(rèn)正文內(nèi)容"
}

解決方案

以一個(gè)簡(jiǎn)單的test_record table的admin view為例。
表結(jié)構(gòu)：

CREATE TABLE `test_table` (
  `id` bigint(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主鍵',
  `title` varchar(255) NOT NULL DEFAULT '0',
  `content` varchar(255) NOT NULL,
  `lang_content` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 

models.py:

# coding=utf-8
from django.db import models


class TestRecord(models.Model):
    class Meta:
        db_table = "test_record"
        db_tablespace = 'test_db'

    id = models.AutoField(primary_key=True, verbose_name="id")
    title = models.CharField(max_length=255)
    content = models.CharField(max_length=255)
    lang_content = models.TextField() 

admin.py

from django.contrib import admin
from django.utils.html import format_html

from .models import TestRecord


@admin.register(TestRecord)
class TestRecordAdmin(admin.ModelAdmin):
    list_display = ('id', 'title', 'content', 'lang_content', 'lang_content_view') 

使用list_editable

將lang_content放入list_editable，如下：

 list_editable = ('lang_content', ) 

這樣在changelist頁(yè)面，將使用textarea標(biāo)簽修飾lang_content內(nèi)容，于是空格、換行符就能夠正確顯示：

同時(shí)在changelist頁(yè)面將可以直接編輯lang_content字段，無(wú)法滿足只希望該字段在changelist頁(yè)面可讀，而不可編輯的需求，相當(dāng)于是把編輯功能和顯示功能強(qiáng)制綁定無(wú)法分離，缺乏靈活性。

使用format_html--滿足只讀需求

在django.utils.html中提供了一個(gè)format_html函數(shù)，該函數(shù)可用于將所有輸出內(nèi)容按HTML格式轉(zhuǎn)義渲染。
于是可以通過(guò)在admin class中定義一個(gè)專門負(fù)責(zé)展示lang_content內(nèi)容的實(shí)例方法，將lang_content內(nèi)容用pre或textarea標(biāo)簽包裹，而后經(jīng)過(guò)format_html轉(zhuǎn)義后返回。此方法更加靈活，還可通過(guò)調(diào)整標(biāo)簽各屬性定制輸出效果--比如設(shè)置高度(rows)、寬度(cols)等。
代碼如下所示

 def lang_content_view(self, obj):
        # return format_html('{}', obj.lang_content.count('\n')+1, obj.lang_content)
        return format_html('
{}
', obj.lang_content) 

顯示效果如下：

對(duì)應(yīng)網(wǎng)頁(yè)代碼如下：

{
  "en": "this is a content",
  "zh-hant": "這是默認(rèn)正文內(nèi)容"
}