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

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

代码语言：html

所属分类：其他

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

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

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>富文本 AI 编辑器（导出 DOCX / PDF，调用 OpenAI 润色与续写）</title>
  <style>
    :root{--toolbar-bg:#f4f5f7;--btn:#ffffff;--accent:#2563eb}
    body{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:#fafafa; color:#111}
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#fff,#f7f9fc);border-bottom:1px solid #e6e9ef}
    header h1{font-size:16px;margin:0}
    .toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--toolbar-bg);border-bottom:1px solid #e6e9ef}
    .toolbar button, .toolbar select, .toolbar input[type=file]{background:var(--btn);border:1px solid #d5d9e2;padding:6px 8px;border-radius:6px;font-size:13px}
    .editor-wrap{padding:18px}
    #editor{min-height:420px;border-radius:8px;border:1px solid #e6e9ef;padding:18px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,0.03);overflow:auto}
    .status{font-size:13px;color:#6b7280;margin-left:12px}
    .right{display:flex;align-items:center;gap:8px}
    .modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:16px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.2);z-index:2000;min-width:320px}
    .modal.hidden{display:none}
    .overlay{position:fixed;inset:0;background:rgba(2,6,23,0.35);z-index:1500;display:none;}
    footer{padding:8px 16px;font-size:13px;color:#6b7280}
    .btn-primary{background:var(--accent);color:#fff;border:none}
    .btn-danger{background:#ef4444;color:#fff;border:none}
    .small{font-size:12px;padding:6px 8px}
  </style>
  <!-- 依赖：html-docx-js（将 HTML 转为 docx），html2pdf（将 DOM 导出为 PDF） -->
<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>
</head>
<body>
  <header>
    <h1>富文本 AI 编辑器</h1>
    <div class="right">
      <span class="status">在线：<strong id="ai-status">未连接</strong></span>
      <button id="open-settings" class="small">设置 API Key</button>
    </div>
  </header>

  <div class="toolbar" id="toolbar">
    <button onclick="exec('bold')" title="加粗">B</button>
    <button onclick="exec('italic')" title="斜体">I</button>
    <button onclick="exec('underline')" title="下划线">U</button>
    <button onclick="exec('strikeThrough')" title="删除线">S</button>
    <button onclick="exec('justifyLeft')" title="左对齐">左</button>
    <button onclick="exec(&#.........完整代码请登录后点击上方下载按钮下载查看