前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一款国外开源可视化搭建框架, 轻松构建自己的网页编辑器

分享一款国外开源可视化搭建框架, 轻松构建自己的网页编辑器

作者头像
徐小夕
发布2024-06-18 16:02:11
4900
发布2024-06-18 16:02:11
举报
文章被收录于专栏:趣谈前端

前段时间我一直在设计和研究低代码搭建平台,也开源了几款可视化编辑器框架,最近在 github 上发现了一款非常强大的基于自然流布局的页面搭建框架 GrapesJS,接下来我就带大家摸索一下这款框架。

  • GrapesJS 框架基本介绍
  • 如何使用 GrapesJS 构建 web 编辑器
  • 基于 GrapesJS 构建的开源网页编辑器 craft.js
  • 更多可视化编辑器推荐

基本介绍

chrome-capture.gif

乍眼一看我们可能会认为它只是一个页面/HTML 编辑器,但它能做的不仅仅如此。GrapesJS 是一个多用途的 Web 页面搭建框架,这意味着它允许我们轻松创建一个支持拖放的任何具有类似 HTML 结构的构建器。它所包含的内容远不止网页。我们使用类似 HTML 的结构的场景有:

  • 时事通讯(例如 MJML)
  • 原生移动应用程序(例如 React Native)
  • 本机桌面应用程序(例如 Vuido)
  • PDF (例如 React PDF)

并且 GrapesJS 附带的功能和工具使我们能够制作易于使用的编辑器。这使用户无需任何编码知识即可创建复杂的类似 HTML 的模板。

同时 GrapesJS 官网上还给我们提供了3个不同场景的案例, 我们可以参考这些案例快速制作属于我们自己的web编辑器:

  • Webpage Builder
  • Newsletter Builder
  • Newsletter Builder with MJML

那么至于这些搭建框架的实现原理, 我之前的文章中也做了很多剖析和设计, 大家如果感兴趣可以参考研究一下, 接下来我们看看如何安装和使用它.

如何使用 GrapesJS 构建 web 编辑器

1. 安装

我们可以用 umd 的方式来导入:

代码语言:javascript
复制
<link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="//unpkg.com/grapesjs"></script>

也可以通过 npm 来安装:

代码语言:javascript
复制
npm i grapesjs -S

之后我们可以通过如下方式导入到项目:

代码语言:javascript
复制
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
2. 第一个demo

在安装完之后, 我们先实现一个基本的页面编辑demo:

chrome-capture (1).gif

相关代码如下:

代码语言:javascript
复制
<html>
  <head>
    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
    <script src="//unpkg.com/grapesjs"></script>
    <style>
        #gjs {
          border: 3px solid #444;
        }
        .gjs-cv-canvas {
          top: 0;
          width: 100%;
          height: 100%;
        }
    </style>
  </head>
  <body>
    <div id="gjs">
      <h1>Hello World Component!</h1>
    </div>
    <script>
       const editor = grapesjs.init({
          container: '#gjs',
          // 我们也可以使用可选的: `components: '<h1>Hello World Component!</h1>'`,
          fromElement: true,
          // 编辑器尺寸
          height: '300px',
          width: 'auto',
          // 禁用存储管理, 下面的文章我会介绍
          storageManager: false,
          panels: { defaults: [] },
         });
    </script>
  </body>
</html>

这样就实现了一个简单的编辑器, 是不是很简单呢? 我们接下来继续探索更强大的功能。

3. 添加和定义组件

我们都知道网页编辑器需要提供非常丰富的组件, 这样能帮助用户更轻松的搭建页面, 同样 grapesjs 支持添加各种自定义组件, 也内置了常用的基础组件, 我们来看一个 demo :

chrome-capture (2).gif

由以上 demo 我们可以看到添加了3个基本组件: 区块, 文本, 图片。基本实现代码如下:

