React Material UI 비주얼 에디터

React Material UI 비주얼 에디터

최근에는 수요가 증가한 코드 플랫폼이 없습니다. 따라서 시각적 편집기를 만드는 방법에 대한 탐구를 시작했습니다.

목표

사용자는 왼쪽 서랍의 머티리얼 구성 요소를 드롭 영역(중간/사용자 레이아웃)으로 드래그 앤 드롭하고 오른쪽 서랍의 도구 상자를 사용하여 드롭 영역에 있는 개별 구성 요소의 CSS를 편집할 수 있습니다. 다양한 장치 용도로 json 데이터 구조를 내보냅니다. 또한 코드 없는 플랫폼을 구축하려는 사람들을 위한 라이브러리가 될 수도 있습니다.

이정표

버튼, 그리드 컨테이너, 그리드 항목 및 타이포그래피와 같은 구성 요소를 사용하여 시각적 편집을 수행합니다. 종이, 아이콘 버튼, 재료 아이콘, 아코디언, 구분선 및 ImageList 구성 요소는 성과를 달성할 것입니다.

이 프로젝트의 성장을 보려면:

우리와 함께하고 협력하십시오
또는
저희에게 기부하세요:



동전
회로망
주소



USDT
BSC 네트워크
0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1


비앤비
BSC 네트워크
0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1


ETH
ETH 네트워크
0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1

1단계: 필수 핵심 개념

문서 드래그 앤 드롭:

// code to handle drag start:
// ev is the event parameter

ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);

// code to handle drop:

ev.preventDefault();
ev.stopPropagation(); // this prevents propagating events up to the target's parents something critical
let html = ev.dataTransfer.getData("text/html");
ev.currentTarget.style.border = "none";
let text = ev.dataTransfer.getData("text/plain");
let element = document.getElementById(text)
let element_prime = element.cloneNode(true)
ev.currentTarget.append(element_prime)

그러나 위의 내용은 React 방식이 아닙니다. 그리고 "손실"되고 복잡한 xml 변환을 사용해야 합니다.

2단계: .. Redux + React-DnD 소개

React-Dnd도 Redux와 마찬가지로 Flux Flow를 사용합니다. 이제 우리가 원하는 것은 React-DnD 및 Redux Global Store를 사용하여 구성 요소 계층 구조의 JSON 트리를 저장하는 것입니다. 결과적으로 이 데이터 구조를 사용하여 구성 요소를 렌더링할 수 있습니다.

참고: 구성 요소 목록에서 드래그 앤 드롭하는 데 사용되는 구성 요소와 동작이 다르기 때문에 이미 렌더링된 구성 요소를 분리해야 합니다.

React-DnD 문서를 반복하지 않겠습니다. useDrag, canDrag, isOver, isDragging, useDrop, canDrop과 같이 프로젝트에서 사용되는 기능 목록입니다.

언급할 가치가 있는 것은 구성 요소와 관련된 모든 부모 대신 대상 구성 요소를 강조 표시할 수 있는 isOver의 얕은 매개 변수입니다.

monitor.isOver({ shallow: true })

2단계 결과:

Live Demo
Introductory Video