Maison> outils de développement> atom> le corps du texte

Explication détaillée du processus de développement d'un plug-in Atom

青灯夜游
Libérer: 2021-02-01 11:53:00
avant
8466 Les gens l'ont consulté

Comment développer un composantAtomà partir de zéro ? L'article suivant vous présentera le processus de développement d'un plug-in Atom. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée du processus de développement d'un plug-in Atom

Recommandations associées : "Tutoriel d'utilisation d'Atom"

J'utilise beaucoup Atom pour bloguer récemment, puis j'ai découvert un très problème sérieux. .

Je ne souhaite pas télécharger des photos. Par exemple, vous pouvez directement copier/coller le fichier, puis le télécharger.

Cependant, aucun plug-in similaire n'a été trouvé sur Atom. Le plus proche nécessite toujours une sélection manuelle des fichiers puis un téléchargement.

Ce processus d'opération est trop lourd, alors écrivez simplement un plug-in vous-même.

Adresse de téléchargement du plug-in terminé : https://atom.io/packages/atom-image-uploader

Planning

Tout d'abord, nous avons déterminé le Si vous souhaitez le réussir, vous pouvez directementcopydéposer, puispastedans Atom pour terminer l'opération de téléchargement.
Une fois confirmé, nous commencerons à déplacer les briques.

Développement de plug-ins

Parce queAtomest une applicationElectron: https://electronjs.org

est une application de bureau développée à l'aide deJavaScript, donc Pour un front-end, c'est tout simplement merveilleux.
Regardons d'abord la documentation officielle deAtompour voir les opérations liées à la création d'un plug-in :
Nous ouvrons d'abord le panneau de commande dansAtom, puis entronsGenerate Package

Explication détaillée du processus de développement dun plug-in Atom

Après avoir appuyé sur Entrée, une boîte de dialogue apparaîtra. Entrez le nom du package à créer dans la case pour terminer la création d'unPackage.

Explication détaillée du processus de développement dun plug-in Atom

Atomgénérera un ensemble de fichiers par défaut et ouvrira une nouvelle fenêtre.

Structure du projet

Le répertoire du plug-in généré est le suivant :

. ├── keymaps │ └── first-package.json ├── lib │ ├── first-package-view.js │ └── first-package.js ├── menus │ └── first-package.json ├── package.json ├── spec │ ├── first-package-spec.js │ └── first-package-view-spec.js └── styles └── first-package.less
Copier après la connexion

keymaps

Ici, vous pouvez configurer les touches de raccourci à surveiller, et nous pouvons définir des touches de raccourci personnalisées pour déclencher certains comportements de notre plug-in.

{ "atom-workspace": { "ctrl-alt-o": "first-package:toggle" } }
Copier après la connexion

Nous pouvons ajouter ici diverses touches de raccourci personnalisées.
Valueest défini comme :包名:触发的事件名
Il est à noter que :
Les touches de raccourci configurées ici ont également la notion de portée. C'estJSONcelui à l'extérieurkey.
atom-workspacesignifie qu'il prend effet dansAtom
atom-text-editorsignifie qu'il ne prend effet que dans le cadre de l'éditeur de texte.

Explication détaillée du processus de développement dun plug-in Atom

Documentation officielle d'Atom

lib

C'est ici que le code principal du plug-in est stocké.
Deux fichiers seront générés par défaut :

  • package.js

  • package.view.js

Le fichier d'entrée principal généré par les points de plug-in par défaut ici.

Explication détaillée du processus de développement dun plug-in Atom

Le fichier d'entrée est exprimé sous la forme d'un objetJSON, qui peut implémenter les fonctions suivantes :

  • activate: Cette méthode sera exécutée lorsquePackageest activé. La signature de la fonction indique qu'elle acceptera un paramètrestate, qui est passé via la méthodeserialize(si elle est implémentée)

  • deactivate: La méthode qui sera déclenchée en cas d'échec dePackage. Ces deux méthodes peuvent être comprises commeReactdanscomponentWillMountetcomponentWillUnmount

  • : Il s'agit de la méthode mentionnée ci-dessus, qui peut renvoyer un objetserializeà utiliser après la prochaine activationJSON

  • Nom de l'événement correspondant à la touche de raccourci personnalisée : La méthode qui sera exécutée à chaque fois que

    est déclenché lorsque la touche de raccourci correspondante est déclenchéePackage

menus

Les fichiers de configuration dans le menu de l'application et le menu de la zone d'édition bar sont stockés ici