代码语言:javascript
复制
const editor = grapesjs.init({
  // ...其他配置
  blockManager: {
    appendTo: '#blocks',
    blocks: [
      {
        id: 'section',
        label: '<b>Section</b>', 
        attributes: { class:'gjs-block-section' },
        content: `<section>
          <h1>H5-Dooring</h1>
          <div>积木式搭建H5页面</div>
        </section>`,
      }, {
        id: 'text',
        label: 'Text',
        content: '<div data-gjs-type="text">My Baby</div>',
      }, {
        id: 'image',
        label: 'Image',
        select: true,
        content: { type: 'image' },
        activate: true,
      }
    ]
  },
});

由代码我们可以发现我们只需要在 blockManagerblocks 里添加指定的组件即可。同时我们还可以动态的添加组件:

代码语言:javascript
复制
editor.BlockManager.add('my-block-id', {
    // ...其他配置如label
    content: {
        tagName: 'div',
        draggable: false,
        attributes: { 'some-attribute': 'some-value' },
        components: [
          {
            tagName: 'span',
            content: '<b>DooringX</b>',
          }, {
            tagName: 'div',
            components: '<span>无限可能</span>',
          }
        ]
      }
})

至于更详细的组件配置文档, 大家可以参考文档: grapesjs组件如何工作

image.png

4. 添加功能面板

仅仅实现组件添加还不够, 一个有尊严的编辑器还应该有各种功能按钮, 来实现不同用户的需求。

现在我们有了画布和自定义组件,让我们看看如何创建一个功能面板,里面有按钮(使用Panels API)。

chrome-capture (3).gif

我们可以看到顶部有3个功能按钮:

  • 是否显示组件边线
  • 显示源码
  • 显示json

首先我们需要定义用来展示功能面板的元素(样式可以自定义):

代码语言:javascript
复制
<div class="panel__top">
    <div class="panel__basic-actions"></div>
</div>

其次我们来定义挂载功能面板:

代码语言:javascript
复制
editor.Panels.addPanel({
  id: 'panel-top',
  el: '.panel__top',
});
editor.Panels.addPanel({
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'visibility',
      active: true,
      className: 'btn-toggle-borders',
      label: '<u>B</u>',
      command: 'sw-visibility',
    }, {
      id: 'export',
      className: 'btn-open-export',
      label: 'Exp',
      command: 'export-template',
      context: 'export-template', 
    }, {
      id: 'show-json',
      className: 'btn-show-json',
      label: 'JSON',
      context: 'show-json',
      command(editor) {
        editor.Modal.setTitle('Components JSON')
          .setContent(`<textarea style="width:100%; height: 250px;">
            ${JSON.stringify(editor.getComponents())}
          </textarea>`)
          .open();
      },
    }
  ],
});

我们可以定义更多的功能, 大家可以参考文档来学习使用。

5. 添加图层管理面板

在处理 Web 元素时,我们可能会发现另一个常见的工具是图层管理器。它是树状结构的,使我们能够轻松地对页面元素进行管理。要启用它,我们只需指定要渲染它的位置:

代码语言:javascript
复制
const editor = grapesjs.init({
  // ...
  layerManager: {
    appendTo: '.layers-container'
  },
  // 我们能定义一个默认的面板作为侧边图层管理器
  panels: {
    defaults: [{
      id: 'layers',
      el: '.panel__right',
      // 定义面板能否拖拽
      resizable: {
        maxDim: 350,
        minDim: 200,
        tc: 0,
        cl: 1, // 左侧可拖拽
        cr: 0,
        bc: 0,
        keyWidth: 'flex-basis',
      },
    }]
  }
});

效果如下:

chrome-capture (4).gif

我们可以看到右侧的图层面板, 可以轻松管理我们页面上的元素。

6. 添加样式配置面板

样式面板也很简单, 我们先定义对应的容器:

代码语言:javascript
复制
<div class="panel__right">
    <div class="layers-container"></div>
    <div class="styles-container"></div>
</div>

然后初始化对应的配置脚本:

