smartblock

SmartBlock

SmartBlock.js는 JavaScript 블록 기반 편집기로 스마트 폰을 사용하여 웹 사이트에서 쉽게 컨텐츠를 작성할 수 있습니다.

ie11 / edge	파이어 폭스	크롬	원정 여행	iOS 사파리

스크린 샷

특징

• 스마트 폰으로 사용하기 쉽습니다
• 완전히 사용자 정의 할 수 있습니다
• 블록 기반
• HTML을 깨끗하게 유지하고 불필요한 태그를 닦으십시오
• 결과를 HTML 또는 JSON 으로 받으십시오
• 내용을 복사하여 붙여 넣습니다

설치하다

$ npm install smartblock --save

용법

 import * as React from 'react' ;
import { render } from 'react-dom' ;
import 'smartblock/css/smartblock.css' ;
import { SmartBlock , Extensions } from 'smartblock' ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p>hello</p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ; 

Codesandbox에서 사용해보십시오

사용자 정의하십시오

이와 같은 커스텀 블록을 추가 할 수 있습니다

 import * as React from 'react' ;
import { Extensions , CustomBlock , CustomMark } from 'smartblock' ;
Extensions . push ( new CustomBlock ( {  
  tagName : 'div' ,
  className : '.alert' ,
  icon : < SomeIconComponent />
} ) ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p>hello</p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ;

이와 같은 커스텀 인라인 요소를 추가 할 수 있습니다

 import * as React from 'react' ;
import { Extension , CustomBlock , CustomMark } from 'smartblock' ;
import 'smartblock/css/smartblock.css' ;
Extension . push ( new CustomMark ( {  
  tagName : 'span' ,
  className : '.small' ,
  icon : < SomeIconComponent />
} ) ;

render ( < >
  < SmartBlock 
    extensions = { Extensions }
    html = { '<h2>Hello World</h2><p><small>hello</small></p>' }
    onChange = { ( { json , html } ) => { console . log ( json , html ) ; } }  
  />
</ > , document . getElementById ( "app" ) ) ; 

옵션

소품	설명	유형	기본
확장	SmartBlock의 기능을 확장하는 확장 배열	확대[]	확장 배열
onchange	편집기의 내용이 변경 될 때 호출되는 콜백 함수. HTML과 JSON을 모두 얻을 수 있습니다	기능
Oninit	편집기가 초기화 될 때 호출되는 콜백 함수	기능
JSON	편집기 내용은 JSON 데이터로 초기화됩니다.	물체	{}
HTML	편집기 내용은 HTML로 초기화됩니다	끈	'' ''
쇼 테티	제목이 표시됩니다	부울	거짓
Sharbackbtn	역사를 지원하기위한 BTN이 표시됩니다	부울	거짓
자동 저장	HTML은 내용이 변경 될 때마다 로컬 스터리지에 저장됩니다.	부울	거짓
geteditorref	Editor Ref Object를 받으십시오	기능

다운로드

zip 다운로드

github

https://github.com/appleple/smartblock

기부자

@steelydylan

특허

Appleple, Inc.의 코드 및 문서 Copyright 2020 MIT 라이센스에 따라 발표 된 코드.