ckeditor内联保存/提交

我相信有很多方法可以做到这一点，但这是我的解决方案。我正在使用Smarty模板引擎，但这种技术也应该适用于香草HTML

首先，这里有一个存储在我名为“dog_fleas.tpl”的模板文件中的HTML示例：

&lt；script type=“text/javascript”src=”https://stackoverflow.com/js/ckeditor/ckeditor.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”src=”https://stackoverflow.com/js/admin/mycms.js“&gt&lt/脚本&gt；
&lt；部门&gt；
&lt；div id=“flea blurb”tpl=“/templates/dog\u fleals.tpl”contentediate=“true”&gt；
&lt；h1&gt；我的狗有跳蚤&lt/h1&gt；
&lt；p&gt；此文本可通过CMS编辑&lt/p&gt；
&lt/部门&gt；
&lt；p&gt；此文本不可编辑&lt/p&gt；
&lt/部门&gt；

处理内联编辑的javascript（mycms.js）是：

$（文档）.ready（函数（）{
CKEDITOR.disableAutoInline=true；
$（“div[contenteditable='true']）。每个（函数（索引）{
var content_id=$（this.attr（'id'）；
var tpl=$（this.attr（'tpl'）；
CKEDITOR.inline（内容\u id{
关于：{
模糊：功能（事件）{
var data=event.editor.getData（）；
var request=jQuery.ajax({
url:“/admin/cms页面/内联更新”，
类型：“POST”，
数据：{
内容:数据,，
content\u id:content\u id，
第三方物流：第三方物流
},
数据类型：“html”
});
}
}
} );
});
});

上面的代码做了几件事：

1. 它将属性为contenteditable=“true”的任何div标记转换为内联可编辑
2. 编辑内容后（在模糊中），可编辑元素id、tpl文件名和编辑的内容通过ajax调用发送到服务器

在我的情况下，tpl属性是识别正在编辑的文件所必需的。元素id指定修改了哪个元素

虽然我的示例只包含一个可编辑区域，但这段代码在单个文件中支持多个可编辑区域

在服务器端，这里是我的PHP代码。我使用的是一个框架，因此我的$this->\u POST（）函数看起来可能有点不寻常，但希望您能理解：

//获取发布的参数
$new_content=$this-&gt_发布（“内容”）；
$content\u id=$this-&gt_POST（'content_id'）；
$tpl_filename=$this-&gt_邮政（“tpl”）；
//获取要编辑的.tpl文件的内容
$file\u contents=file\u get\u contents（APPPATH.'views.$tpl\u filename）；
//创建修订版作为紧急情况下的备份
$revised_filename=str_replace（“/”、“.”、$tpl_filename）；
$revised_filename=ltrim（$revised_filename，'.'）；
文件内容（APPPATH.'views/templates/revisions/'.$revisited\u filename.'...time（），$file\u contents）；
//准备匹配DIV标记
//归功于：http://stackoverflow.com/questions/5355452/using-a-regular-expression-to-match-a-div-block-having-a-specific-id
$re='%#匹配id=“content”的DIV元素。
&lt；div\b#外部div开始标记的开始。
[^&gt；]*？#惰性地匹配到id属性。
\bid\s*+=\s*+#id属性名称和=
（[\'”]？+）\$1：可选引号分隔符。
\b.“$content\u id”。\b#要匹配的特定id。
（？（1）\1）#如果是开放报价，则匹配相同的结束报价
[^&gt；]*+&gt；#剩余的外部DIV开始标记。
（#$2:DIV内容。（可以递归调用！）
（？：#用于DIV内容备选方案的非捕获组。
#DIV内容选项1：所有非DIV、非注释内容。。。
[^&lt；]++#一个或多个非标记、非注释字符。
#DIV内容选项2：非DIV标记的开始。。。
|&lt；#匹配一个“&lt；”，但仅当它
（？！#不是这两者的开始
/？div\b#div开始或结束标记，
|！——#或HTML注释。
)#好吧，那不是一个DIV或评论。
#DIV内容选项3：HTML注释。
|&lt；！--.*？&gt；#不符合SGML的HTML注释。
#DIV内容选项4：嵌套的DIV元素！
|&lt；div\b[^&gt；]*+&gt；#内部div元素开始标记。
（？2）#将组2作为嵌套子例程递归。
&lt；/div\s*&gt；#内部div元素结束标记。
)*+#零个或多个此类内容替代方案。
)#End 2$：DIV内容。
&lt；/div\s*&gt；#外部div结束标记。
%isx′；
if（预匹配（$re，$file\u contents，$matches））
{
$content_to_replace=$matches[0]；
$replacement\u content=$content\u to\u replace；
//将$replacement\u content的内部内容替换为$new\u content
$replacement\u content=preg\u replace（'/（&lt；div（？：.*））（？：.*）（&lt；\/div&gt；）/msi'，“$1”。$new\u content。“$2”，$replacement\u content）；
//现在用HTML中的$replacement内容替换内容
$new_file_contents=str_replace（$content_to_replace，$replacement_content，$file_contents）；
//写出新的.tpl文件
文件内容（APPPATH.'views.$tpl文件名，$new文件内容）；
}

上面的PHP代码基本上是加载HTML，用正确的id定位div标记，然后用通过ajax调用发送的内容替换该div标记的内容。然后将HTML重新保存到服务器。我还包括一些代码来存储备份修订，以防出现严重错误

我意识到正则表达式并不总是最好的解决方案。在我的例子中，很难使用PHP Dom对象模型，因为我的HTML内容不是有效的HTML。如果你的系统比我的简单，你可以考虑使用Dom对象模型

我希望这有帮助