代码语言:javascript
复制
const editor = grapesjs.init({
  // ...
  panels: {
    defaults: [
      // ...
      {
        id: 'panel-switcher',
        el: '.panel__switcher',
        buttons: [{
            id: 'show-layers',
            active: true,
            label: 'Layers',
            command: 'show-layers',
            // Once activated disable the possibility to turn it off
            togglable: false,
          }, {
            id: 'show-style',
            active: true,
            label: 'Styles',
            command: 'show-styles',
            togglable: false,
        }],
      }
    ]
  },
  selectorManager: {
    appendTo: '.styles-container'
  },
  styleManager: {
    appendTo: '.styles-container',
    sectors: [{
        name: 'Dimension',
        open: false,
        buildProps: ['width', 'min-height', 'padding'],
        properties: [
          {
            type: 'integer',
            name: 'The width',
            property: 'width', 
            units: ['px', '%'], 
            defaults: 'auto', 
            min: 0, 
          }
        ]
      },{
        name: 'Extra',
        open: false,
        buildProps: ['background-color', 'box-shadow', 'custom-prop'],
        properties: [
          {
            id: 'custom-prop',
            name: 'Custom Label',
            property: 'font-size',
            type: 'select',
            defaults: '32px',
            options: [
              { value: '12px', name: 'Tiny' },
              { value: '18px', name: 'Medium' },
              { value: '32px', name: 'Big' },
            ],
         }
        ]
      }]
  },
});

// 定义指令
editor.Commands.add('show-layers', {
  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
  getLayersEl(row) { return row.querySelector('.layers-container') },

  run(editor, sender) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = '';
  },
  stop(editor, sender) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = 'none';
  },
});
editor.Commands.add('show-styles', {
  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
  getStyleEl(row) { return row.querySelector('.styles-container') },

  run(editor, sender) {
    const smEl = this.getStyleEl(this.getRowEl(editor));
    smEl.style.display = '';
  },
  stop(editor, sender) {
    const smEl = this.getStyleEl(this.getRowEl(editor));
    smEl.style.display = 'none';
  },
});

我们可以看看配置后的效果:

chrome-capture (5).gif

7. 更多用法演示

除了以上介绍的功能, 我们还能实现:

  • 定义响应模式(pc, 移动, ipad),
  • 设置存储和加载数据的模式
  • 自定义主题
  • 国际化 i18n 支持

这里就不一一介绍了, 我们直接看一下配置后的演示效果:

chrome-capture (6).gif

基于 GrapesJS 构建的开源网页编辑器 craft.js

那么 GrapesJS 还有很多有意思的功能我们可以挖掘, 接下来我和大家分享一款基于GrapesJS 二次封装的一个开源编辑器框架 craft.js

chrome-capture (7).gif

我们可以使用它插件化的搭建我们自己的编辑器, 如下是一个应用在React中的例子:

代码语言:javascript
复制
import {Editor, Frame, Canvas, Selector} from "@craftjs/core";
// 定义本文组件
import {useNode} from "@craftjs/core";

const TextComponent = ({text}) => {
  const { connectors: {drag} } = useNode();

  return (
    <div ref={drag}>
      <h2>{text}</h2>
    </div>
  )
}

// 初始化编辑器
const App = () => {
  return (
    <div>
      <Editor>
        // 可编辑的区域
        <Frame resolver={TextComponent, Container}>
          <Canvas>
            <TextComponent text="趣谈前端 - 徐小夕" />
          </Canvas>
        </Frame>
      </Editor>
    </div>
  )
}

更多可视化编辑器推荐

  • h5-Dooring | H5编辑器, 积木式搭建H5页面
  • v6.dooring | 可视化大屏搭建解决方案
  • craft | 基于React的拖拽页面生成器
  • dooringx-lib | 快速高效搭建可视化拖拽平台

最后

后期我会在数据可视化和工程化上输出更多实用的开源项目和框架,如果有其他问题或需求,可以和笔者交流学习。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-06-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 趣谈前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基本介绍
  • 如何使用 GrapesJS 构建 web 编辑器
    • 1. 安装
      • 2. 第一个demo
        • 3. 添加和定义组件
          • 4. 添加功能面板
            • 5. 添加图层管理面板
              • 6. 添加样式配置面板
                • 7. 更多用法演示
                • 基于 GrapesJS 构建的开源网页编辑器 craft.js
                • 更多可视化编辑器推荐
                • 最后
                相关产品与服务
                容器服务
                腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档