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

代码语言：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(--page-width);
      min-height: 1100px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: var(--page-pad);
    }

    .page:focus-within{
      border-color: var(--primary);
      box-shadow: 0 10px 30px rgba(37,99,235,.12);
    }

    .title{
      outline: none;
      font-size: 26px;
      font-weight: 700;
      margin: 0 0 12px 0;
    }
    #editor{
      outline: none;
      min-height: 900px;
    }
    #editor p{ margin: 8px 0; }
    #editor h1,#editor h2,#editor h3{ margin: 14px 0 8px; }
    #editor blockquote{
      border-left: 4px solid #e5e7eb;
      margin: 10px 0;
      padding: 8px 12px;
      color: #555;
      background: #fafafa;
    }
    #editor img{
      max-width:100%;
      height:auto;
      display:block;
      margin:8px auto;
      border-radius:8px;
    }
    #editor table{ border-collapse: collapse; width: 100%; }
    #editor th, #editor td{ border: 1px solid #ddd; padding: 6px 8px; }

    .status{
      display:flex;
      justify-content: space-between;
      align-items:center;
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }

    .badge{
      display:inline-flex; align-items:center; gap:6px;
      background: var(--primary-weak);
      color: #1e3a8a;
      border: 1px solid #c7d2fe;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .color-input{
      width: 36px; height: 34px; padding: 0; border: 1px solid var(--border);
      border-radius: 8px; background: var(--white);
    }

    .spinner{
      width: 16px; height: 16px; border: 2px solid #cbd5e1; border-top-color: var(--primary);
      border-radius: 50%; animation: spin 1s linear infinite;
      display:inline-block;
      vertical-align: middle;
    }
    @keyframes spin{ to{ transform: rotate(360deg) } }

    .hint{
      color:#334155; background:#eef2ff; border:1px dashed #c7d2fe;
      padding: 6px 10px; border-radius:8px; font-size: 12px;
    }

    /* 打印/导出时的页面样式优化 */
    @media print{
      body{ background: white; }
  .........完整代码请登录后点击上方下载按钮下载查看