Tiptap富文本编辑器示例代码-html代码-BFW代码库

Tiptap富文本编辑器示例代码

代码语言：html

所属分类：其他

代码描述：Tiptap富文本编辑器示例代码

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>Tiptap.js 编辑器示例（纯前端）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- ProseMirror 基础样式，提供选区高亮等 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prosemirror-view/style/prosemirror.css">
  <style>
    :root {
      --bg: #0b1020;
      --card: #121a2e;
      --card2: #0f172a;
      --text: #e5e7eb;
      --muted: #9aa4b2;
      --brand: #5b8cff;
      --brand-2: #8aa2ff;
      --border: #233052;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; background: var(--bg); color: var(--text);
      font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial;
      line-height: 1.5;
    }
    .wrap {
      max-width: 1000px; margin: 32px auto; padding: 0 16px;
    }
    .title {
      font-size: 24px; font-weight: 700; margin-bottom: 12px;
    }
    .sub { color: var(--muted); margin-bottom: 20px; }
    .card {
      background: linear-gradient(180deg, var(--card), var(--card2));
      border: 1px solid var(--border);
      border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
      overflow: hidden;
    }

    /* 工具栏 */
    .menubar {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 12px; border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: linear-gradient(180deg, var(--card), var(--card2)); z-index: 10;
    }
    .menubar button, .menubar select {
      appearance: none; border: 1px solid var(--border); background: #0b1530;
      color: var(--text); padding: 8px 10px; border-radius: 12px; cursor: pointer;
      font-size: 14px;
    }
    .menubar button:hover { border-color: var(--brand); }
    .menubar button.is-active { background: var(--brand); color: white; border-color: var(--brand); }
    .menubar .right { margin-left: auto; display: flex; gap: 8px; }

    /* 编辑区 */
    .editor {
      padding: 16px 16px 4px;
    }
    .ProseMirror {
      min-height: 320px; padding: 16px; border-radius: 12px; outline: none;
      background: #0a1330; border: 1px.........完整代码请登录后点击上方下载按钮下载查看