在 dev.to 编辑器中更快地编写 - 添加所见即所得和键盘快捷键![技巧 2]
这只是一个概念证明,如果有足够的需求,我会改进它,但它现在适合我的需求,希望它也能让你的生活更轻松!
为 dev.to 引入“所见即所得”
如果您是 dev.to 的新手,并且即将撰写第一篇文章,您可能会发现编辑器有点令人困惑。
如果您不习惯使用 Liquid Tags、markdown 等,它们并不是特别友好。
即使您是资深 Markdown 用户,在 dev.to 中创建文档也会很费力,需要手动输入所有内容。
好了,不用再纠结了,我来给你呈现 dev-WYSIWYG!(我知道严格来说这不算 WYSIWYG,但叫它 WYSIWYG 更容易些!)

它是一个书签小程序(目前指向我的服务器,但一旦错误被解决,它将指向 github),可为您提供粗体、斜体、标题等!
更好的是,每个命令都有相应的键盘快捷键Ctrl+Key Name
键盘命令:
只需按下Ctrl+ 按钮中显示的修饰键。
例如对于 codepen liquid 标签(显示内联 codepen)按Ctrl+5
命令如下:
- Ctrl+ 2:标题 2
- Ctrl+ 3:标题 3
- Ctrl+ 4:标题 4
- Ctrl+ B:粗体
- Ctrl+ I:斜体
- Ctrl+ L:链接
- Ctrl+ K:内联代码(反引号)
- Ctrl+ Q:块引用
- Ctrl+ R:水平线
- Ctrl+ 0:代码块(三个反引号)
- Ctrl+ 5:内联 Codepen
- Ctrl+ 6:内联 jsFiddle
- Ctrl+ 7:内联 dev.to 文章链接卡
- Ctrl+ 8:内联 dev.to 用户资料卡
- Ctrl+ 9:内联 dev.to 评论卡
如果您习惯使用 stackoverflow 控件,那么它们中的很多都是相似的,因此应该很容易掌握!
行为
如果您选择了文本,那么它将在插入的任何标签中使用该文本。
如果您没有选择文本,那么它将为您输入一些默认文本。
对于某些项目,您将收到填写关键信息的提示。请注意,如果您选择了某些文本,则提示可能会被忽略(我稍后会进行整理)。
使用前请先尝试一下。
下面的小提琴允许您首先在小提琴中试用编辑器以习惯它并查看它当前状态是否“足够好”以满足您的需求。
在 dev.to 上使用它

一旦您玩过小提琴并且喜欢这个编辑器,只需将小提琴中的“dev.to WYSIWYG”链接拖到您的书签栏即可。
然后在开发编辑器页面( https://dev.to/new )上单击链接,您就会看到编辑器功能和键盘快捷键!
结论
也许人们会讨厌它,但我已经喜欢上了只需按Ctrl+即可B使选定的文本变为粗体这一功能。
还有一些内容需要添加,例如有序列表和无序列表以及<kbd>
包装命令,因为我发现这些特别烦人!
无论如何,请让我知道您的想法以及您是否最终使用了它!
附言:我一直提倡无障碍,目前这还没有完全无障碍,我知道这一点,一旦我完成了功能等,我会做出必要的调整(它仍然可用,只是有点尴尬)。
鏂囩珷鏉ユ簮锛�https://dev.to/grahamthedev/wysiwyg-for-dev-to-jfp