editorjs html

editorjs-html

편집자를 구문 분석하는 유틸리티는 HTML에 데이터를 정리합니다.

• 일반 JavaScript/TypeScript, React, Angular, VUE 또는 선택한 템플릿 엔진/프레임 워크와 함께 사용하십시오.
• 빠르고 효율적이며 가볍습니다.
• 핵심에 완전히 사용자 정의 할 수 있습니다.
• 사용자 정의 할 수있는 기본 editorjs 블록을 지원합니다.
• 자신의 블록을 구문 분석하도록 확장하십시오.

v4의 새로운 것은 무엇입니까?

• 최소한의 API 변경으로 최신 종속성을 완료하십시오.
• 중복 parseStrict() 및 validate() 함수가 제거됩니다.
• 엄격한 모드는 옵션을 통해 구성 가능합니다.
• 콘솔 오류 블록의 파서 기능이 유발할 수없는 경우. 엄격한 모드는 오류가 발생합니다.
• 코드는 더 읽기 쉽고 모듈 식입니다. 변경 사항을 쉽게 기여하고 추적 할 수 있습니다.
• Editor.js에서 직접 가져온 정의 유형은 개발이 쉬워집니다.
• 농담으로 단위 테스트.

설치

셀프 호스트, 사전 컴파일 버전.

• 브라우저 -get /.build/edjshtml.browser.js

• nodejs -get /.build/edjshtml.node.js

• 브라우저 및 노드 모두 -get /.build/edjshtml.js

NPM

npm install editorjs-html

cdn

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (브라우저 전용 빌드) : https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

용법

브라우저

  const edjsParser = edjsHTML ( ) ;
  let html = edjsParser . parse ( editorjs_clean_data ) ;
  console . log ( html ) ;

nodejs

  const edjsHTML = require ( "editorjs-html" ) ;
  const edjsParser = edjsHTML ( ) ;
  const html = edjsParser . parse ( editorjs_clean_data ) ;

  console . log ( html ) ; 

업데이트

릴리스를 참조하십시오

문서

지원되는 블록 유형

• 헤더 (H1-H6)
• 목록 (주문 및 변수)
• 중첩 된 목록
• 영상
• 구분기
• 절
• 인용하다
• 암호
• 포함시키다

전체 편집자 데이터 객체를 구문 분석합니다

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns array of html strings per block
  console . log ( HTML ) ; 

전체 editorjs 데이터 객체 (엄격한 모드)를 구문 분석합니다.

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns an error
  if ( HTML instanceof Error ) throw HTML ;

  // in case of success, returns an array of strings
  console . log ( HTML ) ; 

단일 청정 데이터 블록을 구문 분석합니다

  const edjsParser = edjsHTML ( ) ;
  const blockHTML = edjsParser . parseBlock ( editorjs_data_block ) ;
  // returns string of html for this block
  console . log ( blockHTML ) ; 

엄격한 모드

  const edjsParser = edjsHTML ( { } , { strict : true } ) ;
  // returns the list of missing parser functions
  const blockHTML = edjsParser . parse ( editorjs_data ) ;
  console . log ( blockHTML ) ;

맞춤형 블록을 확장하십시오

editorjs-html 블록의 확장 및 재정의 파서 기능을 지원합니다.

  // Example Custom or Unrecognised Block
  {
    type : "custom" ,
    data : {
      text : "Hello World"
    }
 } 

  // Parse this block in editorjs-html
  function customParser ( block ) {
    return `<custom-tag> ${ block . data . text } </custom-tag>` ;
  }

  const plugins = {
    // The keyname must match with the type of block you want to parse with this funcion
    custom : customParser
    // ... add more or overwrite
  }

  const edjsParser =  edjsHTML ( plugins ) ; 

기부금

문제를 추가하거나 버그, 검토 또는 제안에 대한 PR을 열어주세요.

새로운 파서 기능

1. 추가 파서 기능은 parsers/block-name 에 추가하십시오. 기존 기능을 확인하여 제안 사항을 확인하십시오.
2. pnpm test && pnpm build 통해 모든 테스트가 잘 작동합니다.
3. 검토를 위해 PR을 엽니 다.
4. tests 디렉토리에 테스트를 추가하십시오. 테스트가 적절한 적용 범위로 통과해야합니다.

제안 및 권장 사항

나는 당신의 의견과 제안을하고 싶습니다. 더 많은 editorjs 블록에 대한 지원이 필요하면 알려줄 수도 있습니다.

지원하다

도움이되면이 저장소에 별을주는 것이 좋습니다. 당신은 또한 나에게 커피를 살 수 있습니다

특허

MIT 공개 라이센스

작가

@pavittarx