[Tool] 開発備忘録 WYSIWIGエディタ作る話。#05 ver1.0をGithubにアップ

WYSIWIGエディタのファーストモックアップバージョンを、Githubにアップしました。 とりあえず、初期バージョンの完成ということで、これまでのソースコードを踏襲して、画面の表示や、付随する色々な機能を盛り込んでみました。

Github

https://github.com/yugeta/mynt_wysiwig

Demo

最新バージョンが確認できるデモページを用意しました。 https://yugeta.github.io/mynt_wysiwig/sample/

機能紹介

WYSIWIGモードとHTMLモード

WYSIWIGエディタですが、HTMLの記述もできないと不便なので、切り替えて使えるようにしておきました。

ブラウザキャッシュ機能

ブラウザアプリなので、そのページをリロードしてしまうと、書いてある内容が全部消えてしまうので、 書きかけの状態を、localStorageにキャッシュしておいて、ページ読み込み時に再現する事で、書いている途中でパソコンがダウンしても復活できるようにしておきました。

画像アップロード機能

この機能は、デモ盤では動作しません。 このプラグインをサーバーにアップロードして、phpなどのcgi処理でサーバー上に画像ファイルを設置できる状態で初めて動くようにしています。 HTML埋め込み画像にしてもいいんですが、使い勝手が悪くなるので、html,css,javascriptしか動かないdemo版では、動作しません。 ※phpのサンプルコードは、ソースコード内に配置しているので、dockerや、linuxサーバーでこのデモを動かすと、ちゃんと動作すると思います。

既知不具合

段落設置

行を選んで、h2やh3などの設定ができる機能なんですが、正規表現に問題があって、1行目にしか設置できないバグがあります。

重複タグ

文字色などを設置してあるタグに別の文字色を設置すると、タグが重複して書かれる場合があります。 また、HTMLモードで、タグ内で閉じタグを挟んで別タグを設置できてしまうなどの問題もあります。 この場合は、エラー表示する等の処理を入れる必要がありますが、今のところはできていません。

あとがき

ver1.0としていますが、まだまだバグバグだらけのツールです。 これをブラッシュアップしていけば、今後便利ツールになることは間違いないので、荒削りですが、この段階で公開しておきたいと思います。 修正版など気になる人は、GithubのREADME.mdに記載していくので、ウォッチしてみてくださいね。 あと、フォークやプルリクも受け付けているので、有識者の方はお気軽にお伝えください。