关于网页设计:grapesjs教程一-Hello-World

42次阅读

共计 2218 个字符,预计需要花费 6 分钟才能阅读完成。

介绍

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.git
cd grapesjs
npm i
npm start

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

正文完
 0