grapesjs

grapesjs

如果您想将工作室编辑器嵌入您的应用程序中，我们现在提供Studio SDK，这是一种可用的视觉构建器，易于嵌入外部应用程序中，并提供grapesjs团队的支持。

grapesjs是一个免费的开源网络构建器框架，可帮助构建更快，更容易地在网站，新闻通讯或移动应用程序中交付的HTML模板。主要是， grapesjs被设计为在CMS内使用，以加快动态模板的创建。为了更好地理解这个概念，请检查下图

通常，您会在CMS（例如CMS）中找到的任何“模板系统”由结构（HTML），样式（CSS）和变量组成，然后将其替换为服务器端上的其他模板和内容，并在客户端上呈现。

该演示显示了可以实现的可能性的例子：
网页演示-http：//grapesjs.com/demo.html
时事通讯演示-http：//grapesjs.com/demo-newsletter-editor.html

目录

• 特征
• 下载
• 用法
• 发展
• 文档
• API
• 测试
• 插件
• 支持
• ChangElog
• 贡献
• 执照

特征

• 本地和远程存储

• 默认的内置命令（基本上用于创建和管理不同的组件）

下载

• CDN
  • UNPKG（解决最新版本）
    • https://*unpkg.co*m/*grapesjs
    • https://*unpkg.co*m/*grapesjs/dist/css/grapes.min.css
  • CDNJS（将XXX替换为当前版本）
    • https://cdnjs.cl**ou*dflare.com/ajax/libs/grapesjs/XXX/grapes.min.js
    • https://cdnjs.clo*udfla*r*e.com/ajax/libs/grapesjs/XXX/css/grapes.min.css
• NPM
  • npm i grapesjs
• git
  • git clone https://git*hub.**com/grapesjs/ grapesjs .git

为了开发目的，您应遵循下面的说明。

用法

grapesjs.init({
container: \’#gjs\’,
components: \'<div class=\”txt-red\”>Hello world!</div>\’,
style: \’.txt-red{color: red}\’,
});
</script>\”>

 < link rel =\" stylesheet \" href =\" path/to/grapes.min.css \" />
< script src =\" path/to/grapes.min.js \" > </ script >

< div id =\" gjs \" > </ div >

< script type =\" text/javascript \" >
  var editor = grapesjs . init ( {
    container : \'#gjs\' ,
    components : \'<div class=\"txt-red\">Hello world!</div>\' ,
    style : \'.txt-red{color: red}\' ,
  } ) ;
</ script >

对于一个更实用的示例，我建议您查找此演示中的代码：http：//grapesjs.com/demo.html

发展

遵循贡献指南。

文档

在此处检查入门指南：文档

API

API参考可以在此处找到：API参考

测试

$ pnpm test 

插件

官方插件|社区插件

包装纸

• @ grapesjs /react- grapesjs包装器，可用于您的编辑器构建自定义和声明性UI。

扩展

• grapesjs -plugin -Export-邮编档案中的导出grapesjs模板
• grapesjs -Plugin -FileStack-在资产管理器中添加FileStack上传器
• grapesjs -plugin -ckeditor-用ckeditor替换内置的RTE
• grapesjs -Tui -Image -editor grapesjs Toast UI图像编辑器
• grapesjs – 块状基础 – 基本块集
• grapesjs -plugin形式 – 一组形式组件和块
• grapesjs -Navbar-简单的Navbar组件
• grapesjs -component -countdown-简单的倒计时组件
• grapesjs js-式级别级别 – 添加gradient类型输入到样式管理器
• grapesjs JS-风格过滤器 – 将filter类型输入添加到样式管理器
• grapesjs -BG-全栈背景样式属性类型，有可能添加图像，颜色和梯度
• grapesjs -Blocks -Flex Box-添加Flexbox块
• grapesjs JS -Lory -Slider -Slider组件通过使用Lory
• grapesjs -tabs-简单选项卡组件
• grapesjs -tooltip-简单，仅CSS， grapesjs的工具提示组件
• grapesjs -custom代码 – 嵌入自定义代码
• grapesjs -Touch-启用触摸支撑
• grapesjs -INDEXEDDB-索引dexeddb的存储包装器
• grapesjs -Firestore -Cloud Firestore的存储包装纸
• grapesjs -Parser -PostCSS-使用PostCSS的grapesjs定制CSS解析器
• grapesjs -typed-打字组件，由包装键入。
• grapesjs -UI-Suggest类 – 启用SelectorManager UI中的班级自动完成
• grapesjs -fonts-自定义字体插件，添加一个UI来管理网站字体
• grapesjs -Symbols-符号插件，以重复使用网站和累积页面
• grapesjs – 单击 – 单击抓住并丢弃块和组件（不再拖放）
• grapesjs -Float-锚定另一个元素旁边的浮动元素（选定的组件，…）

预设

• grapesjs -Preset -webpage-网页构建器
• grapesjs -Preset -Newsletter-新闻通讯构建器
• grapesjs -MJML-带有MJML组件的新闻通讯构建器

在此处查找有关插件的更多信息：创建插件

支持

如果您喜欢该项目，并且希望看到它的成长，请考虑以您选择的捐款来支持我们，或通过Open Collective成为支持者/赞助商

感谢Browserstack为我们提供浏览器测试服务

执照

BSD 3句