Bloggerが新UIに変わったことで、記事を作成するエディターの仕様も変わりました。具体的には全ての行に<p>タグが付加されるようになり、HTMLも自動で改行されなくなりました。


これによってソースが見づらくなった上、以前は出なかった不具合も発生しているようなので困ったものです。そこで、<p>タグを除去してHTMLを自動整形するエディターを自作してみました。

Bエディターを使う

Bエディターには上記のリンクからアクセスしてください。

Bエディターの仕様

全体像

BエディターはBloggerの旧UIを再現するために作り上げたエディターです。

リッチテキストで編集した記事から、<p>タグを除去し、HTMLを自動整形する仕様になっています。

このBエディターは「エディターモード」と「プレビューモード」に分かれています。

エディターモードで記事を編集し、プレビューモードでそれを確認できるといった感じです。

この2つのモードは上部のタブをクリックすることで切り替えられます。

画像に関してはBloggerと連携していないので、Bloggerのエディターから追加する必要があります。

エディターモード

Bエディターのエディターモードは「リッチテキスト部分」と「HTML部分」に分かれています。

リッチテキストで記事を編集し、変換ボタンを押すことで整形されたHTMLが吐き出されます。

HTML部分はテキストエリアになっているので、変換後に手を加えることも可能です。

※リッチテキスト部分はSummernoteさんのエディターをお借りしております。

プレビューモード

Bエディターのプレビューモードは、HTML部分に記述されたソースをHTML形式で確認できるものです。

テキストエリアに記述されたソースをリアルタイムに読み取る仕様にしています。

ですが、リッチテキスト部分とは連携していないので、これを反映するには一度変換する必要があります。

※プレビューモードのCSSは当サイトの「Smart」から転用したものです。

Bエディターの使い方

1．リッチテキスト部分で記事を作成する

まず、リッチテキスト部分で記事を作成します。この部分の仕様はBloggerのエディターと大差ないので、普通に使いやすいと思います。

この部分にはメモ帳などにまとめたテキストを貼り付けて使うこともできます。ただし、HTMLなどから取得したテキストを貼り付けるとタグごと貼り付けられてしまうので注意が必要です。

2．変換ボタンを押す

変換ボタンを押すことで、HTML部分にリッチテキストで編集した記事のソースが吐き出されます。

この時に<p>タグが除去され、HTMLソースが自動整形されます。

3．HTMLからソースを取得する

後でBloggerで使うために処理されたHTMLソースをコピーします。

なお、ここでソースを編集することも可能です（<!--more-->タグなどを追加しておくと便利）。

また、ここまでの経過をプレビューモードで確認することもできます。

4．Bloggerのエディターに貼り付ける

Bloggerのエディターを「HTMLモード」で開いて、コピーしてきたHTMLソースを貼り付けます。

画像はこのタイミングで追加します。

あとは普通に投稿処理をすれば完了です。

備考

動作確認について

とりあえず、GoogleChromeでの動作は確認しています。

表示サイズ調整はしていますが、デザインが崩れる可能性はあります。