新增 7 项功能，修复 51.3 个新 bug 😋，DEV.TO 👩💻👨💻 编辑器 [第二部分！]
欢迎使用 dev.to 编辑器 0.02 版本！这是我为 dev.to 创建一个编辑器的尝试，旨在让文章写作更加轻松！
如果你还没看过我之前关于这个话题的帖子，那就花几分钟时间去看看吧。
文章已失效
都看完了吗？太好了，让我们看看有哪些改进！
就让我玩玩吧，我不想看书！
等不及了吗？我这里有个快速链接，可以直接跳转到操作说明，教你如何自己动手试试！
目前仅限桌面端使用，因为它使用了书签小程序。在移动设备上，恐怕您只能先看看图片，直到您能用电脑为止！
不过，如果你留下来看看，我这里有很多漂亮的 GIF 图片，展示了一些功能！
总之，我猜你一定很想知道，0.02 版本有哪些变化？
界面焕然一新！
我专门为 dev.to 设计了一套自定义图标。
虽然有些地方还不够精致，但总的来说，我认为整体美感与 dev.to 非常接近。
关于模态框和其他界面元素……它们还没有设置样式！距离最终产品还有很长的路要走，但希望您能明白我的设计方向！
完全重新设计代码
原编辑器使用“换行”功能来使 Markdown 中选定的文本换行。
对于粗体文本等基本功能来说，这没问题，**bold**但对于更复杂的功能，它就开始变得有点“卡顿”（是的，这是一个专业术语！）。
所以我们现在采用的是基于模板的系统，其中的区域可以被用户内容替换。
代码整理工作还有很长的路要走，但现在添加新的 Markdown 功能很容易了。
另一个问题（在某种程度上现在仍然存在）是变更的应用方式。我们别无选择，只能更新整个系统，<textarea>这意味着需要大量的精力来管理焦点。不过，我已经改进了项目处理方式，并引入了“撤销”功能，以防万一出现严重问题！
新功能
哦，有很多事情：
标题 2-6
我之前遇到的问题是，标题被分配给了 2-4 号，而我无法添加 5 级和 6 级，因为我已经将这些编号用于其他功能了。
我现在有了一个系统，不用再按 Ctrl + {数字}，而是按 Ctrl + H，然后在后面立即输入你想要的标题编号。
这样就把所有的数字键都空出来用于其他用途了（仍在研究键盘快捷键！）
你可能会问，为什么没有一级标题？答案是：为了方便查阅。
尽管 HTML 标准和 WCAG 允许使用多个<h1>s，但对于屏幕阅读器用户来说，这不是预期的行为，因此并不理想。
更多文字装饰！
我之前已经把粗体和斜体文本都设置好了，但现在我又添加了
删除线加下划线让生活更轻松！
有序列表和无序列表
现在添加有序列表变得非常简单，因为有了自动编号功能！
它还会移除列表项之间的空白，使内容保持整洁！
为了方便起见，我还添加了无序列表。
桌子！
我尤其为这个感到自豪。
在 Markdown 中创建表格很麻烦。
使用编辑器，你只需点击表格按钮，就会弹出一个窗口询问你想要多少行和多少列，然后自动为你插入表格。
更新表格
更棒的是，这款编辑器允许你将光标定位在表格内，然后只需点击几下即可添加行甚至列。由于 Markdown 中的表格格式比较混乱，这项功能确实能带来很大的便利。
我在 0.03 版本中对表格功能进行了进一步改进，使其使用起来更加方便！
脚注
只需单击一下即可自动添加脚注¹。
液态标签
之前的版本可以处理一些 Liquid 标签，例如 jsFiddles 和 codepens。
此版本可以处理：
- jsfiddles
- 代码库
- 毛刺
- Dev.to 链接到其他文章
- Dev.to 链接到用户个人资料
- Dev.to 链接到标签
- Dev.to 链接到评论
- Dev.to 链接到播客。
- Dev.to 剧透/可折叠章节块
- 推文嵌入
- GitHub 仓库卡片
- GitHub 问题、PR 和评论卡片
- GitHub Gists
- YouTube 视频插入
- Twitch视频插入
- Vimeo 视频插入
- Medium 文章链接
还有大约 15 个 Liquid 标签需要添加，但这算是一个不错的开始！
此外，还有一些简单的逻辑可以从 URL 中选择 Liquid 标签所需的正确部分。（例如，为 dev.to 用户添加卡片时，只需要他们的用户名，编辑器会自动从完整的 URL 中去除用户名。）
图片！！！
实现这个功能很有趣。我不用像以前那样先上传图片再复制到想要的位置，而是直接构建了一个完整的图片添加界面。
为了努力说服人们更加关注无障碍设计，我还添加了图像预览和alt描述屏幕，提示用户输入图像的有意义的描述。
最重要的是……它实际上只是将图像直接放置在 Markdown 中当前光标位置，无需再费力复制 URL！
显然，我隐藏了 dev.to 的原始图像选择，以保持美观一致（我只是把编辑器放在了它上面！这是一个辅助功能问题，以后再解决😋）。
这使得事情变得非常有趣，因为我必须以与 dev.to API 相同的方式上传图片，以便正确存储图片，就像使用 dev.to 当前编辑器上传的图片一样。
幸运的是，他们的 API 非常简单，一旦我弄明白需要获取并上传authenticity_token图像，一切就都按预期工作了。
无障碍设计考量
现在虽然还不能完全无障碍通行，但已经好多了。
关于粘滞键的前言……我选择的按键真是蠢到家了！ ——“\”键在写作时转义某些内容时显然非常有用，我会将其更改为另一个按键/按键组合，以免编辑器无法使用！
粘滞键
我主要开发的功能是单手操作模式，带有粘滞键。
按下键盘上的“\”键会暂时启用粘滞键（直到执行操作为止）。
这样，您可以先按“\”，然后再按“o”来添加有序列表项。此时，粘滞键会自动关闭，您可以自由输入。
但是，如果您按两次“\”，则粘滞键将固定启用，这意味着您可以多次按 o 来设置一个有序列表，以便填充数据。
您随时可以再次按下“\”键将其关闭！
单手操作还有第二个好处。当我使用移动版编辑器时，就可以使用快捷键了，因为我们可以设置一个粘滞键，而不用使用 Ctrl + {key} 作为快捷键！
为了提升无障碍环境，你们还打算做些什么？
我还计划允许按钮在不同模式之间切换，以便那些难以理解图标的人可以使用文本代替图标。
我打算修复工具提示，使其在按钮获得焦点时显示。
我还要确保编辑器按钮的颜色与网站的主题颜色保持一致，因为目前它们只在白色主题下才能正常工作！
最后，正如我所说，我将制作一个移动版本，其中包含一些巧妙的文本选择功能，应该能让有手部灵活性/准确性问题的人也能使用！
看起来很棒，我该如何使用呢？
目前只能通过书签小程序使用它。
- 将 fiddle 中的链接拖到您的书签栏中
- 访问https://dev.to/new并点击您刚刚添加的书签。
- 编辑器会神奇地出现，让你体验所有的bug！
- 试试“Ctrl”+（B、I、E、L、Q、R、H（然后是2-6）、O和U），或者点击按钮！另外，某些功能需要先选中文本（例如，选中一段文本，按“Ctrl”+“B”，文本就会自动加粗
**……就这么简单！）
或者创建一个新书签，点击“更多”，将以下代码粘贴到“URL”字段中，然后保存书签。
javascript:(function (){document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src='https://inhu.co/dev_to/experiments/bookmarklet/bookmarklet-v2.js?'+Math.random();}());
我发现了一个漏洞
我一点也不感到惊讶，目前这一切都只是靠口香糖和胶带勉强维持着而已。
不过，如果您能留言告诉我您的发现，以便我看看能否修复它，我将不胜感激。
ps 目前仅需修复 Chrome 浏览器的 bug，待 Chrome 版本稳定后，我会修复“狐狸”等问题。
我已知的漏洞：
- 如果您预览页面，然后返回编辑器，编辑器中的设置就会丢失。
- 如果编辑器出现故障，再次按下书签会导致各种错误，因此您必须重新加载页面。
- 如果误选了某些文本，表格可能会出现严重问题。
- 编辑页面顶部附近的项目会导致页面跳到底部，因为所有文本都会被替换。
- 焦点指示器位置有些奇怪，或者某些选项出现异常行为，这些都是一些小问题。如果您发现任何问题，请随时指出，以免我遗漏！
我正在努力修复所有这些问题！
你打算把它做成插件/扩展程序吗？
没错！正如评论中建议的那样，我打算把它做成用户脚本，最终目标是开发成 Chrome 扩展程序！
要么就是，如果足够多的人@ben和jess，他们可能会决定在dev.to中自己实现这个功能（这样bug应该会少很多！🤣）。
结论
正如你所看到的，它离完成还有很长的路要走，但我非常享受这个项目带给我的挑战。
我的意思是，我用编辑器写了整篇文章，感觉……嗯，这么说吧，比记住所有 Liquid 标签要容易得多，但预览功能仍然不理想，经常出错🤣。
可能至少还需要一个月的时间才能做出完全可用的版本，但我会随着改进不断发布更新。
如果你已经看到这里，那么你理应知道我接下来要开发的功能……一个位于右侧的实时预览窗格，它会与编辑器窗格（会移动到左侧）同步。这也是短期内解决“预览问题”的一种方法😋。
如果你也和我一样，对不用在面板之间来回切换感到兴奋，那就关注我吧！
![[已删除用户] 图片](/upload/9-ibqm.png)
[已删除用户]
-
瞧，我早就说过，脚注！ ↩
您也可以考虑创建一个用户脚本，该脚本可以与诸如chrome.google.com/webstore/detail/...之类的工具一起使用……这对我们很多人来说会更方便。