ckeditor的在线保存/提交 [英] ckeditor inline save/submit
问题描述
我不能工作了如何从一个CKEditor的情况下抓住编辑的数据，并将其张贴到一个URL。
I can't work out how to grab the edited data from a CKEditor instance and post it to a url.
我在找什么东西这样的：
I'm looking at something this:
<一个href="http://nightly.ckeditor.com/3995/samples/inlineall.html">http://nightly.ckeditor.com/3995/samples/inlineall.html
和我不能制定出如何变化可以被保存。我可以发布新编辑的数据被张贴到一个PHP随着元素的ID被编辑？
and I can't work out how the changes can be saved. Can I post the newly edited data to be posted to a PHP along with the ID of the element being edited?
与此类似：
editor.on('configLoaded', function(){
// do some stuff
});
我希望我可以做这样的事情：
I was hoping I could do something like this:
editor.on('clickAway', function(e){
id = e.id();
// do some ajax stuff
});
不过，我似乎无法找到任何东西，任何地方。
But I can't seem to find anything, anywhere.
有没有人制定了如何做到这一点？
Has anyone worked out how to do this?
感谢你。
推荐答案
我敢肯定有很多方法可以退出这个功能，但这里是我的解决方案。我使用Smarty模板引擎，但这种技术应与香草的HTML了。
I'm sure there are many ways to pull this off, but here's my solution. I'm using the Smarty Template Engine, but this technique should work with vanilla HTML too.
首先，这里的一些HTML保存在我的模板文件的例子名为dog_fleas.tpl：
First off, here's an example of some HTML stored in my template file named "dog_fleas.tpl":
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/admin/mycms.js"></script>
<div>
<div id="flea-blurb" tpl="/templates/dog_fleas.tpl" contenteditable="true">
<h1>My Dog Has Fleas</h1>
<p>This text is editable via the CMS!</p>
</div>
<p>This text is not editable</p>
</div>
中的JavaScript（mycms.js）来处理内联编辑为：
The javascript (mycms.js) to handle the inline editing is:
$(document).ready(function() {
CKEDITOR.disableAutoInline = true;
$("div[contenteditable='true']" ).each(function( index ) {
var content_id = $(this).attr('id');
var tpl = $(this).attr('tpl');
CKEDITOR.inline( content_id, {
on: {
blur: function( event ) {
var data = event.editor.getData();
var request = jQuery.ajax({
url: "/admin/cms-pages/inline-update",
type: "POST",
data: {
content : data,
content_id : content_id,
tpl : tpl
},
dataType: "html"
});
}
}
} );
});
});
以上code做了几件事情：
The above code does a few things:
- 这将任何div标签的属性CONTENTEDITABLE =真正的内联编辑。
- 在内容编辑（上模糊），可编辑元素的id，第三方物流的文件名，和编辑的内容是通过Ajax调用发送到服务器。
TPL的属性是必要的，我的情况，以确定正在编辑的文件。元素ID指定哪些元素被修改。
The tpl attribute is necessary in my situation to identify the file being edited. The element id specifies which element was modified.
虽然我的例子中只包含一个可编辑区域，该code支持单个文件中的多个可编辑区域。
Although my example only contains one editable region, this code supports multiple editable regions in a single file.
在服务器端，这是我的PHP code。我使用了一个框架，让我的$此 - > _ POST（）函数可能看起来有点不正常，但希望你的想法：
On the server-side, here's my PHP code. I'm using a framework, so my $this->_POST() functions might look a little unusual, but hopefully you get the idea:
// Get the posted parameters
$new_content = $this->_POST('content');
$content_id = $this->_POST('content_id');
$tpl_filename = $this->_POST('tpl');
// Get the contents of the .tpl file to edit
$file_contents = file_get_contents(APPPATH . 'views' . $tpl_filename);
// create revision as a backup in case of emergency
$revised_filename = str_replace('/', '.', $tpl_filename);
$revised_filename = ltrim ($revised_filename, '.');
file_put_contents(APPPATH . 'views/templates/revisions/' . $revised_filename . '.' . time(), $file_contents);
// Prepare to match the DIV tag
// Credit to: http://stackoverflow.com/questions/5355452/using-a-regular-expression-to-match-a-div-block-having-a-specific-id
$re = '% # Match a DIV element having id="content".
<div\b # Start of outer DIV start tag.
[^>]*? # Lazily match up to id attrib.
\bid\s*+=\s*+ # id attribute name and =
([\'"]?+) # $1: Optional quote delimiter.
\b' . $content_id . '\b # specific ID to be matched.
(?(1)\1) # If open quote, match same closing quote
[^>]*+> # remaining outer DIV start tag.
( # $2: DIV contents. (may be called recursively!)
(?: # Non-capture group for DIV contents alternatives.
# DIV contents option 1: All non-DIV, non-comment stuff...
[^<]++ # One or more non-tag, non-comment characters.
# DIV contents option 2: Start of a non-DIV tag...
| < # Match a "<", but only if it
(?! # is not the beginning of either
/?div\b # a DIV start or end tag,
| !-- # or an HTML comment.
) # Ok, that < was not a DIV or comment.
# DIV contents Option 3: an HTML comment.
| <!--.*?--> # A non-SGML compliant HTML comment.
# DIV contents Option 4: a nested DIV element!
| <div\b[^>]*+> # Inner DIV element start tag.
(?2) # Recurse group 2 as a nested subroutine.
</div\s*> # Inner DIV element end tag.
)*+ # Zero or more of these contents alternatives.
) # End 2$: DIV contents.
</div\s*> # Outer DIV end tag.
%isx';
if (preg_match($re, $file_contents, $matches))
{
$content_to_replace = $matches[0];
$replacement_content = $content_to_replace;
// Replace the inner content of $replacement_content with $new_content
$replacement_content = preg_replace('/(<div(?:.*?)>)(?:.*)(<\/div>)/msi',"$1" . $new_content . "$2", $replacement_content);
// Now replace the content_to_replace with $replacement content in the HTML
$new_file_contents = str_replace($content_to_replace, $replacement_content, $file_contents);
// write out the new .tpl file
file_put_contents(APPPATH . 'views' . $tpl_filename, $new_file_contents);
}
PHP的code以上，基本上加载HTML，定位div标签与正确的ID，然后替换为通过Ajax调用派下来的内容div标签的内容。之后，HTML然后重新保存到服务器。我还包括了一些code存储备份版本，以防万一事情可怕的错误。
The PHP code above is basically loading the HTML, locating the div tag with the proper id, then replacing the contents of that div tag with the content sent down via the ajax call. The HTML is then re-saved to the server. I also include some code to store backup revisions just in case things go terribly wrong.
我知道，经常EX pressions并不总是最好的解决方案。就我而言，这是很难用PHP DOM对象模型，因为我的HTML内容是无效的HTML。你可能会考虑使用DOM对象模型，而不是如果你的系统比我的更简单。
I realize that regular expressions aren't always the best solution. In my case, it was difficult to use the PHP Dom Object Model because my HTML content isn't valid HTML. You might look into using the Dom Object Model instead if your system is simpler than mine.
我希望这有助于！
这篇关于ckeditor的在线保存/提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
