原生js+css实现类似word可导出docx及pdf的支持文本选择润色及续写的富文本ai编辑器代码-html代码-BFW代码库

原生js+css实现类似word可导出docx及pdf的支持文本选择润色及续写的富文本ai编辑器代码

代码语言：html

所属分类：其他

代码描述：原生js+css实现类似word可导出docx及pdf的支持文本选择润色及续写的富文本ai编辑器代码，api接入了openai兼容的大模型

代码标签：原生 js css 类似 word 导出 docx pdf 支持文本选择润色续写富文本

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>AI 富文本编辑器（可导出 DOCX/PDF，支持润色与续写）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 外部库：导出 DOCX / PDF -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html-docx.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html2pdf.bundle.min.js"></script>

  <style>
    :root{
      --bg:#f3f5f7;
      --white:#fff;
      --text:#222;
      --muted:#6b7280;
      --primary:#2563eb;
      --primary-weak:#e0e7ff;
      --border:#e5e7eb;
      --toolbar:#fafafa;
      --shadow: 0 10px 30px rgba(0,0,0,.05);
      --page-width: 840px;    /* 接近 A4 可读宽度 */
      --page-pad: 36px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", "Source Han Sans SC",sans-serif;
    }

    .app{
      max-width: 1200px;
      margin: 20px auto 60px;
      padding: 0 16px;
    }

    .topbar{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      background:var(--white);
      border:1px solid var(--border);
      border-radius:12px;
      padding: 10px 12px;
      box-shadow: var(--shadow);
      position: sticky;
      top: 10px;
      z-index: 10;
    }

    .toolbar{
      flex: 1;
      display:flex;
      align-items:center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .toolgroup{
      display:flex;
      gap:6px;
      align-items:center;
      padding-right:8px;
      border-right:1px solid var(--border);
    }
    .toolgroup:last-child{ border-right: none; padding-right: 0; }

    button.tool, .select, .input {
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--toolbar);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      gap:6px;
      padding: 0 10px;
      cursor: pointer;
      font-size: 13px;
    }
    button.tool:hover{ background:#f0f3f6 }
    button.tool:active{ background:#e8edf3 }
    button.tool[disabled]{ opacity:.6; cursor:not-allowed }

    .select, .input{
      background: var(--white);
      padding: 0 8px;
    }
    .input{ width: 210px; }

    .ai-panel{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap: wrap;
      background:var(--white);
      border:1px solid var(--border);
      border-radius:12px;
      padding:8px 12px;
      margin-top:12px;
      box-shadow: var(--shadow);
    }
    .ai-panel small{ color: var(--muted); }

    .doc-wrap{
      margin-top: 16px;
      display:flex;
      justify-content:center;
    }

    .page{
      width: var(--pa.........完整代码请登录后点击上方下载按钮下载查看