만족하는 DevRel 팀의 풍부한 텍스트 필드 힌트와 팁

내용이 풍부한 풍부한 풍부한 텍스트 필드는 기능이 강하다.그러나 당신은 어떻게 해야만 그것을 충분히 이용할 수 있습니까?당신의 팀은 풍부한 텍스트 목록에서 성장했다.

풍부한 텍스트 영역의 힘을 어떻게 운용할 것인가

풍부한 텍스트 필드의 유연성은 내가 Contentful에서 가장 좋아하는 기능이 되었다.우리 지역사회의 개발자들은 전방 응용 프로그램에 내용을 보여주는 데 흥미로운 다기능성을 제공하기 때문에 풍부한 텍스트 필드의 강력한 기능을 사용하고 있다.이 때문에 드프레어 팀은 이 분야를 최대한 활용하는 방법에 대한 질문을 자주 받는다.
이 글은 부유한 텍스트 게임을 업그레이드하는 방법에 대한 조언을 제공하고, 끊임없이 증가하는 지역 사회를 만족시키기 위해 정기적으로 새로운 기교와 요령을 업데이트할 것이다.우리Community Slack의 대열에 가입하여 최신식을 유지하세요!
리치 텍스트 필드가 어떻게 '보이는 대로 얻는 것' (WYSIWYG) 편집기에서 지원되는지 더 알고 싶으면, 이 편집기는 API 응답 check out this blog post 에서 순수한 JSON 형식으로 되돌아옵니다.
풍부한 텍스트 응답을 처리할 때, 우리는 항상 Contentful에서 제공하는 풍부한 텍스트 표현 패키지를 사용하여 처리 과정을 가속화하는 것을 권장합니다.내용이 풍부한 텍스트 렌더링을 통해 JSON 응답을 원하는 대로 렌더링할 수 있습니다.사용자 정의 HTML, CSS 클래스, React 구성 요소, 사용자 정의 속성 등을 보여 줄 수 있습니다!모든 풍부한 텍스트 렌더링기의 전체 목록은 available on GitHub입니다.
풍부한 문서를 찾고 있다면 click here.
최종 업데이트 날짜: 2021년 7월 5일.

풍부한 텍스트에 비디오 자원 보이기 (iframe 삽입이 아닌 것)

유튜브나 비메오가 끼워 넣은 iframe이 아닌 링크된 동영상 파일을 풍부한 텍스트 필드에 표시할 필요가 있다면, 다음은 어떻게 하는지 소개합니다.
보기this blog post 리치 텍스트 필드에 링크 항목과 자원을 보여주는 더 많은 상하문과 GraphQL과 REST API를 사용하여 iframe을 링크 항목으로 나타내는 방법에 대한 예시를 알 수 있습니다.

GraphQL API 사용

다음은 GraphQL 조회의 예입니다. 풍부한 텍스트 필드가 있는 블로그 글과 링크된 자산 블록 (이미지나 동영상 파일) 을 가져옵니다.이미지나 영상을 구분하기 위해 링크 자산의 관건적인 속성을 조회해야 한다contentType.

{
    blogPostCollection(limit: 1) {
      items {
        sys {
          id
        }
        richTextField {
          json
          links {
            assets { // Fetch the linked block assets
              block {
                sys {
                  id
                }
                url
                title
                width
                height
                description
                contentType // Make sure to request the contentType
              }
            }
          }
        }
      }
    }
  }

다음은 @contentful/rich-text-react-renderer의renderNode 옵션에서 이미지 자원 옆에 있는 스위치 박스를 사용하여GraphQL API에서 영상 자원을 렌더링하는 방법을 설명하는 예이다.
데이터를 가져오면 콘텐츠 Type 속성을 찾고 필요에 따라 HTML 비디오 태그가 있는 동영상을 DOM에 표시합니다.

import { BLOCKS } from "@contentful/rich-text-types";

function renderOptions(links) {
  // create an asset map
  const assetMap = new Map();

  // loop through the linked assets and add them to a map
  for (const asset of links.assets.block) {
    assetMap.set(asset.sys.id, asset);
  }

  return {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: (node, next) => {
        // find the asset in the assetMap by ID
        const asset = assetMap.get(node.data.target.sys.id);

        switch (asset.contentType) {
          case "video/mp4":
            return (
              <video width="100%" height="100%" controls>
                <source src={asset.url} type="video/mp4" />
              </video>
            );
          case "image/png":
            return (
              <img
                src={asset.url}
                height={asset.height}
                width={asset.width}
                alt={asset.description}
              />
            );
          default:
            return "Nothing to see here...";
        }
      },
    },
  };
}

