grapejs如何自定义block组件?
还有如何自定义组件block的属性?
网友回复
blockManager.add可增加组件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-component-code-editor.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-component-code-editor.min.js"></script> <style> body, html { margin: 0; height: 100%; } .my-block { padding: 10px; background-color: #f2f2f2; border: 1px solid #ccc; } .title { font-size: 20px; color: red; } .description { font-size: 16px; color: #666; } </style> </head> <body> <div id="gjs"> </div> <script> const editor = grapesjs.init({ container: '#gjs', height: '100%', fromElement: true, storageManager: false, //... }); const blockManager = editor.BlockManager; blockManager.add('my-block', { label: 'My Block', category: 'Basic', content: '<div class="my-block"><h2 class="title">My Block</h2><p class="description">This is my custom block</p></div>', attributes: { // 在这里定义属性 myAttribute: { // 属性的默认值 default: 'default-value', // 属性的标签(显示在属性面板中) label: 'My Attribute', // 属性的类型(文本、颜色、下拉框等) type: 'text' } } }); </script> </body> </html>