概要
デモ用のプラグインで 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 件のコメント:
コメントを投稿