进化中的KuroEditor！新功能与实现幕后 vol.3
作为KuroEditor的续报，本文挑选了最新版本中的新功能与特色功能进行深入解析！我们将详细介绍这些功能的实现原因及其背后的设计哲学，带您全面了解其对写作体验의 优化。
如今已成为黑兔旗下包括开源产品在内的核心组件的WYSIWYG编辑器“KuroEditor”，一直在追求不依赖框架的纯JS（Vanilla JS）超高速运行和直观的操作性。在之前的“vol.2”中，我们介绍了基本的文本装饰、媒体放置以及类似Dropbox Paper的表格操作。然而，KuroEditor的进化并未止步。这次，我们将挑选之后新增的以及具有代表性的功能，结合开发意图与背景，为您带来一份在说明书中无法读到的精彩故事。让我们共同走近“KuroEditor vol.3”的全貌，探寻如何毫无压力且极致丰富地表达您想呈现的世界。
表格操作的极致：支持Excel粘贴与“日本人钟爱的表格”之追求
在KuroEditor的开发中，倾注了最多热情的部件之一就是“表格（Table）”功能。相信每个接触过许多国外富文本编辑器的人都会感同身受，国外的编辑器对表格的处理非常粗糙。在大多数情况下，我们熟知的像在Microsoft Excel或Google Sheets中理所当然的精细调整（如修改单元格背景色、合并/拆分单元格等）要么无法实现，要么即使实现了也非常难用。
日本人自古以来就偏好“围起来整理”信息。这或许是与日本住宅样式相通的精神特质，但在网络文章中，用美观的表格来展现复杂的规格对比、价格表、数据对照等，对于提高可读性至关重要。为了满足这一需求，KuroEditor大幅强化了表格功能。
首先，最大的特色是“支持直接从Excel、Google Sheets或CSV数据复制粘贴并自动生成表格”。只需将在电子表格软件上复制的范围直接粘贴到编辑器中，KuroEditor就会在后台自动解析制表符分隔（TSV）或逗号分隔（CSV）的格式，并瞬间将其重建为精美的HTML表格。这使创作者无需在编辑器中费力地从头创建单元格。在习惯使用的Excel中创建好表格后直接粘贴即可，非常轻松。
当然，仅靠KuroEditor单体，您现在也可以自由更改外框、内部网格线，甚至“仅某一条特定网格线”的粗细（细线、普通、粗线、虚线等）和颜色。单元格合并（向右合并、向下合并）与拆分、垂直对齐（上、中、下）、单元格背景色设置等，全部都可以仅凭鼠标操作直观地完成。完美支持日本人所追求的细致表格表达，正是KuroEditor能与国外编辑器区分开来的最大原因。
“Enter”与“Shift+Enter”的分野：编辑器内部的段落设计思想
在KuroEditor操作手册中占有很大篇幅的是“换行与段落的区别”。在键盘输入中，当您只想移动到下一行时，按下“Enter”还是“Shift + Enter”会在编辑器内部产生完全不同的HTML结构。理解这个区别对于保持整洁的文章布局必不可少。
当您按下“Enter”时，编辑器会生成一个新的段落（<p>标签）。这会将其视为独立于前后文的独立块（段落）。KuroEditor强有力的排版功能（缩进、左/右对齐、标题设置等）是基于段落应用的，因此如果段落是分开的，您可以轻松执行仅将某一行右对齐的操作。另一方面，如果您按下“Shift + Enter”，则会在同一个段落内插入一个简单的换行（<br>标签）。由于编辑器将其识别为“一个块”，在您进行缩进等操作时，多行会联动地一起移动。
实现这一行为的原因是为了消除写作中经常遇到的“无意中将行距拉得太开”的压力，同时实现根据语义块进行的精确控制。对于需要紧密排列的几行内容（如地址或诗歌），使用“Shift + Enter”；对于语义转换，使用“Enter”划分段落。这种清晰的概念设计是KuroEditor易于写作的根基。
这一功能在列表展示中尤为见效。在像Microsoft Word或Dropbox Paper这样的工具中，带编号或带标记的列表自然是可以实现的，但当您尝试构建复杂的列表时，往往会因为数字无法按愿望附带而感到沮丧，或者您无法在列表之间插入一个纯文本块。在这些工具中，为了使某一种方法变得便利，偏离该格式的使用会受到极大的限制。KuroEditor则能让您在保持极致简单的同时，实现复杂的列表表达。
在排版中产生对比的“角丸盒子”与环绕的美学
传统博客文章和新闻文章容易形成单调的“单栏垂直滚动结构”，文本和图像自上而下交替流动。诚然，随着智能手机의 普及，垂直滚动已成为当今的基础，但在电脑等宽屏上观看时，过于单调的排版会导致读者疲劳。因此，开发并实现了“角丸盒子（kuro-roundbox）”功能。
角丸盒子可以通过点击编辑器下方菜单中配置的专用图标来一键插入。在盒子内部，您不仅可以放置普通文本，还可以放置编辑器中的所有元素，如图片和表格。当光标在盒子内部时，会显示专属设置菜单，您可以自由自定义盒子的宽度（30%到100%）和对齐方式（左对齐、居中对齐、右对齐）。
这里最大的坚持是左右对齐时“文字环绕（Wrap）”的行为。例如，如果您将盒子宽度设置为45%并将其靠右对齐，后面的段落文本会美观地环绕在盒子的左侧。这使得将杂志中的专栏或不同于正文的备注和补充信息整齐地放置成为可能。此外，如果您想在预期位置结束环绕，只需插入一条水平线（hr），后续内容将自动发送到盒子底部。这一功能在竖长文章中创造了视觉节奏，有助于显著提高读者的滚动深度。
改变链接概念的“URL卡片”与保护执笔节奏的“表情快捷码”
在互联网文章中，指向其他网站或历史文章的链接是不可或缺的元素。然而，传统的“蓝色带下划线”文本链接虽然精简，但缺点是读者很难将其识别为“有价值的参考信息”。特别是在放置希望读者绝对点击的链接（如推广链接、自身服务介绍或指引到重要相关文章）时，缺乏视觉吸引力。
因此，KuroEditor引入了“URL卡片（kuro-url-card）”展示。在创建链接时，只需勾选“卡片显示（无标题）”复选框，它就会自动获取目标URL的元数据（图标、标题、URL），并将其转换为精美的博客卡片格式。这使读者能够直观地理解链接目的地是什么样的页面，从而极大地提高点击率（CTR）。此外，如果目标网站宕机或元数据获取失败，它不会输出损坏的图像链接，而是采用安全第一的规范，“悄悄地调整显示（让卡片本身作为链接发挥作用，同时隐藏损坏的资产）”。这从Dropbox Paper中得到了很大启发。然而，Paper的链接会自动卡片化即使是不想要的URL，占用大片屏幕区域，且即使URL已损坏且不存在，也存在缓存表现得如同其存在一般的问题。KuroEditor允许您从三个选项中进行选择：普通蓝色链接、简单卡片型（细）和丰富卡片型（略厚，动态检索图片等素材）。
On the other hand, as a function to protect the "rhythm" during writing, KuroEditor新实现了“表情符号快捷码输入”。表情符号对于丰富情感表达很有用，但每次都要通过从工具栏打开调色板来选择，需要将手从键盘移到鼠标上，打乱了打字节奏。在KuroEditor中，只需键入熟悉的快捷码（如 :smile:、:fire: 或 :+1:），它们就会在输入完成的瞬间自动替换为相应的表情符号。这一微小功能让您在不停止写作的情况下流畅地在句子中添加丰富的表达，专业作者应该能感受到更加舒适的体验。
扩展实用性的“清单（Todo）”与结构化数据的“食谱卡片”
KuroEditor不仅是一个用于发布博客文章的编辑器。因为也期待其嵌入到个人备忘录工具“KuroNote”（KuroCMS的兄弟项目）中，所以它贪婪地融入了可用于个人目的的实用功能。一个主要的例子是“清单（Todo）”。
- 查收邮件
- 冲杯咖啡
只需在行首键入 [] 并按下空格键，即可自动生成带复选框的列表。由于复选框的状态作为HTML数据与文章一起保存，因此即使按下保存按钮并重新加载，状态也会保持。请注意，公开页面上的复选框不能被“读者当场切换”（因为需要在数据库中为每个读者保存状态，因此表现为复选框样式的显示），但它在执笔时的任务管理或在文章中展示步骤验证清单时非常有效。
此外，作为专用于特定业务模型和网站用途的功能，KuroEditor新配备了“食谱卡片（kuro-recipe）”。这是为了强力支持烹饪食谱博客管理而设计的结构化块。当您插入卡片时，它会将人数、准备/烹饪时间、食材和步骤以精美的表格/列表格式整合展示为一张单卡。食谱卡片在设计时考虑了SEO（Google食谱结构化标记），搜索引擎能正确识别其为结构化数据。此外，从用户角度出发，为了避免“一篇文章中食谱过多让读者感到混乱”，设定了“每篇文章只能放置一张食谱卡”的严格限制（如果已经放置，工具栏按钮变灰并显示无法插入的原因）。这类专有卡片的存在能在特定的垂直媒体中暴发性地提高内容价值。详情请参见 KuroCMS的食谱文章。
协助开发者写作的代码块进化：拖拽移动与自动复制按钮
在撰写技术文章和教程时，“代码块”是展示干净源码的必备功能。传统的KuroEditor中存在代码块，但在执笔过程中，对开发者特有的操作（如重新排列整个块或复制代码）仍有改进空间。
为此，KuroEditor支持“通过拖拽代码块左侧的行号区域来上下移动整个块”。在撰写长篇解说文章时，频繁出现“希望将此代码块移动到上方段落之前”的情况。剪切和粘贴代码（Cut & Paste）会带来破坏缩进或意外损坏HTML结构的风险，但通过拖放进行重新排序使您能够安全且直观地交换块的位置。
此外，为了方便读者在公开页面上最频繁进行的“复制代码”操作，我们还提供了一个在代码块右上角自动添加“📋 复制按钮”的辅助脚本。KuroEditor特有的考虑——设计到最终的“读者体验（UX）”而不是只在编辑器内部完成，正是体现在这样的细节中。
结语：始终如一呈现所见即所得的“WYSIWYG”
KuroEditor的目标不仅仅是“一个排版精美的编辑器”。它的目标是实现极致的WYSIWYG体验，使在编辑器中构建的复杂表格、角丸盒子和环绕排版“以完全相同的样式反映在公开页面上”。在不使用任何框架、且不牺牲加载速度和性能的情况下使用Vanilla JS实现这一点，是一项重大的技术挑战。由于极力减少连接点的松耦合设计，KuroEditor可以通过几行代码嵌入任何网页系统或CMS中，它将继续支持许多创作者的执笔体验并不断推进改善。