把这页想成"买家具组装"：你不会自己打一个沙发，而是买现成的（插件），照着说明书（官方文档）拼起来。项目里 80% 的功能不用自己造轮子，直接接插件就行。接任何插件都是固定三步：看文档 → 引入资源 → 配置初始化，而且顺序绝对不能乱。本页上方那个能打字的编辑器，就是用真实 CDN 接进来的 wangEditor。
这个编辑器就是通过 CDN 引入的 wangEditor 4.7.15——先引 JS，再"创建实例 → 配置 → create"，和课件里的步骤一模一样。你可以在里面打字、加粗、插图片，下面会实时吐出对应的 HTML 源码。如果没联网加载失败，会显示提示文字，但代码讲解不受影响。
| 步骤 | 做什么 | 核心要点 |
|---|---|---|
| 第一步：看文档 | 找官方文档，搞清楚用途、依赖、兼容性 | 先读"快速开始"，别一上来就翻一堆配置项 |
| 第二步：引入资源 | 把插件的 CSS 和 JS 文件引进页面 | 顺序：CSS 在 JS 前面，依赖库在主库前面 |
| 第三步：配置/初始化 | 写 JS 配置，然后初始化插件 | 严格按官方文档的顺序初始化，不能自己乱调 |
为什么第一步一定要先看文档？因为每个插件的初始化方式都不一样，你光靠猜大概率接不上。官方文档的"快速开始"一般就是一个最小可运行例子，先把那个最小例子跑通，再往自己页面里搬，是最稳的接法。
// ❌ 错误：配置写在 create 之后，根本不生效 → 顺序写反了 const editor = new wangEditor(container); // 先建实例 editor.create(); // 马上就 create，把配置定格了 editor.config.menus = [...]; // ★ 太晚了！create 的时候配置已经定死了 → 这行根本不看 // ✅ 正确：先把配置都写好，最后再 create → 配置在前，create 在最后 const editor = new wangEditor(container); // 先建实例 editor.config.menus = ["head", "bold", "italic", "image", "table"]; // 配菜单项 editor.config.uploadImgShowBase64 = true; // 图片用 base64 存 editor.create(); // ★ 最后一步才 create → 这时配置才被正式定格生效
这是接插件最磨人的一个坑：配置写在 create 之后，插件不会报错，但就是不生效。因为 create 那一步就把配置"定格"了，之后你再改 config，它已经不再看了。如果你发现"配置写了却没反应"，八成是顺序写反了。
<!-- 第二步：引入资源（CDN） --> → 把插件的 JS 文件从 CDN 引进来
<
script src = "https://cdn.jsdelivr.net/npm/wangeditor@4.7.15/dist/wangEditor.min.js" > < /script> → 这一行就是引入 wangEditor
<
div id = "editor-container" > < /div> <!-- 一个空容器，插件会自己往里塞 --> → 先放一个空的 div 当编辑器的窝
<
script >
// 第三步：先配置，再初始化 → 顺序：先 config，最后 create
const container = document.getElementById("editor-container"); // 拿到那个空容器
const editor = new window.wangEditor(container); // 建编辑器实例，告诉它窝在哪
editor.config.menus = [ // 配工具栏要哪些按钮
"head", "bold", "italic", "underline",
"foreColor", "list", "justify", "image", "table"
];
editor.config.uploadImgShowBase64 = true; // 图片以 base64 存，不用后端 → 演示省事
let timer = null; // 准备一个计时器做防抖
editor.config.onchange = function (html) { // 编辑器内容一变就触发
clearTimeout(timer); // 先把上一次的计时器清掉
timer = setTimeout(function () { // ★ 300ms 防抖，避免疯狂刷新 → 停手 300ms 后才真的刷一次
document.getElementById("htmlView").innerHTML = html; // 把最新 HTML 显示到下面
}, 300);
};
editor.create(); // ★ 最后创建 → 配置都写好了，才让它真的长出来
// 获取 / 设置内容
editor.txt.html(); // 取 HTML → 不带参数就是读
editor.txt.html("<h2>预设内容</h2>"); // 设 HTML → 带参数就是写
<
/script>
两个小知识点：① onchange 里套一个 300ms 防抖（clearTimeout + setTimeout），用户噼里啪啦打字时，不会每按一个键就刷新一次，而是停 300ms 才刷一次，性能好很多。② uploadImgShowBase64 让图片直接以内嵌 base64 存，演示时不需要后端上传接口。
| 类型 | 怎么用 | 例子 |
|---|---|---|
| 纯 CSS 组件 | 直接在 HTML 上写 class 就行 | layui-btn、layui-input、layui-row |
| JS 交互模块 | 必须先 layui.use 加载 | layer 弹窗、table 表格、form 表单 |
// 引入顺序：CSS 在 JS 前面 → 先样式后脚本
<
link rel = "stylesheet"
href = "layui.css" > → 先引 layui 的样式文件
<
script src = "layui.js" > < /script> → 再引 layui 的脚本文件
// JS 交互模块必须 layui.use 先加载，才能拿到 layer / form → 声明要用哪几个模块
layui.use(["layer", "form"], function () { // 要用弹窗和表单，先加载它们
let layer = layui.layer(); // 拿到弹窗模块
let form = layui.form(); // 拿到表单模块
layer.msg("Hello Layui!"); // 弹个提示试试
form.render(); // ★ 动态生成的表单要调 render，不调不显示 → 新生成的表单元素要让它重新画一遍才出样式
});
注意 Layui 这种"按需加载"的插件：JS 模块不是引了 JS 文件就能直接用，必须 layui.use 声明一下你要用哪些模块，回调里才能拿到。动态生成的表单元素还要 form.render 重新渲染一次，不然样式出不来。
| 现象 | 原因 | 怎么排查 |
|---|---|---|
| xxx is not defined | 没引入 / 引入顺序错了 | 检查 CDN 链接能不能打开、顺序对不对 |
| 插件没反应 | 初始化代码没执行（DOM 还没好就跑了） | 确认代码写在 DOM 加载完成之后 |
| 样式错乱 | CSS 和 JS 版本不配套 | 用同一版本的 CSS / JS |
| 富文本没有工具栏 | 容器没宽高 / 样式问题 | 给容器设置宽高 |
① 可能在什么地方用：后台文章/商品详情的富文本编辑器、弹窗（layer）、日期选择器、表格组件、图片裁剪——项目里凡是"看起来挺复杂"的现成功能，基本都能找插件接，不用自己从零写。
② 常见的问题：报 xxx is not defined（CDN 没引或顺序错）；配置写了不生效（create 之后才改 config）；插件初始化了却空白（容器没宽高，或 DOM 还没渲染就执行了初始化）；版本乱了样式崩（CSS 和 JS 不是同一版本）。
③ 解决思路：打开 F12 → Console 看红字、Network 看 CDN 文件是不是加载成功（200 还是 404）；配置不生效就把所有 config.xxx 移到 create 前面；空白就检查容器有没有宽高、初始化代码是不是写在了元素后面。永远先把官方"快速开始"的最小例子跑通。