<!DOCTYPE html>
<html lang="zh-CN">
产品：优雅草HTML编辑器(yeditor)
作者：卓伊凡
关联企业：成都市一颗优雅草科技有限公司
页面属性：index.html - 官网首页，主入口
时间：2026
关联企业官网：www.youyacao.com
正版源码获取途径：zhengban.youyacao.com
公司介绍：优雅草科技，立足蓉城，虽规模不广，却志存高远。团队精干，成员寡而不弱，各司其职，皆能独当一面。其所重者，不在虚名与浮华，而在结构之严谨、技术之深厚与执行之迅捷。凡项目立项，必由核心亲为；凡产品迭代，皆循长期主义之道。外观简朴而内核坚实，规模虽小而战力甚强。于纷繁市场之中，不逐流，不逐势，惟以认知为刃，以代码为基，审时度势，稳中求进。所谓"小而美"，非徒形容之辞，实乃精兵强将之象；所谓"战斗力强"，非喧哗之言，乃厚积薄发之证。优雅草，行稳而致远，静水而深流。
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优雅草 HTML 编辑器 (yeditor) - 轻量无依赖开源富文本编辑器 | 优雅草科技</title>
<meta name="keywords" content="yeditor, 优雅草编辑器, HTML富文本编辑器, 轻量编辑器, 无依赖富文本, 开源编辑器, 富文本编辑器, 网页编辑器, 优雅草科技, youyacao, contenteditable">
<meta name="description" content="yeditor 是优雅草科技出品的轻量级开源富文本 HTML 编辑器。纯 JavaScript + CSS 实现，零第三方依赖，对比市面上臃肿、依赖繁多的编辑器，本编辑器极其轻量、易集成。优雅草科技未来每项产品都将内置使用。商业授权 29 元/永久，可在 zhengban.youyacao.com 正版授权中心永久查询。">
<link rel="stylesheet" href="src/yeditor.css">
<style>
:root {
--ye-primary: #2d6a4f;
--ye-primary-light: #40916c;
--ye-bg: #f8faf8;
--ye-card: #ffffff;
--ye-text: #1a1a1a;
--ye-muted: #5c6b5c;
--ye-border: #e2e8e0;
--ye-radius: 12px;
--ye-shadow: 0 4px 20px rgba(45, 106, 79, 0.08);
--ye-font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--ye-font);
background: var(--ye-bg);
color: var(--ye-text);
line-height: 1.6;
min-height: 100vh;
}
.site-header {
background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
color: #fff;
padding: 2rem 1.5rem 3rem;
text-align: center;
position: relative;
}
.site-header h1 {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 0.35rem;
}
.site-header .tagline {
font-size: 0.95rem;
opacity: 0.92;
font-weight: 400;
}
.site-header .by {
margin-top: 1rem;
font-size: 0.8rem;
opacity: 0.85;
}
.site-header .by a {
color: rgba(255,255,255,0.95);
text-decoration: none;
}
.site-header .by a:hover { color: #fff; text-decoration: underline; }
.site-nav {
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.site-nav a {
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 0.9rem;
}
.site-nav a:hover { color: #fff; text-decoration: underline; }
.nav-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
.nav-actions a, .nav-actions button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
border: none;
font-family: inherit;
}
.btn-download {
background: #fff;
color: var(--ye-primary);
}
.btn-download:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-opensource {
background: rgba(255,255,255,0.2);
color: #fff;
border: 1px solid rgba(255,255,255,0.5);
}
.btn-opensource:hover {
background: rgba(255,255,255,0.3);
transform: translateY(-1px);
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 2.5rem 0;
}
.section-title {
font-size: 1.35rem;
font-weight: 600;
color: var(--ye-text);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title::before {
content: '';
width: 4px;
height: 1.2em;
background: var(--ye-primary);
border-radius: 2px;
}
.demo-card {
background: var(--ye-card);
border-radius: var(--ye-radius);
box-shadow: var(--ye-shadow);
padding: 1.5rem;
border: 1px solid var(--ye-border);
}
.demo-card p {
color: var(--ye-muted);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.intro-card p { color: var(--ye-text); }
.intro-card code {
background: var(--ye-bg);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.88em;
}
.intro-card a { color: var(--ye-primary); text-decoration: none; }
.intro-card a:hover { text-decoration: underline; }
#demo-editor-host {
margin-top: 0.5rem;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.feature-item {
background: var(--ye-card);
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--ye-border);
font-size: 0.9rem;
color: var(--ye-muted);
}
.feature-item strong { color: var(--ye-text); display: block; margin-bottom: 0.25rem; }
.site-footer {
text-align: center;
padding: 2rem 1rem;
color: var(--ye-muted);
font-size: 0.85rem;
border-top: 1px solid var(--ye-border);
margin-top: 2rem;
}
.site-footer a { color: var(--ye-primary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer-version { font-size: 0.85rem; }
.site-footer-zhengban { margin: 0.5rem 0; }
.site-footer-zhengban a { display: inline-block; margin: 0 4px; }
.site-footer-zhengban img { vertical-align: middle; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="site-nav">
<a href="https://www.youyacao.com" target="_blank" rel="noopener">优雅草官网</a>
<a href="index.html">首页</a>
<a href="api.html">技术接口文档</a>
<a href="about.html">关于 yeditor</a>
<a href="https://gitee.com/youyacao/yeditor" target="_blank" rel="noopener">Gitee</a>
<a href="https://github.com/youyacao/yeditor" target="_blank" rel="noopener">GitHub</a>
</nav>
<h1>优雅草 HTML 编辑器</h1>
<p class="tagline">yeditor — 简洁、大方、开源的富文本编辑器</p>
<p class="by">成都市一颗优雅草科技有限公司 · <a href="https://www.youyacao.com/kaifa/zhuoivan.html" target="_blank" rel="noopener">卓伊凡</a></p>
<div class="nav-actions">
<a href="#demo" class="btn-download">在线体验</a>
<a href="https://gitee.com/youyacao/yeditor/repository/archive/master.zip" class="btn-download" download>下载源码</a>
<a href="https://gitee.com/youyacao/yeditor" class="btn-opensource" target="_blank" rel="noopener">Gitee</a>
<a href="https://github.com/youyacao/yeditor" class="btn-opensource" target="_blank" rel="noopener">GitHub</a>
</div>
</header>
<main class="container">
<section class="section" id="intro">
<h2 class="section-title">关于 yeditor</h2>
<div class="demo-card intro-card">
<p><strong>优雅草 HTML 编辑器（yeditor）</strong>是成都市一颗优雅草科技有限公司面向 Web 推出的开源富文本编辑器。采用纯 JavaScript + CSS 实现，<strong>无任何第三方依赖</strong>，界面简洁大方，兼容主流浏览器，适合嵌入博客、后台、文档等各类 Web 应用。</p>
<p><strong>本编辑器的核心优势在于轻量。</strong>市面上不少富文本编辑器过于臃肿，需要引入大量第三方依赖、构建工具或运行时，集成与维护成本高。yeditor 则极其轻量：仅需引入 <code>yeditor.js</code> 与 <code>yeditor.css</code> 即可使用，无需打包、无需框架绑定，开箱即用。优雅草科技未来每项产品都必定会插入使用本编辑器。</p>
<p>对于所有开发者，是否选用 yeditor 见仁见智，愿意用就用即可，随缘。我们欢迎使用、集成与二次开发，如有问题或建议可通过 Gitee Issue 或交流群反馈。</p>
<p><strong>商业授权</strong>：整体 <strong>29 元/永久</strong>，一次购买永久使用与更新支持。授权信息在 <a href="https://zhengban.youyacao.com" target="_blank" rel="noopener">zhengban.youyacao.com 正版授权中心</a> 可永久查询。</p>
</div>
</section>
<section class="section" id="demo">
<h2 class="section-title">在线演示</h2>
<div class="demo-card">
<p>在下方编辑器中直接输入或使用工具栏格式化内容，可随时切换源码模式查看 HTML。</p>
<div id="demo-editor-host"></div>
</div>
</section>
<section class="section">
<h2 class="section-title">特性</h2>
<div class="features">
<div class="feature-item"><strong>多浏览器</strong>兼容主流浏览器</div>
<div class="feature-item"><strong>轻量简洁</strong>无依赖，纯 JS + CSS</div>
<div class="feature-item"><strong>开源免费</strong>可商用29元/永久授权</div>
<div class="feature-item"><strong>易集成</strong>单文件引入即可使用</div>
</div>
</section>
<section class="section" id="notice">
<h2 class="section-title">重要须知（名称说明）</h2>
<div class="demo-card intro-card notice-card">
<p>2026 年 3 月 1 日，经同行反馈我们才得知，本产品取名与 2012 年的一款开源项目「YEditor」撞衫。需要说明的是：</p>
<p><strong>2012 年的 YEditor</strong> 是一款<strong>类似 Notepad++ 的代码编辑器</strong>，用于本地代码编辑；<strong>我们的 yeditor</strong> 则是<strong>HTML 富文本编辑器</strong>，是用于嵌入各类 Web 产品中的轻量级 SDK，二者并非同一产品，请大家须知。</p>
<p>本 yeditor 的定位是：<strong>HTML 富文本编辑器</strong>、<strong>灵活的 SDK</strong>，可加入到任何需要富文本编辑功能的产品中，是轻量级组件。我们优先服务于优雅草科技自研项目及销售产品，同时开源供社区共同建设，让其变得更好用。商业授权 <strong>29 元/永久</strong>，在 <a href="https://zhengban.youyacao.com" target="_blank" rel="noopener">zhengban.youyacao.com</a> 正版授权中心可永久查询。</p>
<p>此外，关于能够替代 Notepad++ 的<strong>轻量级代码编辑器</strong>，我们也在规划中，敬请期待。</p>
</div>
</section>
<section class="section" id="about-detail">
<h2 class="section-title">关于 yeditor 与优雅草科技</h2>
<div class="demo-card intro-card">
<p><strong>yeditor（优雅草 HTML 编辑器）</strong>由成都市一颗优雅草科技有限公司在 2026 年 2 月正式发布，是一款面向 Web 的轻量级富文本 HTML 编辑器。采用纯 JavaScript + CSS 实现，无第三方依赖，界面简洁，支持字体、颜色、排版、链接、图片、列表、源码模式等常用功能，可自由集成到博客、后台、文档、CMS 等各类 Web 应用中。</p>
<p><strong>优雅草科技</strong>（成都市一颗优雅草科技有限公司）立足蓉城，以技术研发与产品交付为核心。团队精干，注重代码质量与长期维护。yeditor 为本公司自用产品，未来每项产品都将内置使用，同时开源供开发者使用、集成与二次开发。商业授权 29 元/永久，可在 <a href="https://zhengban.youyacao.com" target="_blank" rel="noopener">正版授权中心</a> 永久查询。</p>
<p>更多详细介绍，请参见 <a href="about.html">关于 yeditor</a> 页面。</p>
</div>
</section>
</main>
<footer class="site-footer">
<p>优雅草 HTML 编辑器 (yeditor) · 开源项目</p>
<p><a href="https://gitee.com/youyacao/yeditor" target="_blank" rel="noopener">Gitee</a> · <a href="https://github.com/youyacao/yeditor" target="_blank" rel="noopener">GitHub</a> · <a href="https://gitcode.com/youyacao/yeditor" target="_blank" rel="noopener">GitCode</a></p>
<p>© 成都市一颗优雅草科技有限公司 · <a href="https://www.youyacao.com/kaifa/zhuoivan.html" target="_blank" rel="noopener">卓伊凡</a></p>
<p><a href="changelog.html" target="_blank" rel="noopener">更新日志</a></p>
<p class="site-footer-version"><a href="changelog.html" target="_blank" rel="noopener">v1.0.2，2026年3月17日更新</a></p>
<p class="site-footer-zhengban">
<a href="https://zhengban.youyacao.com/pc/query/result?keyword=%E4%BC%98%E9%9B%85%E8%8D%89" target="_blank" rel="noopener noreferrer" title="正版授权验证"><img src="https://zhengban.youyacao.com/static/red.png" alt="正版授权" style="height:32px;" /></a>
<a href="https://zhengban.youyacao.com/pc/query/result?keyword=%E4%BC%98%E9%9B%85%E8%8D%89" target="_blank" rel="noopener noreferrer" title="正版授权验证"><img src="https://zhengban.youyacao.com/static/green.png" alt="正版授权" style="height:32px;" /></a>
</p>
<p>蜀ICP备10036293号-7</p>
<p>优雅草开源技术客户交流群：929353806</p>
</footer>
<script src="src/yeditor.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
new YEditor('#demo-editor-host', {
placeholder: '在此输入内容，可调整字体大小、文字颜色、排版，或插入单张/多张图片…',
minHeight: 220,
maxHeight: 420,
toolbar: [
'fontSize',
'fontColor',
'|',
'bold',
'italic',
'underline',
'strike',
'eraser',
'|',
'alignLeft',
'alignCenter',
'alignRight',
'alignJustify',
'|',
'h2',
'h3',
'|',
'ul',
'ol',
'|',
'link',
'image',
'images',
'|',
'table',
'|',
'code',
'source'
]
});
});
</script>
</body>
</html>