{ "context-menu": { "atom-text-editor": [ { "label": "Toggle first-package", "command": "first-package:toggle" } ] }, "menu": [ { "label": "Packages", "submenu": [ { "label": "first-package", "submenu": [ { "label": "Toggle", "command": "first-package:toggle" } ] } ] } ] }
Copier après la connexion

L'élément correspondant s'affichera lors d'un clic droit dans la zone correspondante.context-menu
apparaît dans la barre de menu principalemenu:Atom

Explication détaillée du processus de développement dun plug-in Atom

De même,

fera la distinction entre deux environnements,context-menuettext-editor.workspace

spec

stocke ici quelques cas de test. La création de

générera des assertions par défaut.Package
Écrire des tests est en effet une bonne habitude.

styles

如果Package有很多View要展示的话,可以在这里编写,默认使用的是Less语法。
由于我们只做一个C/V的操作,不会涉及到界面,所以styles直接就删掉了。

开始搬砖

大致结构已经了解了,我们就可以开始搬砖了。
因为是一个Electron应用,所以我们直接在Atom中按下alt + command + i,呼出我们熟悉的控制台界面。

Explication détaillée du processus de développement dun plug-in Atom

Atom是不会把Electron的各种文档重新写一遍的,所以我们现在控制台里边试一下我们的猜测是否正确。
一些想要的东西是否存在。

Explication détaillée du processus de développement dun plug-in Atom

经过验证确定了,Electronclipboard对象可以直接在Atom中使用,这就很开心了。

require('electron').clipboard.readImage().toPng()
Copier après la connexion

这样我们就拿到剪切板中的图片数据了,一个二进制的数组对象。
我们在触发Paste操作时,从clipboard中获取,如果剪切板中是图片的话,我们就将它上传并显示到编辑器中。
所以,接下来我们要做的就是:

  • 进行上传图片的操作

  • 将上传后的图片显示到编辑器中

上传图片

上传图片我们选择的是七牛,我们选择七牛来作为图床使用,因为他家提供了10GB的免费存储,灰常适合自己这样的笔记型博客。
但是用他家SDK时发现一个问题。。我将二进制数据转换为ReadStream后上传的资源损坏了-.-目前还没有找到原因。
所以我们做了曲线救国的方式。
将剪切板中的数据转换为Buffer然后暂存到本地,通过本地文件的方式来进行上传七牛。
在操作完成后我们再将临时文件移除。

try { let buffer = clipboard.readImage().toPng() let tempFilePath = 'XXX' fs.writeFileSync(tempFilePath, Buffer.from(buffer)) } catch (e) { // catch error } finally { fs.unlink(tempFilePath) // 因为我们并不依赖于删除成功的回调,所以直接空调用异步方法即可 }
Copier après la connexion

将上传后的资源显示到编辑器中

因为考虑到上传可能会受到网络影响,从而上传时间不可预估。
所以我们会先在文件中显示一部分占位文字。
通过全局的atom对象可以拿到当前活跃的窗口:

let editor = atom.workspace.getActiveTextEditor()
Copier après la connexion

为了避免同时上传多张图片时出现问题,我们将临时文件名作为填充的一部分。

editor.insertText(`![](${placeHolderText})`, editor)
Copier après la connexion

然后在上传成功后,我们将对应的填充字符替换为上传后的URL就可以了。

editor.scan(new RegExp(placeHolderText), tools => tools.replace(url))
Copier après la connexion

scan方法接收一个正则对象和回调函数。
我们将前边用到的占位文本作为正则对象,然后在回调将其替换为上传后的url
至此,我们的代码已经编写完了,剩下的就是一些交互上的优化。

完成后的效果图:

Explication détaillée du processus de développement dun plug-in Atom

以及,最后:我们要进行Package的上传。

上传开发完的Package

首先我们需要保证package.json中存在如下几个参数:

  1. name
  2. description
  3. repository

我们可以先使用如下命令来检查包名是否冲突。

apm show 你的包名
Copier après la connexion

如果没有冲突,我们就可以直接执行以下命令进行上传了。

apm publish 你的包名
Copier après la connexion

后续的代码修改,只需在该包的目录下执行:

apm publish
Copier après la connexion

一些可选的参数:

  1. major,增加版本号的第一位1.0.0->2.0.0
  2. minor,增加版本号的第二位0.1.0->0.2.0
  3. patch,增加版本号的第三位0.0.1->0.0.2

通过apm help可以获取到更多的帮助信息。

以上,就是开发一个Atom插件的完整流程咯。

更多编程相关知识,请访问:编程教学!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!