Skip to content

Latest commit

 

History

History
220 lines (196 loc) · 4.88 KB

01.md

File metadata and controls

220 lines (196 loc) · 4.88 KB
Raw

Draftjs ContentState

Draftjs 是 facebook 所提出來處理 RichText 的一套 framework, 而 ContentState 就是 Draftjs 所用來儲存的格式.

Data format

以下為一個簡單的 ContentState 範例:

{
  "blocks": [
    {
      "key": "ef5ug",
      "type": "header-two",
      "depth": 0,
      "text": "ffff3f3f34f34f34f",
      "inlineStyleRanges": [],
      "entityRanges": []
    },
    {
      "key": "4lb3o",
      "type": "unordered-list-item",
      "depth": 0,
      "text": "fewewef",
      "inlineStyleRanges": [],
      "entityRanges": []
    },
    {
      "key": "icg8k",
      "type": "atomic",
      "depth": 0,
      "text": " ",
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "key": 0,
          "offset": 0,
          "length": 1
        }
      ]
    },
    {
      "key": "qnrro",
      "type": "header-four",
      "depth": 0,
      "text": "wwwwwww\n",
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 8,
          "style": "BOLD"
        },
        {
          "offset": 0,
          "length": 8,
          "style": "ITALIC"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "4v6mk",
      "type": "atomic",
      "depth": 0,
      "text": " ",
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "key": 7,
          "offset": 0,
          "length": 1
        }
      ]
    }
  ],
  "entityMap": {
    "0": {
      "mutability": "IMMUTABLE",
      "type": "HORIZONTAL_RULE",
      "data": {}
    },
    "7": {
      "mutability": "IMMUTABLE",
      "type": "IMAGE",
      "data": {
        "id": "1",
        "src": "https://tripplus-dev.s3.amazonaws.com/images/aymUm.width-800.jpg",
        "alt": "你看出來了",
        "format": "fullwidth"
      }
    }
  }
}

由上面範例可以看到, ContentState 最主要由兩個 properties 組成:

  1. blocks: 為一個 array, 包含一般內容所需的資料, Draftjs 會自己依序的 redner blocks 裡面的內容.
  2. entityMap: 為一個 object, 是特殊內容或必須自己 render 的資料

blocks

最基本 ContentState 資料結構, draftjs 會依照此資料結構依序的顯示出來

  • key: 一個唯一的識別碼
  • type: 表示此物件所代表的 ContentState 類型
  • text: 真正內容
  • inlineStyleRanges: 在內文中(text)的樣式
  • entityRanges: 這 blocks 所擁有的特殊符號(只在 type="atomic") 需要自己 render
範例
{
    "key": "qnrro",
    "type": "header-four",
    "depth": 0,
    "text": "wwwwwww\n",
    "inlineStyleRanges": [
      {
        "offset": 0,
        "length": 8,
        "style": "BOLD"
      },
      {
        "offset": 0,
        "length": 8,
        "style": "ITALIC"
      }
    ],
    "entityRanges": []
  },
  {
    "key": "4v6mk",
    "type": "atomic",
    "depth": 0,
    "text": " ",
    "inlineStyleRanges": [],
    "entityRanges": [
      {
        "key": 7,
        "offset": 0,
        "length": 1
      }
    ]
  }

以下是常用的 HTML vs ContentState type

HTML element block type
h1 header-one
h2 header-two
h3 header-three
h4 header-four
h5 header-five
h6 header-six
blockquote blockquote
pre code-block
figure atomic
hr atomic
embed atomic
image atomic
ul li unordered-list-item
ol li ordered-list-item
div unstyled*

*- Any block that is not recognized by the block rendering mapping will be treated as unstyled

而我們可以根據設計師的需求來自訂不同的樣式表

entityMap

特殊的物件形式, 在 block type="atomic" 時, 必須查找 block entityRanges, 並且對應 entityMap 裡面的資料, 一一的 render 出來

  • mutability: 資料屬性, 通常都是 IMMUTABLE
  • type: 此物件所屬的格式
  • data: 此物件所附加的額外資料
範例
{
    "0": {
      "mutability": "IMMUTABLE",
      "type": "HORIZONTAL_RULE",
      "data": {}
    },
    "7": {
      "mutability": "IMMUTABLE",
      "type": "IMAGE",
      "data": {
        "id": "1",
        "src": "https://tripplus-dev.s3.amazonaws.com/images/aymUm.width-800.jpg",
        "alt": "你看出來了",
        "format": "fullwidth"
      }
    }
  }

以下是常用的 entityMap type:

  • HORIZONTAL_RULE: 橫分隔線
  • EMBED: 內坎影片
  • IMAGE: 圖片
  • LINK: 超連結 (此 type, draftjs 已經 render 掉了, 所以不用再 render)

Reference

  1. https://draftjs.org/docs/getting-started.html
  2. https://github.com/globocom/react-native-draftjs-render
tags: Javascript Draftjs RichText