grapes.js是一个开源的网页设计器插件类似Dreamweaver-BFW插件库

grapes.js是一个开源的网页设计器插件类似Dreamweaver

grapesjs是一个开源的网页设计器，类似Dreamweaver，他可以将一个html代码实时转换成可视化可编辑可拖拽的设计器，可以对元素属性进行编辑设置，设计完后会自动化转换成html代码。

使用方式：

第一步引入grapes的js与css文件

第二步准备dom容器元素

<div id="gjs" style="height:0px; overflow:hidden;"></div>

第三步配置参数

  var editor = grapesjs.init( {
        showOffsets: 1,//位移
        noticeOnUnload: 0,//退出时是否提示
        container: '#gjs',//dom容器元素id
        height: '100%',//高度
        fromElement: true,//是否从dom源码中生成
        storageManager: {autoload: 0}//是否自动存储到localstorage
    });
   //生成一个自定义的块
    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>`//块内的html
    })

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GrapesJS</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
<div id="gjs" style="height:0px; overflow:hidden;">
     <p>helloworld</p>
</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>

官网：https://grapesjs.com/

grapesjs常见用法

1、grapesjs获取网页设计的html代码和css代码

//获取html代码
var html = editor.getHtml();
//获取css答案
var css = editor.getCss();

2、grapesjs自定义操作栏按钮

editor.getConfig().showDevices = 0;
editor.Panels.addPanel({ id: "devices-c" }).get("buttons").add([
    { id: "set-device-desktop", command: function(e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1 },
    { id: "set-device-tablet", command: function(e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
    { id: "set-device-mobile", command: function(e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" },
    { id: "block-editor", command: function(e) { alert( editor.getCss()) }, className: "fa fa-book" }
]);

还有更多的用法，比如grapesjs如何国际化进行语言切换，如何弹出模态层、如何自定义comand指令、如何集成CKeditor、如何自定义组件、如何自定义block、如何上传自己的资源进行管理、如何管理样式、如何自定义css解释器等，都在官方文档：http://grapesjs.com/docs/modules/I18n.html#adding-new-language

grapes.js是一个开源的网页设计器插件类似Dreamweaver

网友评论0

ace.js

xheditor.js

jsmind.js

sketchpad.js

prism.js

highlight.js

tinymce.js

gantt.js

tui-image-editor.js

drawingboard.js