使用 MooTools 1.2、PHP 和 MySQL 的可编辑内容

如今，每个人和他们的健美操教练都希望能够编辑自己的网站。他们为什么不呢？我的意思是，他们有 500 美元的预算，没有 HTML/CSS 经验，而且期望很高。足够的咆哮虽然。拥有一个允许可编辑内容块的网站是许多客户的梦想。我花了几个小时为页内可编辑内容块开发了一个系统。

XHTML

<h1  rel="32" title="Article Title">Editable Title</h1>
<p  title="Content Paragraph" rel="33">
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
	This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.  This is an editable paragraph.
</p>

请注意，任何可编辑区域都被指定为 editable 类。 “rel”属性反映了将在数据库中更新的记录的 ID。此外，如果我们希望表单元素成为文本区域而不是输入框，我们将为可编辑元素提供“textarea”类。

CSS

.editable:hover	{ background:#eee; }
.textarea textarea{ height:200px; padding:3px; }
.editable-empty	{ background:#fffea1; padding:20px; border:1px dashed #fc0; }
.box		{ border:1px solid #ccc; padding:5px; display:block; width:95%; }

“框”类同时应用于输入和文本区域。其余用于光泽度。

MooTools JavaScript

//once the dom is ready
window.addEvent('domready', function() {
	//find the editable areas
	$$('.editable').each(function(el) {
		//add double-click and blur events
		el.addEvent('dblclick',function() {
			//store "before" message
			var before = el.get('html').trim();
			//erase current
			el.set('html','');
			//replace current text/content with input or textarea element
			if(el.hasClass('textarea'))
			{
				var input = new Element('textarea', { 'class':'box', 'text':before });
			}
			else
			{
				var input = new Element('input', { 'class':'box', 'value':before });
				//blur input when they press "Enter"
				input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
			}
			input.inject(el).select();
			//add blur event to input
			input.addEvent('blur', function() {
				//get value, place it in original element
				val = input.get('value').trim();
				el.set('text',val).addClass(val != '' ? '' : 'editable-empty');
				
				//save respective record
				var url = 'mootools-editable-content.php?id=' + el.get('rel') + '&content=' + el.get('text');
				var request = new Request({
					url:url,
					method:'post',
					onRequest: function() {
						alert('making ajax call :: ' + url);
					}
				}).send();
			});
		});
	});
});

一旦 DOM 准备就绪，我们就会找到所有具有 editable 类的元素。我们将“双击”事件附加到每个插入输入元素（或文本区域，取决于原始元素是否具有“文本区域”类）的可编辑项。注入 input/textarea 元素后，我们将“模糊”事件附加到表单元素，该事件触发将保存内容的 AJAX 请求。

PHP 和 MySQL

if($_SESSION['is_admin'] && is_numeric($_POST['id']) && isset($_POST['content']))
{
	$query = "UPDATE content_table SET content = '".mysql_real_escape_string(stripslashes($_POST['content']))."' WHERE content_id = ".(int)$_POST['id'];
	$result = mysql_query($query,$db_link);
}

当 PHP 文件收到 $_POST 请求时，它会验证凭据并使用新内容更新数据库。简单的！单击此处查看实际效果！

关于代码的一些注释。首先，该系统不适用于大型网站。该系统要求将可编辑的内容放置在数据库中，每个区域都有唯一的 ID。理想情况下，您会使用这个小型、简单的网站。其次，textarea 没有附加 WYSIWYG 编辑器，因此编辑器（人）如果想添加链接等则需要一些 HTML 知识。如果您确实希望他们拥有该功能，请下载并配置 FCKEditor、TinyMCE 或 WMD。

想法？这是垃圾吗？有用？打我！