7. 第三方插件接入与富文本

第三方插件接入就是别自己造轮子，直接用别人写好的。富文本编辑器用 wangEditor。

核心三步：
① 引 CSS 和 JS——CDN 或本地文件
② 选容器初始化——new Editor("#容器")
③ 拿内容——editor.txt.html() 拿富文本

坑：插件 JS 要在业务代码前引入、容器要有高度、destroy 销毁防止重复初始化。

7.1 先跑起来：wangEditor 富文本（真实插件）

这个编辑器就是通过 CDN 引入的 wangEditor 4.7.15——先引 JS，再"创建实例 → 配置 → create"，和课件里的步骤一模一样。你可以在里面打字、加粗、插图片，下面会实时吐出对应的 HTML 源码。如果没联网加载失败，会显示提示文字，但代码讲解不受影响。

7.2 第三方插件接入三步法

为什么第一步一定要先看文档？因为每个插件的初始化方式都不一样，你光靠猜大概率接不上。官方文档的"快速开始"一般就是一个最小可运行例子，先把那个最小例子跑通，再往自己页面里搬，是最稳的接法。

7.3 按官方文档顺序初始化（最常见的坑）

// 错误：配置写在 create 之后，根本不生效 → 顺序写反了
// 先建实例
const editor = new wangEditor(container);
// 马上就 create，把配置定格了
editor.create();
// ★ 太晚了！create 的时候配置已经定死了 → 这行根本不看
editor.config.menus = [...];

// 正确：先把配置都写好，最后再 create → 配置在前，create 在最后
// 先建实例
const editor = new wangEditor(container);
// 配菜单项
editor.config.menus = ["head", "bold", "italic", "image", "table"];
// 图片用 base64 存
editor.config.uploadImgShowBase64 = true;
// ★ 最后一步才 create → 这时配置才被正式定格生效
editor.create();

这是接插件最磨人的一个坑：配置写在 create 之后，插件不会报错，但就是不生效。因为 create 那一步就把配置"定格"了，之后你再改 config，它已经不再看了。如果你发现"配置写了却没反应"，八成是顺序写反了。

7.4 接入完整示例（本页编辑器就是这么接的）

<!-- 第二步：引入资源（CDN） --> → 把插件的 JS 文件从 CDN 引进来
<
script src = "https:                              // cdn.jsdelivr.net/npm/wangedito

  <
  div id = "editor-container" > < /div> <!-- 一个空容器，插件会自己往里塞 --> → 先放一个空的 div 当编辑器的窝

  <
  script >
  // 第三步：先配置
  // 拿到那个空容器（插件要原生元素，用 $()[0] 取出来）
  const container = $("#editor-container")[0];
  // 建编辑器实例，告诉它窝在哪
  const editor = new window.wangEditor(container);

  // 配工具栏要哪些按钮
  editor.config.menus = [
    "head", "bold", "italic", "underline",
    "foreColor", "list", "justify", "image", "table"
  ];
  // 图片以 base64 存，不用后端 → 演示省事
  editor.config.uploadImgShowBase64 = true;

  // 准备一个计时器做防抖
  let timer = null;
  // 编辑器内容一变就触发
  editor.config.onchange = function (html) {
    // 先把上一次的计时器清掉
    clearTimeout(timer);
    // ★ 300ms 防抖
    timer = setTimeout(function () {
      // 把最新 HTML 显示到下面
      $("#htmlView").html(html);
    }, 300);
  };

  // ★ 最后创建 → 配置都写好了，才让它真的长出来
  editor.create();
  // 获取 / 设置内容
  // 取 HTML → 不带参数就是读
  editor.txt.html();
  // 设 HTML → 带参数就是写
  editor.txt.html("<h2>预设内容</h2>");
<
/script>

两个小知识点：① onchange 里套一个 300ms 防抖（clearTimeout + setTimeout），用户噼里啪啦打字时，不会每按一个键就刷新一次，而是停 300ms 才刷一次，性能好很多。② uploadImgShowBase64 让图片直接以内嵌 base64 存，演示时不需要后端上传接口。

7.5 Layui：纯 CSS 组件和 JS 模块是两种用法

// 引入顺序：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!");
  // ★ 动态生成的表单要调 render
  form.render();
});

注意 Layui 这种"按需加载"的插件：JS 模块不是引了 JS 文件就能直接用，必须 layui.use 声明一下你要用哪些模块，回调里才能拿到。动态生成的表单元素还要 form.render 重新渲染一次，不然样式出不来。

7.6 常见问题排查

7.7 实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：后台文章/商品详情的富文本编辑器、弹窗（layer）、日期选择器、表格组件、图片裁剪——项目里凡是"看起来挺复杂"的现成功能，基本都能找插件接，不用自己从零写。

② 常见的问题：报 xxx is not defined（CDN 没引或顺序错）；配置写了不生效（create 之后才改 config）；插件初始化了却空白（容器没宽高，或 DOM 还没渲染就执行了初始化）；版本乱了样式崩（CSS 和 JS 不是同一版本）。

③ 解决思路：打开 F12 → Console 看红字、Network 看 CDN 文件是不是加载成功（200 还是 404）；配置不生效就把所有 config.xxx 移到 create 前面；空白就检查容器有没有宽高、初始化代码是不是写在了元素后面。永远先把官方"快速开始"的最小例子跑通。

本页重点