大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 GrapesJS

GrapesJS 是一个开源、多用途的 Web 构建器框架（Web Builder Framework），其结合了不同的工具和功能，旨在帮助应用程序的开发者或者用户无需任何编码知识即可构建 HTML 模板。 GrapesJS 是替代常见 WYSIWYG 编辑器的完美解决方案，因为这些编辑器只适合内容编辑，但不适合创建 HTML 结构。

一般来说，在 CMS 等各种应用程序中的任何 “模板系统（Template System）” 都是由结构 (HTML)、样式 (CSS) 和变量组成，然后在服务器端替换为其他模板和内容并呈现给客户。

GrapesJS 具有以下特征：

• 内置丰富拖拽块：GrapesJS 附带了一组内置块，这样开发者就可以更快地构建模板。如果默认设置不够，可以随时添加自定义块
• 丰富样式：GrapesJS 实现了简单而强大的样式管理器模块，可以对画布内的任何组件进行独立的样式设置，还可以将其配置为使用任何 CSS 属性
• 响应式设计：GrapesJS 为开发者提供了优化模板所需的所有必要工具，使其在任何设备上都具有出色的外观。 通过这种方式，可以提供各种观看体验。 如果需要更多设备选项，可以轻松将其添加到编辑器中
• 结构始终处于受控状态：开发者可以尽可能多地嵌套组件，但是当结构开始增长时，层管理器就会变得非常方便。 其允许开发者以极快的速度管理和重新排列元素，始终专注于结构的架构。
• 实时出码：页面代码实时生成，开发人员还可以实现自己的存储接口以在编辑器内使用。同时提供资源管理器轻松组织媒体文件，双击图像即可更改

目前 GrapesJS 在 Github 通过 BSD-3-Clause 协议开源，有超过 20k 的 star、3.8k 的 fork、2.6k 的项目依赖量，是妥妥的前端优质开源项目。

如何使用 GrapesJS

首先需要安装相应依赖：

npm i grapesjs
// npm 模式
https://unpkg.com/grapesjs
https://unpkg.com/grapesjs/dist/css/grapes.min.css
// UNPKG

使用起来也非常简单，比如下面的代码示例：

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

更多关于 GrapesJS 的用法和知识可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/GrapesJS/grapesjs

https://grapesjs.com/

https://grapesjs.com/demo.html