HTML5 Contenteditable属性：在前端编辑Web内容

HTML5吸引我的新功能之一是本机前端编辑器。 此功能通常在内容管理系统中应用，以直接从浏览器中编辑内容，并且通常使用JavaScript和AJAX完全构建。 HTML5使用contenteditable属性使该过程更加容易。

它能做什么

当应用于任何元素时，此属性将允许我们编辑其中的内容，让我们看下面的示例：

<article id="content1" contenteditable="true">
	<p>Cookie muffin croissant. Faworki danish biscuit. Jujubes powder cookie cake 
	biscuit halvah halvah. Biscuit gummies jelly biscuit.</p>

	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels.
	Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant 
	caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>

在此示例中，我们添加了contenteditable属性并将其设置为true以便内容变为可编辑的。 可以为此属性添加其他两个值；

• false则相反：内容将不可编辑
• inherit ; 当直接父级也可编辑时，它将使内容可编辑。

• 观看演示

如果您已经查看了上面的演示，则可以看到可以直接从浏览器中编辑内容。 但是，应注意，此元素不涵盖我们所做更改的存储，因此，在进行更改后刷新页面时，内容将还原。

如何保存更改

保存更改取决于我们将数据存储在何处； 通常，它将保存在数据库中。 但是由于我们没有数据库访问权限，因此在本教程中，我们将向您展示如何将更改保存在localStorage中 。 为此，我们还将使用一些jQuery来简化代码。 我建议您看一下Web应用程序本地存储的过去，现在和将来，以作为进一步的参考。

首先，让我们在内容旁边添加一个按钮 。

<article id="content2" contenteditable="true">
	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>

<button id="save">Save Changes</button>

这里的想法是，一旦单击按钮，我们将存储更改。 因此，让我们通过脚本设置此事件；

var theContent = $('#content2');

$('#save').on('click', function(){
	var editedContent 	= theContent.html();
	localStorage.newContent = editedContent;
});

此代码将在localStorage中创建一个新密钥，其中包含对内容所做的最后更改。 我们可以使用Firebug或开发人员工具来澄清数据是否已成功存储，但是请确保您单击了按钮。 对于Firefox用户，请转到DOM面板并搜索localStorage。 在Chrome和Safari中，我们都可以在“资源”标签下看到它。

然后，我们可以检索此数据以更新内容，如下所示；

if(localStorage.getItem('newContent')) {
	theContent.html(localStorage.getItem('newContent'));
}

上面的代码将从localStorage标识项目newContent ，如果该项目存在，它将把值传递给所选元素，在本例中为#content2 。 此时，当我们刷新页面时，我们仍然应该看到所做的更改。

• 观看演示
• 下载源

最终思想

在过去，如我们所展示的那样，添加前端编辑器功能可能需要数小时甚至数周的时间。 如今，使用此属性contenteditable只需一秒钟。

而且， 据caniuse.com称 ，（令人惊讶的是）IE7 +中已支持此属性，而其他浏览器中的（令人惊讶地）如下所示：Firefox 12，Chrome 20，Safari 5.1和Opera12。这意味着我们可以和平使用此元素不必为旧版浏览器设置fallbacsk。

翻译自: https://www.hongkiat.com/blog/html5-editable-content/