Memex uses Editor.js (https://editorjs.io/) as Rich Text Component editor. Visit our git repository (https://github.com/memexdata/richtext-editorjs) to see example codes.

JSON

{
   time: 1698126755378,
   blocks: [
      {
         id: "zOwSHLxwIw",
         type: "header",
         data: {
            text: "Heading 1",
            level: 1,
         },
      },
      {
         id: "qx9mDrtUDn",
         type: "header",
         data: {
            text: "Heading 2",
            level: 2,
         },
      },
      {
         id: "jt6zNZL4Uq",
         type: "header",
         data: {
            text: "heading 3",
            level: 3,
         },
      },
      {
         id: "z9QXLLWyMe",
         type: "header",
         data: {
            text: "heading 4",
            level: 4,
         },
      },
      {
         id: "Tbqqwuep8z",
         type: "header",
         data: {
            text: "heading 5",
            level: 5,
         },
      },
      {
         id: "L5DZMm6Bjq",
         type: "header",
         data: {
            text: "heading 6",
            level: 6,
         },
      },
      {
         id: "CiRlT-xNGp",
         type: "delimiter",
         data: {},
      },
      {
         id: "DZU9kLLw0O",
         type: "paragraph",
         data: {
            text: "<b>Bold Text</b>",
         },
      },
      {
         id: "xnj-isZu7O",
         type: "paragraph",
         data: {
            text: "<i>Italic Text</i>",
         },
      },
      {
         id: "2Ct_0_cWdB",
         type: "paragraph",
         data: {
            text: "<u class=\"cdx-underline\">Underline Text</u>",
         },
      },
      {
         id: "MlW_zcTuhi",
         type: "paragraph",
         data: {
            text: "<code class=\"inline-code\">Codes</code>",
         },
      },
      {
         id: "MlW_zcTuhi",
         type: "paragraph",
         data: {
            text: "<a href=\"https://memexdata.io/\">Add link</a>",
         },
      },
      {
         id: "rpgsg7whnA",
         type: "delimiter",
         data: {},
      },
      {
         id: "f2UfagImZI",
         type: "list",
         data: {
            style: "ordered",
            items: [
               "Ordered list",
               "Ordered list",
               "Ordered list",
            ],
         },
      },
      {
         id: "wIzeAK5uaH",
         type: "list",
         data: {
            style: "unordered",
            items: [
               "Unordered list",
               "Unordered list",
               "Unordered list",
            ],
         },
      },
      {
         id: "S3yk6gyOof",
         type: "delimiter",
         data: {},
      },
      {
         id: "Bsfs2qrZHl",
         type: "quote",
         data: {
            text: "Blockquote",
            caption: "Quote description",
            alignment: "left",
         },
      },
      {
         id: "syVKVQ9o_i",
         type: "delimiter",
         data: {},
      },
      {
         id: "zLie2fsleZ",
         type: "checklist",
         data: {
            items: [
               {
                  text: "Checklist",
                  checked: true,
               },
               {
                  text: "Checklist",
                  checked: false,
               },
               {
                  text: "Checklist",
                  checked: false,
               },
            ],
         },
      },
      {
         id: "629b1LnfTb",
         type: "delimiter",
         data: {},
      },
      {
         id: "9IGuilRmh6",
         type: "table",
         data: {
            withHeadings: true,
            content: [
               [
                  "Table Header",
                  "Table Header",
               ],
               [
                  "Table body",
                  "Table body",
               ],
               [
                  "Table body",
                  "Table body",
               ],
            ],
         },
      },
      {
         id: "d0vWNFnwfm",
         type: "delimiter",
         data: {},
      },
      {
         id: "17lUs66C7W",
         type: "image",
         data: {
            file: {
               url: "https://d2r3417lbom0xu.cloudfront.net/memex/IMAGE/2023/10/24/20231024145132a15e685f-6663-42bf-96ba-d2fb5d6b3938.jpg",
            },
            caption: "Image Caption",
            withBorder: false,
            stretched: false,
            withBackground: false,
         },
      },
      {
         id: "nnzeyFdlqX",
         type: "embed",
         data: {
            service: "youtube",
            source: "https://www.youtube.com/watch?v=iDcbgocMPC8",
            embed: "https://www.youtube.com/embed/iDcbgocMPC8",
            width: 580,
            height: 320,
            caption: "",
         },
      },
      {
         id: "3HzjraIsue",
         type: "delimiter",
         data: {},
      },
      {
         id: "Ue2SVzL0dA",
         type: "raw",
         data: {
            html: "<h1>Hello, world!</h1>\n<p>This is RAW HTML block.</p>\n<p>It contains a <strong>main heading</strong> and <em> paragraph </em>.</p>",
         },
      },
   ],
   version: "2.28.0",
}

HTML

Heading 1

Heading 2

heading 3

heading 4

heading 5
heading 6

Bold Text

Italic Text

Underline Text

Codes


  1. Ordered list
  2. Ordered list
  3. Ordered list
  • Unordered list
  • Unordered list
  • Unordered list

Blockquote

Quote description

  • Checklist
  • Checklist
  • Checklist

Table HeaderTable Header
Table bodyTable body
Table bodyTable body

Image Caption

Image Caption


Hello, world!

This is RAW HTML block.

It contains a main heading and paragraph .