HTML5コンテンツ属性フロントエンドでのWebコンテンツの編集

の新機能の1つ HTML5 私を魅了したのはネイティブのフロントエンドエディタです。この機能は一般にブラウザから直接コンテンツを編集するためにコンテンツ管理システムに適用され、通常JavaScriptとAJAXで完全に構築されています。 HTML 5を使用すると、プロセスが少し簡単になります。 満足できる 属性.

それは何ですか

任意の要素に適用されたとき、この属性は私たちを可能にします 編集する その内容は、下の例を見てみましょう。

 クッキーマフィンクロワッサン。 Faworkiデンマークビスケット。ナツメパウダークッキーケーキビスケットhalvah halvah。ビスケットグミゼリービスケット.
 甘いロールティラミスチョコレートバーシュガープラムキャラメルトゥーツロールキャラメル。チョコレートケーキと綿菓子のアイシング。 Applicakeゴマスナップ甘草菓子クロワッサンキャラメルフルーツケーキジンジャーブレッドビスケット。ドーナツタフィーキャンディー.

この例では、追加しました 満足できる 属性と設定 本当の そのため、コンテンツは編集可能になります。この属性に追加できる値は他に2つあります。

偽 これは逆になります。コンテンツは編集できなくなります。
受け継ぐ;次の場合はコンテンツが編集可能になります。 直接の親 編集可能です.

デモを見る

上記のデモをチェックアウトした場合は、コンテンツをブラウザから直接編集できることがわかります。ただし、この要素は変更内容の保存をカバーしていないため、変更後にページを更新すると、コンテンツは元に戻ります。.

変更を保存する方法

変更を保存するかどうかは、データをどこに保存するかによって異なります。通常、データベースに保存されます。しかし、このチュートリアルではデータベースにアクセスできないので、変更を保存する方法を説明します。 ローカルストレージ. そのために、コードを単純にするためにjQueryも少し使用します。さらなる参考として、Webアプリケーション用のローカルストレージの過去、現在、そして未来を見ることをお勧めします。.

まずはじめに、 ボタン 私たちのコンテンツの隣に.

  甘いロールティラミスチョコレートバーシュガープラムキャラメルトゥーツロールキャラメル。チョコレートケーキと綿菓子のアイシング。 Applicakeゴマスナップ甘草菓子クロワッサンキャラメルフルーツケーキジンジャーブレッドビスケット。ドーナツタフィーキャンディー.

ここでの考え方は、ボタンがクリックされたら変更を保存するということです。それでは、スクリプトを通してこのイベントを設定しましょう。

 var theContent = $（ '＃content2'）; $（ '＃save'）。on（ 'クリック'、function（）var editedContent = theContent.html（）; localStorage.newContent = editingContent;）;

このコードは、コンテンツに最後に加えられた変更を含むlocalStorageに新しいキーを作成します。 FirebugまたはDeveloper Toolsを使用して、データが正常に保存されたかどうかを明確にすることができますが、必ずボタンを押してください。 Firefoxユーザーの場合は、 DOM パネルをクリックしてlocalStorageを検索します。 SafariだけでなくChromeでも、 'Resources'タブで見ることができます。.

次に、このデータを取得してコンテンツを更新します。

 if（localStorage.getItem（ 'newContent'））theContent.html（localStorage.getItem（ 'newContent'））;

上記のコードはアイテムを識別します newContent localStorageから取得され、存在する場合は選択された要素に値を渡します。この場合 ＃content2. この時点でページを更新しても、行った変更はまだ表示されているはずです。.

デモを見る
ソースをダウンロード

最終的な考え

昔は、前に説明したようにフロントエンドエディタ機能を追加するのに数時間、場合によっては数週間かかることもあります。今日では、この属性を使用してほんの1秒かかります, 満足できる.

そして、caniuse.comによると、この属性は（驚くべきことに）IE7 +でも（驚くことではないが）他のブラウザでもサポートされています。古いブラウザ用にfallbacskを設定しなくても構いません.