kamenokoki.com

【200日目】自作ブログ投稿フォーム:「Content Editable」を編集画面に適用してみた

Posted:  Last Update:

最近まったくブログ修正が進んでいません…。今日の目標は「ちょっとでも作業する!」です。やるぞー!ちなみに、今日はブログをやろう!と思い立ってから200日目の記念日でした。…これといって代わり映えもなく…。

ここまでの成果

現在一大プロジェクトに取り掛かっています。「WordPressのようなブログ投稿画面を自作する」というプロジェクト!夢はでかいです!

で、紆余曲折ありまして、今できているのがこんな感じですね。

  1. 専用のサーバーを立ち上げた(ローカル)
  2. 入力フォームのページを作った
  3. 入力フォーム左側のメニューから記事を選択できるようになった(一部)
  4. 入力ページが途中までできている

そして、今できている入力ページがこれです。

がしがし変更していく!

Content Editableを適用してみる

さっそく大仕事に取り掛かってみたいと思います!「Content Editable」の適用。

「Content Editable」というのはスタイルシートなのですが、これを適用すると、なんと、ブラウザ上でテキストの編集ができてしまいます!すごい。

なお、編集したテキストを保存するのは全く別の話。「Content Editable」を適用しても、保存はできません。画面上で文字が変わるだけ。保存には別途Javascriptでのコーディングが必要なんだって!

さぁ、「Content Editable」をDIVに適用してみましょう。ドキドキ。試しに「Windows Updateでかな入力に問題が発生」を「Content Editableを使うと編集可能になる」と書き換えてみる…。

編集前の画面

Content Editableを適用してみる

下が編集後!画面中ほどに注目です!「Windows Updateでかな入力に問題が発生」が「Content Editableを使うと編集可能になる」になりました!ブラウザ上で編集しています。

Content Editableを適用してみる

ブラウザ上で編集できるの、楽しいですね~!まだ保存できないんだけど…。

あっ、コードはこちらです。最初の行の「contenteditable="true"」がポイントです。

<div class="entry" contenteditable="true">
<?php
echo '<h1>'.$articletitle.'</h1>';
if(isset($articleintro)){
echo $articleintro;
}
$imageset = '/<img src="(.*?)" alt="(.*?)">/i';
preg_match_all($imageset, $articlebody, $matches, PREG_SET_ORDER);
foreach($matches as $image){
$images = preg_replace( '/<img src="(.*?)" alt="(.*?)">/i',
'<img src="'.$kameurl.'$1" alt="$2">', $image[0]);
$articlebody = preg_replace($imageset, $images, $articlebody, 1);
}
echo $articlebody;
?>

</div>

今日はここまで

ちょっと早いですが、今日はここまで!明日もちょっと触ることを目標にやっていきたいです。いちおう、残る課題をメモ代わりに書き出しておきます。

  • 「Content Editable」で編集した内容をJavascriptで保存する
  • 画像を全て呼び出せるようにする(現在は1つ目しか動いていない)
  • 文字カウントをつける
  • 他のサイトやカテゴリーも呼び出せるようにする
  • 記事の新規作成ができるようにする
  • パーツ(h2、pなど)を挿入できるようにする
  • 文中のコードの配色を自動で行えるようにする
記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告