# 活码编辑器

活码编辑器是制作和编辑二维码内容的核心工具。所有内容添加、页面排版、表单关联、标签设置都在编辑器中完成。

![活码编辑器界面](https://blogcdnimg.clewm.net/2022/07/image-1658372889746_16583728901217.png)
图片说明：内容编辑器界面，含标题输入区、富文本工具栏、媒体插入按钮及模板/新建选项，右侧为二维码生成与高级功能扩展区域。

## 一、顶部重点内容区

顶部区域的内容会显示在手机扫码后的第一屏位置，适合放置最重要的信息。

- 支持添加图片、视频、音频等多媒体内容
- 可设置背景色，提供多种选色方式
- 如果只展示单个文件、图片或音视频，放在顶部区域比正文效果更好

![顶部重点内容区](https://blogcdnimg.clewm.net/2022/07/image-1658372864891_16583728654073.png)
图片说明：编辑器界面，展示标题输入区域及富文本工具栏，右侧为二维码生成与高级功能配置区。

扫码后的展示效果：

![顶部内容展示效果](https://blogcdnimg.clewm.net/2021/12/image-1640932143592_16409321451249.png)
图片说明：三张手机端界面截图，分别展示单文件全屏预览、多文件突出展示+企业卡片、图片撑满置顶多图轮播三种内容呈现模式。

顶部上传图片后，可以将图片样式设置为「撑满置顶」，并勾选渐变处理，让手机端的展示效果更自然。

顶部图片撑满置顶 + 渐变效果：

![顶部图片渐变效果](https://blogcdnimg.clewm.net/2023/07/image-1689128542378_16891285445544.png)
图片说明：四张不同场景的界面截图：左侧为玉石产品详情页，中间为安全生产承诺书签署页与湿式报警阀设备管理页，右侧为三层实木复合地板商品详情页。

## 二、正文区域

正文区域用来放置详细内容，除了图文、音视频、文件外，还支持以下组件：

- 样式库：内置多套排版样式，包括标题、正文、表格等，可设置样式颜色，让内容更美观整齐
- 跳转链接：插入链接，点击后可跳转到外部网址、账号下其他活码、目录、小程序等。[查看跳转链接详细说明](/help/content-display/redirect-link/redirect-link-overview)
- 联系方式：添加电话、微信、邮箱、地址，支持一键拨打和导航。[查看联系方式说明](/help/content-display/contact-info)
- 地理位置：添加地图位置，扫码者可点击导航。[查看地理位置说明](/help/content-display/geolocation)
- 目录列表：将多个子码以分类列表形式展示。[查看目录列表说明](/help/content-display/directory-list)

![正文区域工具栏](https://blogcdnimg.clewm.net/2022/07/image-1658372952172_16583729525457.png)
图片说明：编辑器界面展示，含标题输入区、富文本工具栏（含样式、媒体、表格等插入功能）及右侧二维码生成与高级功能扩展区域。

### 样式库

使用样式库可以快速美化内容排版，选择喜欢的样式后直接套用，支持自定义颜色。

![样式库效果](https://blogcdnimg.clewm.net/2021/12/image-1640932246046_16409322473274.png)
图片说明：展示内容编辑器中“样式库”按钮的定位与功能，用于快速插入预设样式组件。

### 跳转链接

在二维码正文中插入跳转链接，用于跳转到下一级页面，比如外部网址、账号下某个活码或目录、小程序等。

![跳转链接设置](https://blogcdnimg.clewm.net/2022/07/image-1658373074264_16583730746717.png)
图片说明：编辑器界面中“导航链接”功能按钮的高亮示意，右侧展示其在“高级功能”中的配置选项及说明。

![跳转链接展示效果](https://blogcdnimg.clewm.net/2021/09/16328421167564_image-1632842116519.png)
图片说明：左侧展示企业官网多级导航结构，右侧为艺术教育机构暑假班招生页的单链跳转流程，体现不同场景下的页面跳转逻辑设计。

## 三、关联表单

开启表单功能后，扫码者可以在页面上填写信息并提交，适合设备巡检、报名签到、无纸化登记等场景。[查看表单功能详细说明](/help/forms/form-feature)

![关联表单设置](https://blogcdnimg.clewm.net/2022/07/image-1658373198258_16583731986611.png)
图片说明：后台编辑器界面，展示如何通过“操作面板”添加表单操作项以实现扫码登记功能。

表单应用示例（设备巡检、无纸化登记）：

![表单应用示例](https://blogcdnimg.clewm.net/2021/10/16337514520895_image-1633751451476.png)
图片说明：展示TPM设备管理二维码及关联数据入口，含日常点检、维修记录等表单填写与数据查看功能。

## 四、设置二维码标签

内容编辑完成后，可以对二维码图案进行美化——添加 logo、修改码点码眼样式等。草料还提供多种标签模板，选择模板后按需修改文字和背景即可，直接下载打印使用。[查看标签设置教程](/help/qr-code-label/qr-code-label)

![二维码标签美化](https://blogcdnimg.clewm.net/2024/07/image-1721712165102_17217121655973.png)
图片说明：草料二维码后台的“草料示例”编辑页面，展示标签样式设置区域，含基础二维码、更换样式与二维码美化选项及下载打印功能。

![标签打印效果](https://blogcdnimg.clewm.net/2024/07/image-1721712197254_17217121976807.png)
图片说明：展示黑白二维码如何通过应用样式的标签模板（如人员实名卡、设备巡检、外来登记、产品信息等）实现场景化落地使用。

## 五、开始使用

[进入编辑器创建二维码](https://console.cli.im/nedit?pre_from=newcode&pageFrom=blank&create_from=22)

如果是第一次使用，建议先看 [内容展示活码制作教程](/help/operation-tutorials/content-display-qr-code-tutorial)，了解完整的制作流程。