grapesjs 사용하기

https://github.com/GrapesJS/grapesjs?tab=readme-ov-file


npm create vite@latest my-grapesjs-app -- --template vanilla
cd my-grapesjs-app
npm install grapesjs
npm install grapesjs-preset-webpage
npm run dev

을 실행하게 되면

다음과 같이

현재 디렉터리에 my-grapejs-app이라는 서브디렉터리가 하나 생기게 된다.

index.html 을 주 html로 사용하고 index.html에서 src/main.js를 끌어다 쓰는 구조로 되어 있다.

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import webpagePreset from 'grapesjs-preset-webpage'; // 새로 추가

// GrapesJS 초기화 – 플러그인 추가
const editor = grapesjs.init({
  container: '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
  plugins: [webpagePreset], // 웹페이지 프리셋 활성화: Export ZIP 기능 포함
  pluginsOpts: {
    'grapesjs-preset-webpage': {
      // 옵션: 필요시 커스텀 (e.g., navbar 추가)
    },
  },
  storageManager: {
    type: 'local',
    autosave: true,
    autoload: true,
  },
  assetManager: {
    upload: false, // 프로덕션에서 서버 업로드로 변경 가능
    autoAdd: true, // 자산 자동 추가
  },
});

// 저장 버튼 이벤트 (기존 + ZIP export 보완)
const saveButton = document.getElementById('save-button');
saveButton.addEventListener('click', () => {
  // 기존: 단일 HTML 추출 (백업용)
  const html = editor.getHtml();
  const css = editor.getCss();
  const js = editor.getJs(); // JS 추출 추가 (빠뜨리기 쉬움)

  console.log('HTML:', html);
  console.log('CSS:', css);
  console.log('JS:', js);

  // 플러그인으로 ZIP export 트리거 (자동으로 다운로드)
  editor.runCommand('gjs-export-zip'); // preset-webpage가 제공하는 커맨드
});

index.html은 다음과 같이 한다.

다음처럼 사용자가 GUI를 사용하여 간편하게 html css를 조작할 수 있게 된다.