HTML có phải là định dạng văn bản có định dạng không?

• bgcolor - Màu nền, ví dụ bgcolor="yellow" hoặc bgcolor="#0000FF"
• nền - Bản đồ hình ảnh nền, ví dụ background="granit. xpm"
• text - Màu văn bản mặc định, ví dụ text="red"
• liên kết - Màu của liên kết, ví dụ: link="green"

...

...

...

...

...

...

...

• href - Mục tiêu tham chiếu như trong. Bạn cũng có thể chỉ định một dấu neo bổ sung trong tài liệu đích đã chỉ định, ví dụ:
• tên - Tên neo, như trong

• màu - Màu văn bản, ví dụ color="red" hoặc color="#FF0000"
• size - Kích thước hợp lý của phông chữ. Kích thước logic 1 đến 7 được hỗ trợ. Giá trị có thể là tuyệt đối, ví dụ size=3 hoặc tương đối như size=-2. Trong trường hợp sau, các kích thước được thêm vào một cách đơn giản
• face - Họ phông chữ, ví dụ face=times

• src - Ví dụ: tên hình ảnh .
  Các định dạng hình ảnh được hỗ trợ là
  ". bmp" (Tệp Bitmap của Windows)
  ". pbm" (Tệp bitmap di động)
  ". pgm" (Tệp bitmap thang độ xám di động)
  ". png" (Tệp đồ họa mạng di động)
  ". ppm" (Tệp Pixelmap di động)
  ". xbm" (Tệp X Bitmap)
  ". xpm" (Tệp X Pixmap)
• width - Chiều rộng của hình ảnh. Nếu hình ảnh không vừa với kích thước đã chỉ định, nó sẽ tự động được thu nhỏ
• height - Chiều cao của hình ảnh
• căn chỉnh - Xác định vị trí đặt hình ảnh. Theo mặc định, một hình ảnh được đặt trong dòng, giống như một ký tự bình thường. Chỉ định trái hoặc phải để đặt hình ảnh ở bên tương ứng

• bgcolor - Màu nền
• width - Chiều rộng của bảng. Giá trị này là tuyệt đối tính bằng pixel hoặc tương đối tính theo phần trăm chiều rộng của cột, ví dụ: width=80%
• viền - Chiều rộng của đường viền bảng. Mặc định là 0 (= không có viền)
• không gian ô - Không gian bổ sung xung quanh các ô của bảng. Mặc định là 2
• cellpadding - Không gian bổ sung xung quanh nội dung của các ô trong bảng. Mặc định là 1

• bgcolor - Màu nền

• bgcolor - Màu nền
• width - Chiều rộng ô. Đây là giá trị tuyệt đối tính bằng pixel hoặc tương đối tính theo phần trăm của toàn bộ chiều rộng bảng, ví dụ: width=50%
• colspan - Xác định số cột mà ô này kéo dài. Mặc định là 1
• rowspan - Xác định số hàng mà ô này kéo dài. Mặc định là 1
• căn chỉnh - Căn chỉnh, các giá trị có thể là trái, phải và giữa. Mặc định là căn trái

Văn bản có định dạng là một loại trường cho phép tác giả tạo nội dung văn bản có định dạng, tương tự như trình chỉnh sửa "Những gì bạn thấy là những gì bạn nhận được" (wysiwyg) truyền thống. Điểm khác biệt chính ở đây là phản hồi Trường văn bản có định dạng nội dung (RTF) được trả về dưới dạng JSON thuần túy chứ không phải HTML. Nó cung cấp các tùy chọn định dạng văn bản phổ biến như đoạn văn, danh sách và trích dẫn khối, đồng thời cho phép các mục nhập và nội dung trong Không gian nội dung của chúng tôi được liên kết động và được nhúng trong luồng văn bản

Định dạng Rich Text là gì?

Định dạng văn bản có định dạng là một định dạng tệp tài liệu độc quyền với thông số kỹ thuật được xuất bản do Tập đoàn Microsoft phát triển từ năm 1987 đến năm 2008 để trao đổi tài liệu đa nền tảng với các sản phẩm của Microsoft

Văn bản đa dạng thức trên ứng dụng web

Thanh menu ở đầu trình soạn thảo Văn bản có định dạng cung cấp cho tác giả tất cả các khả năng định dạng văn bản thông thường, bao gồm tạo liên kết đến một URL tĩnh và chèn liên kết đến các mục nhập Nội dung và nội dung từ trong cùng một không gian Nội dung

Nút Nhúng mục nhập (trên cùng bên phải) nhúng mục nhập Nội dung dưới dạng khối hoặc thành phần nội tuyến

tùy biến

