如何利用 WritableStream 承接大模型流自动将生成的代码流输出到富文本编辑器-js教程-PHP中文网

writablestream 不能直接写入富文本编辑器，因其仅接收 uint8array 数据、不解析 html 也不操作 dom；正确路径是 readablestream → textdecoderstream → 分块解析 → 安全插入。

如何利用 writablestream 承接大模型流自动将生成的代码流输出到富文本编辑器

不能用 WritableStream 直接写入富文本编辑器（如 Quill、TinyMCE、CKEditor 或原生 contenteditable 元素）。

WritableStream 本身不操作 DOM

WritableStream 是 Web Streams API 中的底层字节流 sink，它只负责接收 Uint8Array 数据块，不做 HTML 解析、不触发重排、也不调用任何 DOM 方法。你在它的 write() 回调里执行 editor.insertAdjacentHTML() 或修改 innerHTML，看似“能动”，但这是你手动桥接的副作用，不是 WritableStream 的能力——它本身对 DOM 完全无感。

常见误区是把 WritableStream 当成 Node.js 的 fs.createWriteStream 或 .NET 的 StreamWriter，后者可直接绑定文件句柄；而浏览器中，WritableStream 没有“目标设备”概念，必须靠你显式定义 write(chunk) 做什么。

真正可行的链路：ReadableStream → 解码 → 分块解析 → 安全插入

大模型返回的是流式 text/event-stream 或普通 ReadableStream（如 fetch().body），正确路径是：

This skill transforms novel chapters into professional film storyboard scripts. 这个skill是将小说章节 →（变成）专业电影分镜剧本。 Powered by **清云 EchoFlow API** (https://api.echoflow.cn/) — 一站式国内外580+大模型，一键开发票，企业级稳定，价格是官方的1.5折。

将小说章节转换为电影分镜剧本。用户上传txt/md/docx文本，AI分析场景、角色、情绪、镜头语言，输出专业分镜脚本。适用于用户提及“分镜”“storyboard”“小说转分镜”“影视改编”“镜头脚本”或需要将小说改编为分镜的场景。

下载

用 response.body.pipeThrough(new TextDecoderStream()) 转为字符串流
用 TransformStream 或 async generator 拆分语义块（例如按 `\n`、代码标记 ``` 或自然段落）
每收到一个完整、闭合的 HTML 片段（如 <pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>），再调用编辑器 API 插入
避免直接 innerHTML +=，优先用 insertAdjacentHTML('beforeend', ...) 或编辑器提供的 insert 方法（如 Quill 的 editor.clipboard.dangerouslyPasteHTML()）

为什么不能边流边渲染原始 HTML 字符串

原因有三：

安全风险：未经清洗的 HTML 可能含 script、onerror 等 XSS 载荷，富文本编辑器默认会过滤或拒绝不完整标签

结构破坏：流中出现未闭合的

<div> 或 <code><table> 会导致后续内容错位甚至崩溃
  <li>
<strong>性能失控</strong>：高频 DOM 写入（如每 20ms 插入一行）会触发大量 layout，拖慢响应；应合并小块、节流插入频率（如 100ms 批处理）</li>


<h3>一个轻量实用示例（不依赖第三方编辑器）</h3>
<p>假设你用一个 <code>contenteditable div#editor

：

const decoder = new TextDecoderStream();
const reader = response.body
  .pipeThrough(decoder)
  .getReader();

let buffer = '';
const editor = document.getElementById('editor');

async function pump() {
  const { done, value } = await reader.read();
  if (done) return;

  buffer += value;
  // 按双换行分段，确保是完整段落
  const parts = buffer.split(/\n\s*\n/g);
  buffer = parts.pop() || '';

  for (const part of parts) {
    if (!part.trim()) continue;
    // 清洗并转义，再包裹成安全 HTML
    const safeHtml = part
      .replace(/&/g, '&')
      .replace(/, '/g, '>')
      .replace(/\n/g, '<br>');
    editor.insertAdjacentHTML('beforeend', `<p>${safeHtml}</p>`);
  }
  requestAnimationFrame(pump); // 防止阻塞主线程
}
pump();

这段代码没用 WritableStream，但更稳、更可控——它把“流式承接”这件事交给了浏览器原生 ReadableStream 和解码器，把“写入编辑器”交给明确、受控的 DOM 操作。