2022年6月3日金曜日

GrapesJS のデモをローカルで起動する方法

GrapesJS のデモをローカルで起動する方法

概要

デモ用のプラグインで grapesjs-preset-webpage というのがあるのでこれを使います
大抵のコンポーネントが含まれているのでこれを使えばデモと同じ UI が起動できます
docker はなぜか対応していないのでシングルページアプリケーションとしてローカルで起動します

環境

  • Chrome 102.0.5005.61
  • GrapesJS 0.18.4
  • grapesjs-preset-webpage 0.1.11

サンプルコード

すべて CDN から取得できます
HTML ファイルを一つ作成すれば完了です

  • vim index.html
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.18.4/css/grapes.min.css" integrity="sha512-3SojaDAbWw8RPDimU3ix1LUfttuUbIvBJeEaDzkJL7LUoffq/FkZsAuaYwFYG9OdKQRPexGhcbmS+eIjaFcbzg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@0.1.11/dist/grapesjs-preset-webpage.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.18.4/grapes.min.js" integrity="sha512-pDjtzJzYuUo7iyB5QDzOE4d7sKzB1fhb+5iNkdhycJK81uoa8oQYK9c5BLQJzjFTFSWHgIrycEvGHMO2HT3KSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@0.1.11/dist/grapesjs-preset-webpage.min.js"></script>
</head>
<body>
  <div id="gjs"></div>
  <script type="text/javascript">
    var editor = grapesjs.init({
       container : '#gjs',
       plugins: ['gjs-preset-webpage'],
       pluginsOpts: {
         'gjs-preset-webpage': {
         }
       }
    });
  </script>
</body>

動作確認

  • open index.html

最後に

開発したければソースコードを持ってきて npm から起動すれば簡単にできそうです

0 件のコメント:

コメントを投稿