GrapesJS

GrapesJS 是一個可視化網頁編輯框架，主要特色是能讓使用者直接透過拖拉的方式來建立網頁版型。

開始使用 GrapesJS

1. 登入 GrapesJS 取得 licenseKey

登入後點「Create SDK License」。
程式會驗證 Domain 不能亂填。
左側提供一些基本設定，調整後右側的範例程式會跟著改變。

2. 依據範例建立網頁

右側可以選擇範例程式語言，這裡用 HTML 做示範，如下： 
<!doctype html>
<html lang="en">
    <head>
        <script src="https://unpkg.com/@grapesjs/studio-sdk/dist/index.umd.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@grapesjs/studio-sdk/dist/style.css" />
    </head>
    <body>
        <div id="studio-editor" style="height: 100dvh"></div>
        <script>
            GrapesJsStudioSDK.createStudioEditor({
                root: "#studio-editor",
                licenseKey: "換成自己的 key",
            });
        </script>
    </body>
</html>
打開瀏覽器後，會看到完整的「網頁編輯器」：
參考文件

留言

張貼留言