May 29, 2018

esaの編集画面のpreviewエリアを隠したり出したりするブックマークレット

唐突ですがesa.io(以下、esa)べんり(プライベートでも仕事でも使っています)このブログもesaで書いたのを元にデプロイしています。

ただ、esaで記事書いてると、「プレビューはあとで確認するから一旦エディタ部分でっかくしたい」みたいなことがたまにあります。基本的にはプレビューでちゃんと確認してから保存したいけど、今はmarkdownとかの記法は後でちゃんとするから文章を書くのに集中したいことがあるのです。しかし、公式にはプレビューを隠すような感じの機能はない(はず)ので、雑にブックマークレット作りました。それが以下になります。

javascript:(function(){if($("#preview").attr("style")=="display: none;"){$("#form").removeAttr("style");$("#preview").removeAttr("style");}else{$("#preview").attr({style: "display: none;"});$("#form").attr({style: "width:100%;"});}}())

(動かしてるところのGIFつけようと思ったけどGIFでモザイク書くの大変だったので諦めた)

やってるのは要素の style 属性に display: none をつけたり width: 100% をつけたりしてるだけです。ブックマークレットでプレビュー部分を一旦隠し、その後ふたたび表示してもプレビュー部分が問題なく動くことは確認しています。 あくまでも無理やり広げてるだけなので、esa.ioの実装が変わったりしたら動かなくなる可能性が高いです。確認はしましたが、プレビュー部分がちゃんと動いてなくて変な記事になったなどの責任は負いかねますので、ご利用は自己責任でお願いします。

© yoshihara 2017-2019

Powered by Hugo & Kiss.