다음은 REST API를 사용하여 반환된 데이터의 등효 예입니다Contentful JavaScript SDK.이 예에서는 GraphQL API처럼 링크 자산의 매핑을 만들 필요가 없습니다.SDK에서 풍부한 텍스트 필드의 링크를 분석했습니다.

import { BLOCKS } from "@contentful/rich-text-types";

const renderOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
      const assetType = node.data.target.fields.file.contentType;

      switch (assetType) {
        case "video/mp4":
          return (
            <video width="100%" height="100%" controls>
              <source src={node.data.target.fields.file.url} type="video/mp4" />
            </video>
          );
        case "image/png":
          return (
            <img
              src={`https://${node.data.target.fields.file.url}`}
              height={node.data.target.fields.file.details.image.height}
              width={node.data.target.fields.file.details.image.width}
              alt={node.data.target.fields.description}
            />
          );
        default:
          return "Nothing to see here...";
      }
    },
  },
};

풍부한 텍스트에 줄 바꾸기 문자 보이기

풍부한 텍스트 응답의 새 줄은 \n 로 되돌아옵니다.포켓 텍스트 렌더레이터가 \n 를 <br /> 표시로 바꾸지 않는 이유를 물어볼 수 있습니다. 포켓 텍스트 렌더레이터가 비컴파일된 상태를 유지하고 <br /> 표시가 유효한 문법이 아닌 프로그램에서 사용할 수 있도록 하기 위해서입니다. 예를 들어 React Native입니다.
React에서 웹 응용 프로그램을 개발하면 @contentful/rich-text-react-renderer 의renderText 옵션을 사용해서 \n 의 모든 실례를 <br /> 로 바꾸는 것을 권장합니다. 아래와 같습니다.이 코드 예시는 직접 추출한 것이다@contentful/rich-text-react-renderer README on GitHub.

const renderOptions = {
  renderText: text => {
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};

서식을 유지하려면 서식 있는 텍스트 필드에 복사 및 붙여넣기

구글 문서로 파일 기초?웹 페이지에서 풍부한 텍스트 필드로 텍스트를 복사해야 합니까?걱정 마!마음속에 있는 내용을 복사해서 붙여넣고, 풍부한 텍스트 편집기를 보면서 우아하게 포맷을 보존하세요.

풍부한 텍스트 영역에서 문법의 힘을 이용하다

내용이 풍부한 웹 응용 프로그램의 풍부한 텍스트 필드는 문법 통합을 허용합니다.Install the Grammarly browser extension 업무를 만족시키는 동시에 쓰기 기능을 향상시킨다.

풍부한 텍스트 슬래시 명령을 사용하여 작업 효율을 높이다

Slack, Discord, Microsoft Team 및 Confluence 등의 응용 프로그램에서 커서가 텍스트 영역에 있을 때 키보드를 사용하여 명령을 수행할 수 있는 슬래시 명령 개념에 익숙해졌을 수 있습니다.내용이 풍부한 풍부한 풍부한 텍스트 필드에도 같은 내용이 있습니다!(이 기능을 최고급 알림 목록에 추가해 주셔서 감사합니다!)
"/"을 입력하고 손끝에 사용할 수 있는 명령 목록을 보십시오!편집기를 떠나지 않는 상황에서 화살표 키와enter 키를 사용하여 내장된 항목을 만들고 삽입하며, 항목과 자원을 막습니다. 이 모든 것은 편안한 키보드에서 완성할 수 있습니다.

풍부한 텍스트에서 순수한 텍스트로?문제 없어요!

때때로 풍부한 텍스트 응답을 순수한 텍스트로 변환해야 할 수도 있습니다.예를 들어, Algolia에서 지원하는 내 개인 웹 사이트에서 검색 결과를 생성할 때 리치 텍스트를 일반 텍스트로 변환합니다.Read more about how I do this here .
우리는 풍부한 텍스트 노드에서 순수한 텍스트 문자열을 순환하고 구성하지 않고 npm이나Thread를 통해 제공하는 유용한 패키지를 제공합니다.
@contentful/rich text 일반 텍스트 렌더링 프로그램을 설치하고 documentToPlainTextString 함수를 사용하여 리치 텍스트 문서를 다음과 같이 변환합니다.

import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {}
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
          data: {}
        },
      ],
    },
  ]
};

documentToPlainTextString(document); // -> Hello world!

풍부한 텍스트 힌트 추가

우리는 정기적으로 이 블로그 글을 업데이트하여 더 많은 지역 사회의 맞춤형 풍부한 텍스트 알림을 제공할 것이다.너는 어떻게 포건 텍스트에서 무엇을 하는지 알고 싶니? 아니면 너 자신에게 어떤 건의가 있니?Contentful Community Slack에서 알려주세요.