文章/答案/技术大牛

发布

问GrapesJs -如何通过PHP保存
EN

Stack Overflow用户

提问于 2022-01-01 14:16:43

回答 2查看 457关注 0票数 0

我使用Xampp来尝试GrapesJS，我从github下载了GrapesJS，然后将资源复制到HTDOCS文件夹中，抓取我的浏览器然后点击Localhost :)它工作，类似于Website的出现和工作，但是我如何使用PHP保存编辑网站?，我使用从GrapesJs github中找到的完整的INDEX.HTML，只将它的名称更改为INDEX.PHP来使用PHP，所以这就是我一直使用的代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GrapesJS</title>
    <link rel="stylesheet" href="dist/css/grapes.min.css">
    <script src="dist/grapes.min.js"></script>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <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>

    <script type="text/javascript">
      var editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        height: '100%',
        fromElement: true,
        storageManager: { autoload: 0 },
        styleManager : {
          sectors: [{
              name: 'General',
              open: false,
              buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
            },{
              name: 'Flex',
              open: false,
              buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
            },{
              name: 'Dimension',
              open: false,
              buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
            },{
              name: 'Typography',
              open: false,
              buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
            },{
              name: 'Decorations',
              open: false,
              buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
            },{
              name: 'Extra',
              open: false,
              buildProps: ['transition', 'perspective', 'transform'],
            }
          ],
        },
      });

      editor.BlockManager.add('testBlock', {
        label: 'Block',
        attributes: { class:'gjs-fonts gjs-f-b1' },
        content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
      })
    </script>
  </body>
</html>

谢谢你的帮忙

javascript

php

grapesjs

回答 2

Stack Overflow用户

发布于 2022-07-28 10:12:14

这条路对我有用。

首先，添加了一个保存按钮到grapesjs面板。

editor.Panels.addButton('options',
 [{
   id: 'save-db',
   className: 'fas fa-save',
   command: 'save-db',
   attributes: {
     title: 'Save Changes'
   }
 }]
);

然后添加了保存按钮的命令。

editor.Commands.add('save-db', {
 run: function(editor, sender) {
   sender && sender.set('active', 0); // turn off the button
   editor.store();
   //storing values to variables
   var htmldata = editor.getHtml();
   var cssdata = editor.getCss();
   $.post("save.php", {
     //you can get value in post by calling this name
     "htmldata": htmldata,
     "cssdata": cssdata,
     success: function(data) {
       alert(data);
       console.log("Success");
     },
   });
 }
});

在save.php中

$editor_html_content = $_POST['htmldata'];
$editor_css_content = $_POST['cssdata'];

票数 1

Stack Overflow用户

发布于 2022-07-06 08:39:36

 editor.on('component:add', options => { 
  var html = editor.getHtml();
  var css = editor.getCss(); 
 function create () {
        $.ajax({
            url:base_url+"/savepagedata.php",    
            type: "post", 
            data: {html_data: html , css_data:css },
            success:function(result){
                console.log(result);
            }
        });
    }

});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70549438

复制

相似问题

问GrapesJs -如何通过PHP保存
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GrapesJs -如何通过PHP保存EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GrapesJs -如何通过PHP保存
EN