콘텐츠 SaaS | 통합 라이브러리 - UI 확장으로서의 Markdown 편집기

Markdown 편집기 UI 확장을 개발하고 이를 Bloomreach Content 환경에 대한 사용자 정의 통합으로 추가하십시오.

최근 Bloomreach Content(SaaS)는 Integrations Library - UI Extensions 기능을 출시했습니다. 이 기능을 사용하여 문서 필드 확장을 사용자 정의 통합으로 추가할 수 있습니다. 이렇게 하면 자신만의 콘텐츠 유형 필드를 만들 수 있는 새로운 가능성이 열립니다.

작동 방식은 다음과 같습니다.

UI 확장(사용자 정의 통합) 응용 프로그램이 경험 관리자의 콘텐츠 유형 필드 내부에 iframe으로 로드됩니다.

UI 확장 응용 프로그램은 UI Extension Client Library을 사용하여 응용 프로그램과 경험 관리자 간에 통신합니다. 주로 CMS에서 필드 값을 저장하고 읽습니다.

UI 확장 응용 프로그램은 클라이언트 라이브러리를 포함하는 한 잘 알려진 프런트엔드 프레임워크(예: React, Angular, Vue 또는 일반 JS)에서 빌드할 수 있습니다.

추가 구성 및 컨텍스트(예: CMS 사용자 또는 로캘)를 UI 확장 응용 프로그램과 함께 전달할 수 있습니다.

이 블로그에서는 편집자가 마크업을 위해 Markdown에서 편집할 수 있는 새로운 UI 확장을 만들 것입니다. Markdown 마크업은 요즘 모바일 네이티브 애플리케이션에서 자주 사용됩니다. 저는 최근에 Bloomreach Content 및 Flutter와의 통합을 .

이 마크다운 편집기는 Flutter SDK를 보완합니다. 마크다운 편집기 자체는 https://stackedit.io/ 과의 통합입니다. 제 생각에는 매우 잘 구성되고 사용하기 쉬운 마크다운 편집기입니다.

프런트엔드 프로젝트

먼저 UI 확장 응용 프로그램을 새 프런트엔드 프로젝트로 만듭니다. 저는 React에 매우 익숙하므로 간단한 React 프로젝트를 생성하겠습니다.

yarn create react-app markdown-ui-extension

UI 확장 클라이언트 라이브러리를 설치합니다.

yarn add @bloomreach/ui-extension

플러그인 코딩

UI 확장을 등록합니다.

const ui = await UiExtension.register();

현재 필드 값을 가져옵니다.

const brDocument = await ui.document.get();
const value = await ui.document.field.getValue();

필드 값 설정:

ui.document.field.setValue(‘new value’);

Markdown 편집기의 소스 코드는 다음에서 찾을 수 있습니다.

https://github.com/ksalic/markdown-field/

플러그인 배포

Markdown 편집기 플러그인은 다음 위치에 배포됩니다.

https://markdown-field.bloomreach.works/

통합 UI를 사용하여 확장 등록

개발자로서 Bloomreach Content에 로그인하고 설정 > 통합으로 이동합니다.



새 "사용자 지정 통합"추가:



모든 필드가 다음과 같이 표시되어 있는지 확인하십시오.



저장하면 이제 사용자 지정 통합이 나열되고 콘텐츠 유형에 사용할 수 있습니다.

콘텐츠 유형에 UI 확장 추가

개발자로서 새 developer project을 만들고 content type changes이 선택되어 있는지 확인하십시오!

새로 만들기 또는 편집content type .

콘텐츠 유형에 새 Open UI 문자열 필드를 추가합니다.



드롭다운에서 UI 확장을 선택합니다.



축하합니다. 이제 콘텐츠 유형에 마크다운 필드를 성공적으로 추가했습니다!



Markdown 편집기의 소스 코드는 다음에서 찾을 수 있습니다.

https://github.com/ksalic/markdown-field/