Một khía cạnh quan trọng của Rich Text là khả năng tùy chỉnh trường theo cách mà các tác giả bị giới hạn trong việc sử dụng các tùy chọn định dạng được chỉ định

Ví dụ: bạn có thể giới hạn các tùy chọn định dạng chỉ bao gồm các thẻ đoạn văn hoặc giới hạn các loại mục nhập có thể được siêu liên kết hoặc nhúng

Việc tùy chỉnh có thể thực hiện trên Web App hoặc thông qua API

Văn bản có định dạng trên Phản hồi API

Phản hồi API RTF được trả về dưới dạng một mảng JSON gồm các nút tuân theo định dạng của cây cú pháp trừu tượng

Sau đây là một ví dụ về phản hồi RTF REST API trả về một đoạn — "Văn bản này quan trọng" — với từ "quan trọng" được đánh dấu đậm

{
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
      "data": {},
      "content": [
        {
          "nodeType": "text",
          "value": "This text is ",
          "data": {},
          "marks": []
        },
        {
          "nodeType": "text",
          "value": "important",
          "data": {},
          "marks": [
            "type": "bold"
          ]
        }
      ]
    }
  ]
}

Các mục được nhúng và được liên kết trong văn bản có định dạng

Văn bản có định dạng cho phép người chỉnh sửa liên kết và nhúng các mục trong luồng văn bản trong giao diện người dùng. Các liên kết này được trả về trong phản hồi API RTF dưới dạng tham chiếu và dữ liệu được tham chiếu được trả về trong một đối tượng riêng biệt (thêm về điều này bên dưới). Với tư cách là nhà phát triển, điều này mang lại cho bạn sự linh hoạt ở giao diện người dùng để xây dựng HTML mà bạn cần cho các nội dung và mục nhập được liên kết thay vì phải xử lý HTML cố chấp và định dạng từ API

Ví dụ, bạn có thể muốn

• Sử dụng trình bao bọc liên kết neo tùy chỉnh, chẳng hạn như liên kết Bộ định tuyến React hoặc Liên kết NextJS trong ứng dụng trang đơn của bạn cho các liên kết nội tuyến trong Văn bản có định dạng
• Sử dụng Contentful Images API để thay đổi kích thước, cắt và thao tác với hình ảnh được trả về dưới dạng nội dung được liên kết
• Kết xuất một tiện ích chẳng hạn như thư viện hình ảnh, hộp mô tả sản phẩm, biểu mẫu đăng ký, cửa sổ chú thích hoặc bất kỳ thứ gì khác trong quy trình của RTF

Ảnh chụp màn hình sau đây hiển thị một mục siêu liên kết, theo sau là một mục được nhúng

Đây là một ví dụ về phản hồi API cho mục nhập siêu liên kết

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

và đây là ví dụ về phản hồi API cho mục nhập được nhúng

