満足している属性を持つインラインテキストエディターを作成します

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、途中で潜在的な可能性の例外を処理します。 SyntaxError編集者の作成

このエディターを構築するには、HTML要素のコンテンツを動的に変更する必要があります。 基本的なHTML構造は次のとおりです

編集可能な要素は、編集可能な必要性が一意のIDを必要とします。 簡単なツールバーも追加します：

Edit Document<br><br><br>
<div id="editor">
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited By - Monty Shokeen</p>
  <p id="content">Some content that needs correction.</p>
</div><br><br>

さあ、機能を追加しましょう。 クリックイベントをH1ボタンに添付して、テキスト入力を示します。 これをテストするには、単純なWebサーバー（

など）を使用します。 プロジェクトディレクトリで

を実行します。サーバーが起動し、HTMLファイルへのリンクを提供します。 全ページの編集に

<div id="toolbar">
  H1
  H2
</div><br><br>

を使用して

serveserveは、個々の要素を編集するのに最適です。 ページ上のほぼすべてのコンテンツを変更するには、

プロパティを使用します。これはドキュメント全体に影響します。

で無効にして有効にします designModeこれは、デザインとコンテンツの作成を分離するときに特に役立ちます。 デザイナーはレイアウトとプレースホルダーのテキストを提供し、コンテンツクリエーターが実際のコンテンツに記入します。 実験するには、ブラウザの開発者コンソールを開き、

と入力し、Enterキーを押します。 ページ全体が編集可能になるはずです。

contentEditable結論designMode document.designMode = 'on';document.designMode = 'off';属性は、記事やユーザーのコメントの変更など、クイック編集を簡素化します。 IE 5.5で最初に導入されましたが、今では幅広いブラウザサポート（Opera Miniを除く）を備えたWhatWG標準です。

javaScriptは、Web開発の基礎のままです。学習曲線がありますが、多数のフレームワークとライブラリが利用可能です。 追加のリソースについては、Envatoの市場を探索してください このチュートリアルは、

の基礎について説明し、基本的なインラインエディターを実証し、リッチなフォーマットボタンを追加します。 document.designMode = 'on';

この投稿には、ウェブ開発者、テクニカルライター、フリーランサー、オープンソースの寄稿者であるジェイコブジャクソンからの更新が含まれています。

以上が満足している属性を持つインラインテキストエディターを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。