我不知道如何从CKEditor实例中获取已编辑的数据并将其发布到url。
我在看这样的东西:
http://nightly.ckeditor.com/3995/samples/inlineall.html
而且我不知道如何保存更改。我可以将要编辑的新数据连同要编辑的元素的ID一起发布到PHP吗?
与此类似:
editor.on('configLoaded', function(){ // do some stuff });
我希望我可以做这样的事情:
editor.on('clickAway', function(e){ id = e.id(); // do some ajax stuff });
但是我似乎在任何地方都找不到任何东西。
有没有人知道如何做到这一点?
谢谢。
我敢肯定有很多方法可以做到这一点,但这是我的解决方案。我正在使用Smarty模板引擎,但是该技术也应适用于普通HTML。
首先,这是一些存储在我的模板文件“ dog_fleas.tpl”中的HTML的示例:
<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)是:
$(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" }); } } } ); }); });
上面的代码做了几件事:
在我的情况下,tpl属性对于识别正在编辑的文件是必需的。元素ID指定要修改的元素。
尽管我的示例仅包含一个可编辑区域,但是此代码在单个文件中支持多个可编辑区域。
在服务器端,这是我的PHP代码。我使用的是框架,因此我的$ this-> _ POST()函数可能看起来有点不寻常,但希望您能明白:
// 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代码基本上是加载HTML,使用适当的ID定位div标签,然后用通过ajax调用向下发送的内容替换该div标签的内容。然后将HTML重新保存到服务器。我还提供了一些代码来存储备份修订版本,以防万一万一出了问题。
我意识到正则表达式并不总是最好的解决方案。就我而言,由于我的HTML内容不是有效的HTML,因此很难使用PHP Dom对象模型。如果您的系统比我的系统简单,则可以考虑使用Dom对象模型。
我希望这有帮助!