{
  data: {
    target: {
      sys: {
        id: "67890", # Linked entry ID
        type: "Link",
        linkType: "Entry" # This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [ ],
      value: "",
      nodeType: "text"
    }
  ],
    nodeType: "embedded-entry-inline" # The nodeType tells us how the editor linked the entry
}

Hiển thị các tham chiếu Văn bản có định dạng bằng cách sử dụng API REST

Quan sát ở trên rằng các mục được liên kết trong luồng của RTF được trả về dưới dạng tham chiếu không có dữ liệu đi kèm. Dữ liệu cho các mục được liên kết được tham chiếu trong luồng của RTF nằm trong một nút riêng biệt được trả về từ phản hồi API REST. đối tượng includes

• includes.Entry chứa dữ liệu cho các mục được liên kết được tham chiếu trong phản hồi RTF
• includes.Asset bao gồm dữ liệu cho nội dung được liên kết được tham chiếu trong phản hồi RTF (e. g. hình ảnh và phương tiện truyền thông)

Dưới đây là ví dụ về nút includes trong phản hồi API REST, cùng với nút

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

{
  "items": [
    {
      "fields": {
        "richText": {
          "content": [
            {
              "data": {
                "target": {
                  "sys": {
                    "id": "12345", // Find the entry with this ID in the includes["Entry"] object below
                    "type": "Link",
                    "linkType": "Entry"
                  }
                }
              },
              "content": [],
              "nodeType": "embedded-entry-block"
            },
            {
              "data": {
                "target": {
                  "sys": {
                    "id": "67890", // Find the entry with this ID in the includes["Asset"] object below
                    "type": "Link",
                    "linkType": "Asset"
                  }
                }
              },
              "content": [],
              "nodeType": "embedded-asset-block"
            }
          ]
        }
      }
    }
  ],
  "includes": {
    "Entry": [
      {
        "sys": {
          "id": "12345", // Here we have all the data for the linked Entry inside the RTF response
          "type": "Entry",
          "contentType": {
            "sys": {
              "type": "Link",
              "linkType": "ContentType",
              "id": "videoEmbed"
            }
          }
        },
        "fields": {
          "title": "Example video embed",
          "embedUrl": "https://www.youtube.com/embed/12345"
        }
      }
    ],
    "Asset": [
      {
        "sys": {
          "id": "67890", // Here we have all the data for the linked Asset inside the RTF response
          "type": "Asset"
        },
        "fields": {
          "title": "my-image",
          "description": "Image description",
          "file": {
            "url": "//images.ctfassets.net/.../example.jpg",
            "fileName": "example.jpg"
          }
        }
      }
    ]
  }
}

Nếu bạn đang sử dụng thư viện ứng dụng khách Nội dung để thực hiện cuộc gọi đến API Contentful REST, các mục nhập và nội dung được liên kết đó trong RTF sẽ được giải quyết cho bạn. Điều này có nghĩa là dữ liệu sẽ được chèn vào luồng của RTF, cho phép bạn truy cập. g.

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

Để hiểu cách các thư viện máy khách giải quyết các liên kết trong RTF, hãy xem gói contentful-resolve-response, gói này chuyển đổi các nút phẳng thành một cây dữ liệu phong phú khi sử dụng thư viện máy khách JavaScript

Tóm lại

• Siêu liên kết một mục có nghĩa là hiển thị một liên kết neo hướng tới URL của một mục riêng biệt
• Nhúng một mục nhập có nghĩa là hiển thị nội dung của Mục nhập được liên kết này trong luồng văn bản, cho dù ở cấp độ nội tuyến hay cấp độ khối
• Tham chiếu đến các mục nhập và nội dung được liên kết được cung cấp trong phản hồi Rich Text thô từ API REST
• Các tham chiếu đến các mục nhập và nội dung được liên kết sẽ được giải quyết cho bạn nếu bạn đang sử dụng thư viện ứng dụng Contentful để thực hiện yêu cầu Contentful

Kết xuất phản hồi Văn bản có định dạng từ API REST với các mục và nội dung được liên kết ở giao diện người dùng

Contentful cung cấp cho bạn các công cụ để tăng tốc quy trình làm việc của bạn ở giao diện người dùng và cho phép bạn làm việc với dữ liệu RTF và hiển thị các nút thành HTML — trình kết xuất RTF. Có một số gói trình kết xuất RTF có sẵn cho các ngôn ngữ lập trình và khung yêu thích của bạn — xem trên GitHub

Ví dụ mã sau đây sử dụng phản hồi từ API REST được xử lý bởi thư viện máy khách JavaScript và hiển thị phản hồi đó bằng Trình kết xuất phản ứng văn bản có nội dung phong phú có sẵn từ NPM để minh họa các khái niệm trong JavaScript và React

Phản hồi RTF bên dưới bao gồm mục nhập được liên kết thuộc loại

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

Hiển thị phản hồi Văn bản có định dạng từ API GraphQL với các mục nhập và nội dung được liên kết ở giao diện người dùng

Contentful GraphQL API không yêu cầu thư viện máy khách để xử lý các mục được liên kết

Phản hồi RTF từ API GraphQL khác và chứa hai nút cấp cao nhất

"richTextResponse": {
  // JSON structure of the RTF
  "json": {
    # ...
  }
  // all referenced assets/entries
  "links": {
    # ...
  }
}

Các tham chiếu không được giải quyết tự động bên trong JSON văn bản có định dạng từ API GraphQL. Điều này có nghĩa là chúng ta phải thực hiện một cách tiếp cận khác để hiển thị và giải quyết các liên kết khi sử dụng GraphQL

Bạn vẫn có thể sử dụng

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

Một giải pháp phổ biến để hiển thị nội dung nội dung được nhúng với phản hồi Văn bản có định dạng trong JavaScript là tạo bản đồ nội dung (

{
  data: {
    target: {
      sys: {
        id: "12345", // Linked entry ID
        type: "Link",
        linkType: "Entry"  // This is a linked entry — observe this is a reference with no data — yet!
      }
    }
  },
  content: [
    {
      marks: [],
      value: "the link text",
      nodeType: "text"
    }
  ],
  nodeType: "entry-hyperlink" # The nodeType tells us how the editor linked the entry
}

Sự khác biệt giữa HTML và văn bản phong phú là gì?

HTML có phải là RTF không?

HTML phong phú so với HTML là gì?

Sự khác biệt giữa RTF và HTML Outlook là gì?