Content Editable

  • Revision slug: HTML/Content_Editable
  • Revision title: Content Editable
  • Revision id: 43741
  • Created:
  • Creator: sailplaneTW
  • Is current revision? No
  • Comment 50 words added, 113 words removed

Revision Content

介紹

  在 HTML5 中任何元素都可以被編輯。這個功能已經被廣泛討論很久,但直到最近才被正式加入 WHATWG (html current spec)。藉由一些 JavaScript event handler,你可以將你的網頁轉變為 rich-text editor。

相容性

  這個功能在現今 desktop browsers 大都被支援了。但在 mobile browser 上卻不然 - 除了 Firefox Mobile(但使用前也請確認一下)。

  • Firefox 3.5+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+

  但目前 iOS Safari, Opera Mini, Opera Mobile 和 Android Browser 都還沒支援。

實際運作

  在 HTML element 設定 contenteditable attribute 為 true 就可以使之變為可編輯。這可應用在幾乎所有的 HTML elements。

範例

  以下為範例:

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html> 

  執行狀況請看 這裡 這同時結合了 HTML5 的 local storage。原始碼請參見 

See also

How to interact with the content  (old IE style API) and here

{{ languages( { "pl": "pl/HTML/Element/br", "fr": "en/HTML/Element/br" } ) }}

Revision Source

<h3>介紹</h3>
<p>  在 HTML5 中任何元素都可以被編輯。這個功能已經被廣泛討論很久,但直到最近才被正式加入 <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">html current spec</a>)。藉由一些 JavaScript event handler,你可以將你的網頁轉變為 rich-text editor。</p>
<h3>相容性</h3>
<p>  這個功能在現今 desktop browsers 大都被支援了。但在 mobile browser 上卻不然 - 除了 Firefox Mobile(但使用前也請確認一下)。</p>
<ul> <li>Firefox 3.5+</li> <li>Chrome 6.0+</li> <li>Internet Explorer 6.0+</li> <li>Safari 3.2+</li> <li>Opera 8+</li>
</ul>
<p>  但目前 iOS Safari, Opera Mini, Opera Mobile 和 Android Browser 都還沒支援。</p>
<h3>實際運作</h3>
<p>  在 HTML element 設定 <code>contenteditable</code> attribute 為 <code>true</code> 就可以使之變為可編輯。這可應用在幾乎所有的 HTML elements。</p>
<h3>範例</h3>
<p>  以下為範例:</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div contenteditable="true"&gt;
      This text can be edited by the user.
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>
<p>  執行狀況請看 <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">這裡</a> 這同時結合了 HTML5 的 local storage。原始碼請參見 <a class="external" href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source"></a></p>
<h3>See also</h3>
<p><a href="/en/Midas" title="en/Midas">How to interact with the content </a> (old IE style API) and <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">here</a></p>
<p>{{ languages( { "pl": "pl/HTML/Element/br", "fr": "en/HTML/Element/br" } ) }}</p>
Revert to this revision