GrapesJS 免费的开源 Web Builder 框架

GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架

GrapesJS 免费的开源 Web Builder 框架

       GrapesJS 是一个免费的开源 Web Builder 框架,它有助于更​​快、更轻松地构建 HTML 模板,以便在网站、新闻通讯或移动应用程序中交付。主要是,GrapesJS 被设计为在CMS内使用,以加快动态模板的创建。为了更好地理解这个概念,请查看下图

 

GrapesJS 免费的开源 Web Builder 框架

 

通常,您可以在 CMS 等各种应用程序中找到的任何“模板系统”都由结构(HTML)、样式(CSS) 和变量组成,然后在服务器端替换为其他模板和内容并呈现在客户。

此演示展示了可能实现的示例:
网页演示 - http://grapesjs.com/demo.html
时事通讯演示 - http://grapesjs.com/demo-newsletter-editor.html

目录

特征

风格管理器 层管理器
GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架
代码查看器 资产经理
GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架
  • 本地和远程存储
  • 默认内置命令(主要用于创建和管理不同的组件)

下载

  • CDN
    • UNPKG(解决到最新版本)
      • https://unpkg.com/grapesjs
      • https://unpkg.com/grapesjs/dist/css/grapes.min.css
    • CDNJS(替换X.X.X为当前版本)
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
  • 新产品管理
    • npm i grapesjs
  • 通用电气
    • git clone https://github.com/artf/grapesjs.git

出于开发目的,您应该遵循以下说明。

用法

< 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 初始化{
      容器'#gjs'
      组件: '<div class="txt-red">Hello world!</div>' ,
      样式: '.txt-red{color: red}' , 
  } ) ; 
</脚本>

对于更实际的示例,我建议查找此演示中的代码:http : //grapesjs.com/demo.html

发展

克隆存储库并安装所有必要的依赖项(yarn强烈推荐)

$ git的克隆https://github.com/artf/grapesjs.git 
$ CD grapesjs 
$纱

启动开发服务器

$ 纱线开始

开发服务器启动后,您应该能够访问演示页面(例如http://localhost:8080

文档

在此处查看入门指南:文档

应用程序接口

API 参考可以在这里找到:API-Reference

测试

GrapesJS

GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架

GrapesJS 免费的开源 Web Builder 框架

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

GrapesJS 免费的开源 Web Builder 框架

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

Features

Blocks Style Manager Layer Manager
GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架
Code Viewer Asset Manager
GrapesJS 免费的开源 Web Builder 框架 GrapesJS 免费的开源 Web Builder 框架
  • Local and remote storage
  • Default built-in commands (basically for creating and managing different components)

Download

  • CDNs
    • UNPKG (resolves to the latest version)
      • https://unpkg.com/grapesjs
      • https://unpkg.com/grapesjs/dist/css/grapes.min.css
    • CDNJS (replace X.X.X with the current version)
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
  • NPM
    • npm i grapesjs
  • GIT
    • git clone https://github.com/artf/grapesjs.git

For the development purpose you should follow instructions below.

Usage

<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>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/artf/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Extensions

Presets

Find out more about plugins here: Creating plugins

Support

在此处了解有关插件的更多信息:创建插件

原文地址:https://github.com/artf/grapesjs, 如有侵权联系删除。

站内链接:堆栈导航——GrapesJS 免费的开源 Web Builder 框架

版权声明:vlifanv 发表于 2021-09-10 9:41:25。
转载请注明:GrapesJS 免费的开源 Web Builder 框架 | 堆栈导航

暂无评论

暂无评论...