ts.richtexteditor.com/index.html at master · richtexteditor/ts.richtexteditor.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TS RichTextEditor | TypeScript Rich Text Editor</title>
  <meta name="description" content="TypeScript RichTextEditor with the updated RichTextEditor runtime, live browser demos, and downloadable evaluation packages." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./css/site.css" />
</head>
<body data-page="overview">
  <a class="skip-link" href="#main-content">Skip to content</a>
  <div class="site-noise" aria-hidden="true"></div>
  <header class="site-header">
    <div class="container nav-shell">
      <a class="brand" href="./index.html">
        <span class="brand-mark">TS</span>
        <span class="brand-copy">
          <strong>ts.richtexteditor.com</strong>
          <span>TypeScript Edition</span>
        </span>
      </a>
      <nav class="site-nav" aria-label="Primary">
        <a href="./index.html">Overview</a>
        <a href="./demos.html">Demos</a>
        <a href="./download.html">Download</a>
      </nav>
      <div class="nav-actions">
        <a class="button button-secondary" href="./demos.html">Demos</a>
        <a class="button button-primary" href="./download.html">Download</a>
      </div>
    </div>
  </header>
  <div class="mobile-nav-shell">
    <div class="container mobile-nav" aria-label="Mobile">
      <a href="./index.html">Overview</a>
      <a href="./demos.html">Demos</a>
      <a href="./download.html">Download</a>
    </div>
  </div>

  <main id="main-content">
    <section class="hero-section simple-hero">
      <div class="container">
        <div class="hero-shell home-shell reveal">
          <p class="eyebrow">TypeScript rich text editor</p>
          <h1 class="page-title">Build better editing into your TypeScript app.</h1>
          <p class="hero-lede hero-center-copy">
            TS RichTextEditor wraps the updated RichTextEditor runtime with typed setup, bundled assets, and a direct
            path from live demo to evaluation download.
          </p>
          <div class="hero-actions hero-actions-centered">
            <a class="button button-primary" href="./demos.html">View Demos</a>
            <a class="button button-secondary" href="./download/richtexteditor-html-evaluation.zip">Download Evaluation</a>
            <a class="button hero-pill-link" href="./download/ts-rich-text-editor-0.1.0.tgz">TS Package</a>
          </div>
          <div class="trust-strip">
            <span class="trust-pill">25,000+ customers</span>
            <span class="trust-pill">60+ countries</span>
            <span class="trust-pill">23 languages</span>
            <span class="trust-pill">Typed wrapper</span>
          </div>
        </div>

        <section class="home-stage-card hero-demo-card reveal reveal-delay-1">
          <div class="demo-card-top home-stage-top">
            <div>
              <p class="eyebrow">Live demo</p>
              <h2>Try the updated editor before you integrate.</h2>
              <p class="stage-copy">
                Review the default toolbar, resize behavior, clean HTML output, and the overall editing feel directly
                in the browser.
              </p>
            </div>
            <div class="demo-button-row">
              <a class="button button-secondary" href="./demos.html">Open Demo Library</a>
              <button id="home-demo-load-sample" class="button button-primary" type="button">Reload Sample</button>
            </div>
          </div>
          <div id="home-demo-editor-host" class="home-editor-host"></div>
          <div class="home-stage-note">
            <span id="home-demo-status" class="panel-chip">Loading editor</span>
            <p>
              The homepage keeps the focus on one large editor. Use the demos page when you want HTML output,
              localization, or focused setup samples.
            </p>
          </div>
        </section>
      </div>
    </section>

    <section class="container section">
      <div class="home-bottom-shell reveal">
        <div class="home-bottom-grid">
          <div class="home-note-grid">
            <article class="home-note-card">
              <p class="eyebrow">Clean HTML</p>
              <h3>Cleaner output for production use.</h3>
              <p>Produce structured HTML that fits CMS, documentation, publishing, and application workflows.</p>
            </article>
            <article class="home-note-card">
              <p class="eyebrow">Office paste</p>
              <h3>Less cleanup after Word and Excel.</h3>
              <p>Reduce reformatting work when authors bring common business content in from Microsoft Office.</p>
            </article>
            <article class="home-note-card home-note-card-wide">
              <p class="eyebrow">Customization</p>
              <h3>Adapt the editor to your product.</h3>
              <p>Start with the default experience, then tune toolbars, plugins, dialogs, styles, uploads, and API-driven behavior.</p>
            </article>
          </div>

          <aside class="home-cta-panel">
            <div>
              <p class="eyebrow">Ready to evaluate?</p>
              <h2>Download the full HTML package or start with the TypeScript wrapper.</h2>
              <p>
                The updated evaluation archive includes demos, docs, images, styles, patch scripts, and the
                RichTextEditor runtime. The TS package stays available when your next step is integration.
              </p>
            </div>
            <div class="home-cta-pills">
              <span class="meta-pill">HTML demos and docs</span>
              <span class="meta-pill">Runtime included</span>
              <span class="meta-pill">TypeScript package</span>
            </div>
            <div class="cta-actions">
              <a class="button button-primary" href="./download/richtexteditor-html-evaluation.zip">Download evaluation</a>
              <a class="button button-secondary" href="./download.html">Open downloads</a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid footer-grid-simple">
      <div>
        <p class="footer-title">TS RichTextEditor</p>
        <p class="footer-copy">TypeScript package site, live demo, and downloadable evaluation packages for RichTextEditor.</p>
      </div>
      <div>
        <p class="footer-label">Site</p>
        <a href="./index.html">Overview</a>
        <a href="./demos.html">Demos</a>
        <a href="./download.html">Download</a>
      </div>
      <div>
        <p class="footer-label">Downloads</p>
        <a href="./download/richtexteditor-html-evaluation.zip">Evaluation</a>
        <a href="./download/ts-rich-text-editor-0.1.0.tgz">TS package</a>
        <a href="./download/ts-rich-text-editor-source.zip">Source</a>
      </div>
    </div>
  </footer>

  <script src="./js/site.js"></script>
  <script>
    window.tsRteDemoConfig = {
      hostSelector: "#home-demo-editor-host",
      statusSelector: "#home-demo-status",
      loadSampleSelector: "#home-demo-load-sample",
      assetBasePath: "./assets/ts-rich-text-editor/dist/richtexteditor",
      editorConfig: {
        toolbar: "full",
        skin: "default",
        height: "580px",
        editorResizeMode: "both",
        showTagList: true,
        showStatistics: true
      },
      sampleHtml: `
        <h2>TS RichTextEditor homepage demo</h2>
        <p>This live example pairs the TypeScript wrapper with the updated RichTextEditor runtime.</p>
        <ul>
          <li>Clean HTML output for application workflows</li>
          <li>Word and Excel paste cleanup</li>
          <li>Toolbar, plugin, and dialog customization</li>
        </ul>
      `
    };
  </script>
  <script type="module" src="./js/demo-runner.js"></script>
</body>
</html>