這篇文章主要講解了“如何在atom中添加自定義快捷鍵”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何在atom中添加自定義快捷鍵”吧！
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到臨沂網(wǎng)站設(shè)計(jì)與臨沂網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋臨沂地區(qū)。
在使用Markdown寫(xiě)學(xué)習(xí)筆記的時(shí)候，一開(kāi)始選擇markdownpad 2作為編輯器，但是markdownpad對(duì)latex公式，以及貼圖的使用十分不友好，但存在著一些友好的快捷鍵，如ctrl+1快速添加1級(jí)標(biāo)題，也設(shè)置了一個(gè)toolbar能夠快速的進(jìn)行對(duì)文本加粗，插入網(wǎng)址超鏈接等操作，比較適合新手。但是markdownpad 2對(duì)latex等數(shù)學(xué)公式、貼入圖片等方面使用效果不好。
atom是一款非常好的markdown編輯器,(下載網(wǎng)址)，支持多種編程語(yǔ)言格式,同時(shí)開(kāi)源，有很多的第三方package以及theme來(lái)使得編輯器更加的人性化。
其中的language-markdown是atom必裝的markdown增強(qiáng)庫(kù)，其中設(shè)定了一系列的快捷，如：
但atom中卻沒(méi)有快速添加markdown標(biāo)題的快捷鍵。為了解決這個(gè)問(wèn)題，需要自定義快捷鍵。(PS:截至到發(fā)博，未見(jiàn)有其他類似教程)現(xiàn)在是我整個(gè)分析和操作的思路，如果看官?zèng)]有時(shí)間，建議直接下載我修改好的文件，覆蓋覆蓋language-markdown目錄下的同名文件夾，并重啟atom即可
atom中的快捷鍵功能非常強(qiáng)大， 同一個(gè)快捷鍵，在atom的不同窗口上實(shí)現(xiàn)的功能是不一樣的，同時(shí)還支持自定義。在atom的settings-keybindings中進(jìn)行查看
可以發(fā)現(xiàn)ctrl++就對(duì)應(yīng)著好3條功能，從sorce上在不同的view里確實(shí)是實(shí)現(xiàn)了不同的功能，按照界面的提示，我們復(fù)制在markdown-preview-plus中的快捷鍵語(yǔ)法，如下：
'.platform-win32 .markdown-preview-plus': 'ctrl-+': 'markdown-preview-plus:zoom-in'
我們可以發(fā)現(xiàn)，atom快捷鍵設(shè)定的語(yǔ)法特點(diǎn)是：
'Selector': 'keystroke': 'Command'
keystroke是我們要設(shè)定的快捷鍵，Command是快捷鍵執(zhí)行的命令，而source指示的是該快捷鍵在哪個(gè)package中，而Selector是選擇器，可以認(rèn)為跟CSS選擇器差不多，都是定位元素位置，在atom中大概是識(shí)別監(jiān)測(cè)快捷鍵發(fā)生的上下文位置把。重點(diǎn)分析Command，感覺(jué)這個(gè)好像是引用了包中的一個(gè)函數(shù)。
查看language-markdown中設(shè)定的一個(gè)快捷鍵：
'atom-text-editor[data-grammar="text md"]': '*': 'markdown:strong-emphasis'
在package中，搜索strong-emphasis的關(guān)鍵字，發(fā)現(xiàn)在lib文件的’main.js`中有多處匹配記錄，并發(fā)現(xiàn)有以下的內(nèi)容(189-202行)：
重慶分公司
重慶分公司
addCommands () {
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:indent-list-item', (event) => this.indentListItem(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:outdent-list-item', (event) => this.outdentListItem(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:emphasis', (event) => this.emphasizeSelection(event, '_')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strong-emphasis', (event) => this.emphasizeSelection(event, '**')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strike-through', (event) => this.emphasizeSelection(event, '~~')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:link', (event) => this.linkSelection(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:image', (event) => this.linkSelection(event, true)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:toggle-task', (event) => this.toggleTask(event)))
if (atom.inDevMode()) {
this.subscriptions.add(atom.commands.add('atom-workspace', 'markdown:compile-grammar-and-reload', () => this.compileGrammar()))
}
},這一段代碼出現(xiàn)了問(wèn)題描述中所展示的language-markdown包的快捷鍵描述的Command，并發(fā)現(xiàn)strong-emphasis是調(diào)用了js中的emphasizeSelection函數(shù)。由于strong-emphasis實(shí)現(xiàn)了文字的加粗顯示功能，而在markdown中的文字加粗顯示其實(shí)就是在要加粗的文字前后加**，而markdown設(shè)定標(biāo)題其實(shí)就是在文本前后加多個(gè)#。故可以分析emphasizeSelection函數(shù)來(lái)達(dá)到我們的目的，emphasizeSelection函數(shù)如下：
emphasizeSelection (event, token) {
let didSomeWrapping = false
if (atom.config.get('language-markdown.emphasisShortcuts')) {
const editor = atom.workspace.getActiveTextEditor()
if (!editor) return
const ranges = this.getSelectedBufferRangesReversed(editor)
for (const range of ranges) {
const text = editor.getTextInBufferRange(range)
/*
Skip texts that contain a line-break, or are empty.
Multi-line emphasis is not supported 'anyway'.
If afterwards not a single selection has been wrapped, cancel the event
and insert the character as normal.
If two cursors were found, but only one of them was a selection, and the
other a normal cursor, then the normal cursor is ignored, and the single
selection will be wrapped.
*/
if (text.length !== 0 && text.indexOf('\n') === -1) {
const wrappedText = this.wrapText(text, token)
editor.setTextInBufferRange(range, wrappedText)
didSomeWrapping = true
}
}
}
if (!didSomeWrapping) {
event.abortKeyBinding()
}
return
},從源代碼中，我們分析得知，在判斷一系列條件下：當(dāng)有選中文字，且為單行時(shí)，就在text前后加token，而token正是addcommand函數(shù)中設(shè)定的**。但是由于markdown設(shè)定標(biāo)題，是文本前后各有一個(gè)空格，然后再加#: # header1 #。所以我們可以對(duì)這個(gè)函數(shù)進(jìn)行非常簡(jiǎn)單的修改，即在調(diào)用的this.wrapText(text, token)時(shí)，直接在text然后加上空格符就行了，如復(fù)制一份emphasizeSelection代碼，并命名為addwords：
addwords (event, token) {
let didSomeWrapping = false
if (atom.config.get('language-markdown.emphasisShortcuts')) {
const editor = atom.workspace.getActiveTextEditor()
if (!editor) return
const ranges = this.getSelectedBufferRangesReversed(editor)
for (const range of ranges) {
const text = editor.getTextInBufferRange(range)
/*
Skip texts that contain a line-break, or are empty.
Multi-line emphasis is not supported 'anyway'.
If afterwards not a single selection has been wrapped, cancel the event
and insert the character as normal.
If two cursors were found, but only one of them was a selection, and the
other a normal cursor, then the normal cursor is ignored, and the single
selection will be wrapped.
*/
if (text.length !== 0 && text.indexOf('\n') === -1) {
//2021年2月4日 14:55:26，這里需要在text文本上前后加空格，不然，不能正常的設(shè)定1-3級(jí)標(biāo)題
const wrappedText = this.wrapText(" "+text+" ", token)
editor.setTextInBufferRange(range, wrappedText)
didSomeWrapping = true
}
}
}
if (!didSomeWrapping) {
event.abortKeyBinding()
}
return
}在addCommands中中添加三行關(guān)于 addwords的設(shè)定，即可完成快捷鍵Command的設(shè)定，當(dāng)選中文本調(diào)用'markdown:header1'，便會(huì)自動(dòng)將文本設(shè)定為一級(jí)標(biāo)題，修改后的addCommands：
addCommands () {
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:indent-list-item', (event) => this.indentListItem(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:outdent-list-item', (event) => this.outdentListItem(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:emphasis', (event) => this.emphasizeSelection(event, '_')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strong-emphasis', (event) => this.emphasizeSelection(event, '**')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:strike-through', (event) => this.emphasizeSelection(event, '~~')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:link', (event) => this.linkSelection(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:image', (event) => this.linkSelection(event, true)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:toggle-task', (event) => this.toggleTask(event)))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header1', (event) => this.addwords(event, '#')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header2', (event) => this.addwords(event, '##')))
this.subscriptions.add(atom.commands.add('atom-text-editor', 'markdown:header3', (event) => this.addwords(event, '###')))
if (atom.inDevMode()) {
this.subscriptions.add(atom.commands.add('atom-workspace', 'markdown:compile-grammar-and-reload', () => this.compileGrammar()))
}
},現(xiàn)在已經(jīng)完成快捷鍵的設(shè)定了，然后就可以用我們?cè)诜治鰇eybindings分析得的快捷鍵語(yǔ)法，在keymap文件中設(shè)定快捷鍵，如：
'atom-text-editor[data-grammar="text md"]': 'ctrl-1': 'markdown:header1' 'ctrl-2': 'markdown:header2' 'ctrl-3': 'markdown:header3'
ctrl+數(shù)字的方法跟markdownpad2中的快捷鍵保持一致，但要注意這里只設(shè)計(jì)到三級(jí)標(biāo)題，可以應(yīng)對(duì)大部分的寫(xiě)作情況。當(dāng)然，也可分析源碼，自定義其他的功能函數(shù)，來(lái)實(shí)現(xiàn)更為復(fù)雜的命令。
另外一種設(shè)定快捷鍵的方式，是直接改寫(xiě)language-markdown的快捷鍵配置文件。在atom中，快捷鍵的自定義設(shè)定在keymaps.cson文件中設(shè)定，分析language-markdown發(fā)現(xiàn)，其存在keymaps中的文件夾，其中有一個(gè)cson文件，打開(kāi)文件，發(fā)現(xiàn)果然是有關(guān)快捷鍵的設(shè)定：
'.platform-darwin atom-workspace': 'cmd-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-win32 atom-workspace': 'shift-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-linux atom-workspace': 'shift-alt-ctrl-c': 'markdown:compile-grammar-and-reload''.platform-darwin atom-text-editor[data-grammar="text md"]': 'cmd-shift-x': 'markdown:toggle-task''.platform-win32 atom-text-editor[data-grammar="text md"]': 'ctrl-shift-x': 'markdown:toggle-task''.platform-linux atom-text-editor[data-grammar="text md"]': 'ctrl-shift-x': 'markdown:toggle-task''atom-text-editor[data-grammar="text md"]': 'tab': 'markdown:indent-list-item' 'shift-tab': 'markdown:outdent-list-item' '_': 'markdown:emphasis' '*': 'markdown:strong-emphasis' '~': 'markdown:strike-through' '@': 'markdown:link' '!': 'markdown:image'
我們將上述的三條ctrl+數(shù)字的命令粘貼在這里，重啟atom后，發(fā)現(xiàn)成功添加了快捷鍵，在markdown測(cè)試也正常：
經(jīng)過(guò)對(duì)比發(fā)現(xiàn)，在keymaps文件中重載快捷鍵，其Source為user，而在language-markdown中的cson中修改，其Source顯示為language-markdown。顯然后者看起來(lái)更統(tǒng)一，符合強(qiáng)迫癥患者的需求…
感謝各位的閱讀，以上就是“如何在atom中添加自定義快捷鍵”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何在atom中添加自定義快捷鍵這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
