如何使用 ASP.NET MVC 将使用 GrapeJS 组装的页面保存到数据库

Question

好吧，我正在使用 ASP.NET MVC 开发自己的内容管理系统，对于页面构建器，我决定使用 GrapeJS。现在，因为这对我来说是新的，我似乎无法找到一种方法来保存我将使用 GrapeJS 组装的页面。我用的是gjs-preset-webpage GrapeJS插件，唯一的JavaScript装配区如下图：

<script type="text/javascript">
        var editor = grapesjs.init({
        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
        storageManager: { autoload: 0 },
        container: '#gjs',
        fromElement: true,

        plugins: ['gjs-preset-webpage'],
        pluginsOpts: {
            'gjs-preset-webpage': {}
        }
    });
   </script>

我用过的HTML也是这样的：

<div id="gjs" style="height:0px; overflow:hidden">
    <div class="panel">
        <h1 class="welcome">Welcome to</h1>
        <div class="big-title">
            <svg class="logo" viewBox="0 0 100 100">
                <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" />
            </svg>
            <span>GrapesJS</span>
        </div>
        <div class="description">
            This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
            copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
        </div>
    </div>
    <style>
        .panel {
            width: 90%;
            max-width: 700px;
            border-radius: 3px;
            padding: 30px 20px;
            margin: 150px auto 0px;
            background-color: #d983a6;
            box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
            color: rgba(255,255,255,0.75);
            font: caption;
            font-weight: 100;
        }

        .welcome {
            text-align: center;
            font-weight: 100;
            margin: 0px;
        }

        .logo {
            width: 70px;
            height: 70px;
            vertical-align: middle;
        }

            .logo path {
                pointer-events: none;
                fill: none;
                stroke-linecap: round;
                stroke-width: 7;
                stroke: #fff
            }

        .big-title {
            text-align: center;
            font-size: 3.5rem;
            margin: 15px 0;
        }

        .description {
            text-align: justify;
            font-size: 1rem;
            line-height: 1.5rem;
        }
    </style>
</div>

现在我已经把它嵌入到我的项目中并且可以使用它组装页面了，我似乎找不到如何保存或者组装页面应该保存在哪里。谁能帮帮我？

Answer 1

您需要一个端点以允许 grapes 的存储管理器向您的站点发送当前状态信息。我保存 json 和 html 以防万一，但我认为 json 就足够了。那么你设置你的存储管理器。

const editor = grapesjs.init({
   storageManager:{
       type: 'remote',
       autosave: true, // Store data automatically
       urlStore: 'YOUR_ENDPOINT_URL',
   }
});

每当以下参数发生变化时，您都会收到对端点的调用：

gjs-assets：资产数组
gjs-components：带有您网站标记定义的对象
gjs-styles: 具有样式定义的对象
gjs-html：您的网站HTML
gjs-css：你的CSS

请确保在初始化葡萄时也注入此定义：

const editor = grapesjs.init({
       components: "YOUR_STORED_COMPONENTS_HERE",
       style: "YOUR_STORED_CSS_HERE",
       storageManager:{
           type: 'remote',
           autosave: true, // Store data automatically
           urlStore: 'YOUR_ENDPOINT_URL',
       }
    });

更多信息：Docs

如何使用 ASP.NET MVC 将使用 GrapeJS 组装的页面保存到数据库

How to Save a page assembled using GrapeJS to a database using ASP.NET MVC

asp.net-mvc

c#-3.0

grapesjs