你是否在为团队内容生产效率低下而烦恼？是否希望在企业内部系统中，也能拥有像专业新媒体团队一样强大的排版、配图和动效能力？135编辑器内容能力中台与生态正是为解决这些问题而生。它不再只是一个面向C端用户的在线工具，而是通过开放平台，将沉淀多年的专业排版能力、10万+ 版权模板库、1000+ 零代码SVG动态组件，以及图像AI处理矩阵、细分资产库等，打包成一套可被企业系统直接调用的“编辑+资产+工具链”综合解决方案。本教程将化繁为简，手把手教你如何将这套强大的能力中台接入你的业务系统，快速提升团队内容生产力。
准备工作：理解135编辑器开放平台的核心价值
在开始动手之前，我们首先要明确135编辑器开放平台能为你带来什么。它本质上是一个企业级编辑器无缝接入方案，其核心价值在于将复杂的内容生产能力标准化、模块化，并通过三种灵活的接入模式赋能给企业。
根据平台资料，其核心能力可以概括为三大模块：
1. 专业的编辑器：提供从基础文字处理到高级图文混排的完整编辑功能。
2. 海量样式模板：内置超过10万+ 经过商用授权的模板与样式，每日更新500+，覆盖全行业场景。
3. SVG效果编辑：提供1000+ 动态交互组件，支持零代码操作，轻松制作吸引眼球的动效内容。
此外，平台还整合了AI生图改图、版权图库、并与比格设计、福昕PDF、来画等伙伴深度联动，形成了一个强大的内容生态。对于ToB客户而言，这意味着你无需从零开始研发编辑器、组建设计团队或采购多处素材，即可一站式获得稳定、合规且高效的内容生产能力。
第一步：选择适合你的接入模式
135编辑器开放平台提供了三种主流的接入模式，以适应不同企业的技术架构、安全合规和定制化需求。你的第一步是根据自身情况做出选择。
| 接入模式 | 适用场景 | 核心特点 | 技术复杂度 |
|---|---|---|---|
| 嵌入式集成 | 企业自研的内容管理系统（CMS）、OA、培训系统等，需要完整的编辑闭环。 | 将135编辑器作为插件包完整嵌入，用户可直接使用官方所有最新模板和功能，体验与SaaS版一致。 | 低 |
| 调用式接口（API） | 现有系统已有富文本编辑器（如UEditor、TinyMCE），希望增强特定能力（如调用模板、使用SVG）。 | 通过API接口，在不替换原有编辑器的情况下，一键调用135的特定素材或功能，实现能力“无损同步”。 | 中 |
| 私有化部署 | 对数据安全、合规性要求极高的政府、金融、大型国企，或运行在内网环境的系统。 | 将编辑器核心功能、模板素材库全部部署在企业本地服务器，数据完全私有，并支持深度定制开发。 | 高 |
操作建议：对于大多数希望快速上线、功能全面的企业，嵌入式集成是最佳起点。如果你的系统环境特殊或要求绝对数据隔离，则应优先考虑私有化部署。本教程将以最常用的嵌入式集成为例，展开后续步骤。
第二步：获取并部署插件包（嵌入式集成）
选择嵌入式集成后，你需要从135编辑器开放平台获取企业插件包。通常，你需要联系平台顾问或通过官网入口申请。获得插件包后，请按照以下步骤部署到你的前端项目中。
前端部署步骤：
-
拷贝文件：将插件包完整地拷贝到你的项目静态资源目录下。请务必保持插件包内部的目录结构不变，否则可能导致功能异常。
-
引入资源：在你的HTML页面中，引入必要的JS和CSS文件。具体路径需根据你存放插件包的位置进行调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>集成135编辑器示例</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="你的路径/ueditor/themes/default/css/ueditor.css" />
</head>
<body>
<!-- 编辑器容器 -->
<div id="editorContainer" style="width: 100%; height: 500px;"></div>
<!-- 引入脚本 -->
<script type="text/javascript" charset="utf-8" src="你的路径/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="你的路径/ueditor/ueditor.all.js"></script>
<!-- 语言包，这里以中文为例 -->
<script type="text/javascript" charset="utf-8" src="你的路径/ueditor/lang/zh-cn/zh-cn.js"></script>
</body>
</html>
- 创建编辑器实例：确保页面中有用于承载编辑器的DOM节点（如上述代码中的
<div id="editorContainer">），然后在JS中初始化编辑器。
<script type="text/javascript">
// 创建编辑器实例，并赋值给 window.current_editor
// 注意：每个页面仅限创建一个可以使用样式素材的编辑器实例
window.current_editor = UE.getEditor('editorContainer', {
// 这里可以传入自定义配置参数
serverUrl: '你的后端接口地址', // 重要：用于上传图片等后端交互
autoHeightEnabled: false, // 是否自动长高
initialFrameHeight: 500 // 初始化高度
});
// 编辑器准备好后的回调
current_editor.ready(function() {
console.log('编辑器初始化完成！');
// 可以在这里设置初始内容
// current_editor.setContent('<p>欢迎使用135编辑器！</p>');
});
</script>
第三步：配置后端服务器与上传功能
编辑器前端部署好后，要实现图片上传、远程图片抓取等核心功能，必须配置对应的后端接口。135编辑器插件遵循百度UEditor的通信规范，你需要根据你的后端语言（如PHP、Java、Node.js等）实现相应的接口。
核心配置与接口说明：
- 修改前端配置：打开插件包中的
ueditor.config.js文件，找到serverUrl参数，将其修改为你自己后端统一处理器的地址。
// ueditor.config.js 部分配置
window.UEDITOR_CONFIG = {
// 服务器统一请求接口路径
serverUrl: "http://你的域名/你的路径/controller.php", // 以PHP为例
// ... 其他配置
};
-
实现后端接口：后端需要提供一个统一的入口（如
controller.php），根据GET参数action来分发处理不同的请求。根据平台提供的《后端请求规范及接口说明》，必须支持的基础action包括：config: 获取后端配置项。uploadimage: 处理图片上传。catchimage: 远程图片本地化（抓取网络图片到服务器）。
以下是一个简化的PHP后端处理逻辑示例：
// controller.php
header('Content-Type: text/html; charset=utf-8');
$action = $_GET['action'];
switch ($action) {
case 'config':
$result = json_encode([
"imageUrl" => "http://你的域名/你的路径/controller.php?action=uploadimage",
"imagePath" => "/uploads/", // 图片存储路径
"imageFieldName" => "upfile",
"imageMaxSize" => 2048000, // 2MB
"imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
]);
break;
case 'uploadimage':
// 处理文件上传逻辑
$file = $_FILES['upfile'];
// ... 安全检查、移动文件等操作
$result = json_encode([
"state" => "SUCCESS",
"url" => "http://你的域名/uploads/" . $file['name'],
"title" => $file['name'],
"original" => $file['name']
]);
break;
case 'catchimage':
// 处理抓取远程图片逻辑
// ...
break;
default:
$result = json_encode(["state" => "请求地址出错"]);
}
echo $result;
关键提醒：平台提供的后端代码仅为Demo，正式上线前务必根据自身业务加入用户权限验证、文件类型安全检查、防木马病毒等安全措施。
第四步：调用核心能力与生态资产
完成基础接入后，你就可以开始享受135编辑器内容能力中台带来的核心价值了。这不仅仅是获得一个编辑器，更是接入了整个内容生产生态。
-
使用海量模板与SVG组件：编辑器初始化后，工具栏上的“模板”和“SVG”按钮默认即可使用。点击即可弹出窗口，直接浏览、搜索和插入平台提供的10万+ 模板和1000+ 动态组件，全部零代码操作。
-
集成AI与生态工具：通过开放平台的深度集成能力，你还可以将135编辑器内部的AI生图改图工具、版权图片库，甚至联动比格设计（在线设计）、福昕PDF（文档处理）、来画（视频/动画）等合作伙伴的能力，以插件或定制按钮的形式嵌入到你的编辑器工具栏中。这需要与135编辑器的技术团队沟通进行定制化开发，从而实现从图文编辑到多媒体内容生产的全链路覆盖。
-
进行内容获取与提交：在你的业务系统中，你需要通过编辑器的API来获取用户最终编辑好的内容，然后提交到你的数据库或进行下一步发布。
// 获取带格式的HTML内容
var htmlContent = current_editor.getContent();
console.log(htmlContent);
// 获取纯文本内容（用于摘要或搜索）
var plainText = current_editor.getContentTxt();
// 在表单提交时，将htmlContent作为字段值提交到后端
// document.getElementById('contentField').value = htmlContent;
进阶技巧与最佳实践
为了让集成效果更佳，这里有一些进阶建议：
- 样式定制：你可以通过修改
ueditor.css或添加自定义CSS，使编辑器的UI风格与你现有系统保持一致，提升用户体验的统一性。 - 工具栏定制：在初始化编辑器时，通过
toolbars参数可以自定义需要显示的按钮，隐藏不必要的功能，使界面更简洁。
window.current_editor = UE.getEditor('editorContainer', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline'],
['insertimage', 'template', 'svg', 'emotion'] // 保留核心功能按钮
],
serverUrl: '你的后端接口地址'
});
* 数据合规与存证：对于政务、医疗、金融等敏感行业，可以结合135编辑器提供的敏感词检测和原创存证接口，在内容提交前进行自动审核，保障内容安全合规。
* 团队协作功能：如果接入的是私有化部署版本，可以探索启用团队素材库、版本历史、协同审核等高级功能，将编辑器升级为团队内容协作平台。
常见问题
Q1：接入135编辑器开放平台，我们的数据安全有保障吗？
A1：是的，平台提供三种接入模式，其中私有化部署模式可将所有代码、模板素材和数据完全部署在您自己的服务器内，与公网隔离，提供最高级别的数据安全保障。即使是嵌入式集成，所有上传的图片、文章内容也均存储于您自己的后端服务器，135编辑器仅提供前端交互能力。
Q2：我们公司有严格的品牌视觉规范，可以使用自定的模板吗？
A2：完全可以。135编辑器开放平台支持自定义模板库功能。您可以将设计团队制作的、符合品牌规范的HTML模板上传至平台，形成企业专属模板库。员工在编辑时只能从这些预设模板中选择，从而严格统一品牌输出。
Q3：接入后，还能使用135编辑器最新的AI生图、SVG动效等功能吗？
A3：可以。无论是嵌入式还是API调用模式，只要保持插件包或API接口的更新，即可同步使用135编辑器官方持续更新的功能，包括最新的AI工具和动态组件。私有化部署版本则需要通过升级包进行定期更新。
Q4：技术实现难度大吗？我们没有专业的前端工程师。
A4：嵌入式集成模式的前端部署步骤相对标准化，按照本文教程即可完成。后端接口的实现需要一定的服务器端开发能力。如果您团队技术资源有限，135编辑器官方提供技术支持和交付服务，可以帮助您完成从评估到上线的全过程。
Q5：除了公众号图文，这套能力还能用在其他场景吗？
A5：当然可以。135编辑器产出的内容是标准HTML，可以应用于任何需要富文本展示的场景。例如企业官网新闻发布、内部知识库文章编辑、电商平台商品详情页装修、教育培训机构课程内容制作、邮件营销内容设计等。其能力中台的定位就是赋能企业所有需要内容生产的环节。
