diff options
Diffstat (limited to 'files/zh-cn/web/guide/html/editable_content/index.html')
| -rw-r--r-- | files/zh-cn/web/guide/html/editable_content/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/files/zh-cn/web/guide/html/editable_content/index.html b/files/zh-cn/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..00f44d6fd7 --- /dev/null +++ b/files/zh-cn/web/guide/html/editable_content/index.html @@ -0,0 +1,219 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。本文提供了有关此功能的一些信息。 </span></p> + +<h2 id="它是如何工作的？">它是如何工作的？</h2> + +<p>为了使元素可编辑，你所要做的就是在html标签上设置<em>"contenteditable"</em>属性，它几乎支持所有的HTML元素。</p> + +<p>下面是一个简单的示例，创建一个<em>"contenteditable"</em>属性为<em>"true"</em>的div元素，用户就可以编辑其内容了。</p> + +<pre class="brush: html notranslate"><div contenteditable="true"> + This text can be edited by the user. +</div></pre> + +<p>这是上面代码运行的结果：</p> + +<p>{{ EmbedLiveSample('How_does_it_work') }}</p> + +<h2 id="执行命令设置可编辑区域">执行命令设置可编辑区域</h2> + +<p>当一个HTML元素的<code>contenteditable</code>属性被设置为<code>true</code>时，{{ domxref("document.execCommand()") }} 方法便可使用。通过该方法，你可以运行相关<a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择，例如，给文本提供一个样式(加粗，倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用<code>contentEditable</code>后，调用<code>execCommand()</code>方法将影响当前处于活动状态的可编辑元素</p> + +<h2 id="在标记生成上的不同点">在标记生成上的不同点</h2> + +<p>因为各个浏览器在标记生成上的不同，因此跨浏览器使用 <code>contenteditable</code> 一直以来都是痛点，例如一些看起来十分简单的事情，如： 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入{{htmlelement("br")}}、IE/Opera将使用{{htmlelement("p")}}、 Chrome/Safari 将使用 {{htmlelement("div")}}）</p> + +<p>幸运的是在现代浏览器中，这些不同都趋于一致了。截止到<a href="/en-US/docs/Mozilla/Firefox/Releases/60">Firefox 60</a>，火狐开始使用{{htmlelement("div")}}元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致</p> + +<div class="note"> +<p><strong>注意</strong>: Internet Explorer使用 {{htmlelement("p")}} 元素而不是 <code><div></code>.</p> +</div> + +<p>如果你想使用不同的方式创建新的段落,上面所有浏览器都支持{{domxref("document.execCommand")}}方法，该方法提供的 <code>defaultParagraphSeparator</code> 命令能够让你以不同的方式创建新的段落例如, 使用 {{htmlelement("p")}} 元素:</p> + +<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>另外，从FireFox 55开始，火狐还为<code>defaultParagraphSeparator</code>支持非标准化参数<code>br</code>。如果你的Web应用程序通过检查浏览器是否为火狐来支持旧的FireFox行为，这将非常有用。但不幸的是，你并没有多少时间来为新的Firefox修复你的Web应用，你可以在初始化<code>designMode</code>和<code>contenteditable</code>时插入下面的代码来恢复较早的Firefox行为：</p> + +<pre class="notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"defaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"br"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="安全性">安全性</h2> + +<p>出于安全原因，火狐浏览器默认不允许JavaScript代码使用剪贴板相关特性（如复制、粘贴等）。你可以在<code>about:config</code>中设置如下选项来启用它们:</p> + +<pre class="code notranslate">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<h2 id="例子：一个简单但完整的富文本编辑器">例子：一个简单但完整的富文本编辑器</h2> + +<div style="height: 500px; width: auto; overflow: auto;"> +<pre class="brush: html notranslate"><!doctype html> +<html> +<head> +<title>Rich Text Editor</title> +<script type="text/javascript"> +var oDoc, sDefTxt; + +function initDoc() { + oDoc = document.getElementById("textBox"); + sDefTxt = oDoc.innerHTML; + if (document.compForm.switchMode.checked) { setDocMode(true); } +} + +function formatDoc(sCmd, sValue) { + if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } +} + +function validateMode() { + if (!document.compForm.switchMode.checked) { return true ; } + alert("Uncheck \"Show HTML\"."); + oDoc.focus(); + return false; +} + +function setDocMode(bToSource) { + var oContent; + if (bToSource) { + oContent = document.createTextNode(oDoc.innerHTML); + oDoc.innerHTML = ""; + var oPre = document.createElement("pre"); + oDoc.contentEditable = false; + oPre.id = "sourceText"; + oPre.contentEditable = true; + oPre.appendChild(oContent); + oDoc.appendChild(oPre); + document.execCommand("defaultParagraphSeparator", false, "div"); + } else { + if (document.all) { + oDoc.innerHTML = oDoc.innerText; + } else { + oContent = document.createRange(); + oContent.selectNodeContents(oDoc.firstChild); + oDoc.innerHTML = oContent.toString(); + } + oDoc.contentEditable = true; + } + oDoc.focus(); +} + +function printDoc() { + if (!validateMode()) { return; } + var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); + oPrntWin.document.open(); + oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); + oPrntWin.document.close(); +} +</script> +<style type="text/css"> +.intLink { cursor: pointer; } +img.intLink { border: 0; } +#toolBar1 select { font-size:10px; } +#textBox { + width: 540px; + height: 200px; + border: 1px #000000 solid; + padding: 12px; + overflow: scroll; +} +#textBox #sourceText { + padding: 0; + margin: 0; + min-width: 498px; + min-height: 200px; +} +#editMode label { cursor: pointer; } +</style> +</head> +<body onload="initDoc();"> +<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> +<input type="hidden" name="myDoc"> +<div id="toolBar1"> +<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option selected>- formatting -</option> +<option value="h1">Title 1 &lt;h1&gt;</option> +<option value="h2">Title 2 &lt;h2&gt;</option> +<option value="h3">Title 3 &lt;h3&gt;</option> +<option value="h4">Title 4 &lt;h4&gt;</option> +<option value="h5">Title 5 &lt;h5&gt;</option> +<option value="h6">Subtitle &lt;h6&gt;</option> +<option value="p">Paragraph &lt;p&gt;</option> +<option value="pre">Preformatted &lt;pre&gt;</option> +</select> +<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- font -</option> +<option>Arial</option> +<option>Arial Black</option> +<option>Courier New</option> +<option>Times New Roman</option> +</select> +<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- size -</option> +<option value="1">Very small</option> +<option value="2">A bit small</option> +<option value="3">Normal</option> +<option value="4">Medium-large</option> +<option value="5">Big</option> +<option value="6">Very big</option> +<option value="7">Maximum</option> +</select> +<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- color -</option> +<option value="red">Red</option> +<option value="blue">Blue</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- background -</option> +<option value="red">Red</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +</div> +<div id="toolBar2"> +<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> +<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> +<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> +<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> +<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> +<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> +<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> +<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> +<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> +<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> +<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> +<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> +<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> +<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> +<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> +<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> +<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> +<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> +<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> +</div> +<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> +<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> +<p><input type="submit" value="Send" /></p> +</form> +</body> +</html> +</pre> +</div> + +<div class="note"><strong>注意:</strong> 如果你想知道如何标准的在你的页面中创建和插入编辑器，请查阅 <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">更多完整的富文本编辑器例子</a>.</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>全局属性 {{htmlattrxref("contenteditable")}} </li> + <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (支持脚本的文本编辑器组件)</li> + <li>{{cssxref("caret-color")}}, 用来设置文本插入光标的颜色</li> +</ul> |