SIS Lab
>
Blog
>
React + ElectronでFlickr連携可能なMarkdown Editorを作った

React + ElectronでFlickr連携可能なMarkdown Editorを作った

更新日:2023.05.05 作成日:2016.08.24

Electron + Mithril.jsでFlickrアプリを作成する - SIS Lab で、自分専用のMarkdown-Editorを作りたいと思っていたので、今回Reactの勉強も兼ねて、Flickr連携できるMarkdown Editorを作成しました。

最終的には、自分専用Markdownデスクトップアプリを、Electronで作成することが目標だ。Kobitoは便利で使ってるのだけど、そのままEvernoteに連携して欲しかったり、リンク作成の機能がまとまってると嬉しい。

実装したい機能は、こんな感じ。Kobitoをベースに自分専用の機能を盛り込みたい。

Markdownエディター(オートプレビュー) Flickr連携(アップロード、リンク作成) Evernote連携(自動保存) Amazonリンク作成 ASP一括検索 git pushでブログデプロイ

今の機能

Markdown記法で記載すれば、リアルタイムにプレビューできる
Editor部分に写真をDrag & Dropすれば、Flickrにアップロードして、その画像リンクを貼ってくれる

ベースは、以下のreact-markdown-editorを参考にさせてもらいました。 uraway/react-markdown-editor: React + Electron = Markdown Editor

Drag & Drop

デフォルトのままだと、ファイルをDrag & Dropするとそのファイル自身をWebViewで表示する挙動となるため、以下のように、デフォルトの挙動を書き換える必要があります。

    const holder = document.getElementById('input');
    holder.ondragover = () => { return true; };
    holder.ondragleave = holder.ondragend = () => { return false; };
    holder.ondrop = (e) => {
      e.preventDefault();
      const file = e.dataTransfer.files[0];
      console.log('File Path:', file.path);
      ipcRenderer.send('upload', file.path);  // file upload
      return false;
    };