介绍

grapesjs是一个开源的网页设计器，你能够了解为在线低配版Dreamweaver，和Dreamweaver不同的是，grapesjs能够灵便的进行二次开发，实际上grapesjs只是构建了设计器最根底的局部，没有二次开发grapesjs也没有意义，如果你恰好有以下需要，那么grapesjs将非常适合你

  • 页面在线设计编辑，并且能自定义组件
  • 能够导出源码
  • 提供属性配置
  • 灵便的二次开发机制

应用

grapesjs应用办法很简略，如果是html页面，能够间接通过导入js和css即可

<!doctype html><html lang="en"><head>    <meta charset="utf-8">    <title>GrapesJS</title>    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.16.27">    <script src="https://grapesjs.com/js/grapes.min.js?v0.16.27"></script>    <style>        body,        html {            height: 100%;            margin: 0;        }    </style></head><body><div id="gjs" style="height:0px; overflow:hidden;">    Hello Wold</div><script type="text/javascript">    var editor = grapesjs.init( {        showOffsets: 1,        noticeOnUnload: 0,        container: '#gjs',        height: '100%',        fromElement: true,        storageManager: {autoload: 0}    });    editor.BlockManager.add('testBlock', {        label: 'Block',        attributes: {class: 'gjs-fonts gjs-f-b1',title:'hello'},        content: `<div style="text-align:center"><span>Hello World</span></div>`    })</script></body></html>

运行成果

和官网相比，咱们发现会少了很多组件

后面提到过，grapesjs只是提供网页设计的根底框架，并不蕴含具体的组件，这么设计也是正当的，因为同样的页面应用不同的框架生成的代码就不一样，这个是无奈对立的，所以交给开发者自行实现是比拟适合的。那如何做到和官网一样的成果呢，这里须要借助grapesjs的插件grapesjs-preset-webpage，批改代码如下：

<!doctype html><html lang="en"><head>    <meta charset="utf-8">    <title>GrapesJS</title>    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.16.27">    <script src="https://grapesjs.com/js/grapes.min.js?v0.16.27"></script>        <!--引入grapesjs-preset-webpage-->    <link rel="stylesheets" href="https://grapesjs.com/stylesheets/grapesjs-preset-webpage.min.css">    <script src="https://grapesjs.com/js/grapesjs-preset-webpage.min.js?v0.1.11"></script>    <style>        body,        html {            height: 100%;            margin: 0;        }    </style></head><body><div id="gjs" style="height:0px; overflow:hidden;">    Hello Wold</div><script type="text/javascript">    var editor = grapesjs.init( {        showOffsets: 1,        noticeOnUnload: 0,        container: '#gjs',        height: '100%',        plugins: ['grapesjs-preset-webpage'],        fromElement: true,        storageManager: {autoload: 0}    });    editor.BlockManager.add('testBlock', {        label: 'Block',        attributes: {class: 'gjs-fonts gjs-f-b1',title:'hello'},        content: `<div style="text-align:center"><span>Hello World</span></div>`    })</script></body></html>

当初和官网就放弃一样

开发

只需以下命令就能运行grapesijs源码

git clone https://github.com/artf/grapesjs.gitcd grapesjsnpm inpm start

命令执行后会主动关上一个测试页面