Ckeditor inline save / submit

Je ne peux pas savoir comment extraire les données éditées d'une instance de CKEditor et la publier dans une URL.

Je regarde quelque chose comme ça:

Http://nightly.ckeditor.com/3995/samples/inlineall.html

Et je ne peux pas comprendre comment les modifications peuvent être enregistrées. Puis-je publier les données nouvellement éditées à publier sur un PHP avec l'ID de l'élément en cours d'édition?

De la même façon:

editor.on('configLoaded', function(){ // do some stuff });

J'espérais pouvoir faire quelque chose comme ça:

 editor.on('clickAway', function(e){ id = e.id(); // do some ajax stuff });

Mais je ne trouve rien, n'importe où.

Quelqu'un a-t-il travaillé sur la façon de le faire?

Je vous remercie.

Je suis sûr qu'il y a plusieurs façons d'éliminer cela, mais voici ma solution. J'utilise le Smarty Template Engine, mais cette technique devrait également fonctionner avec le HTML vanilla.

Tout d'abord, voici un exemple de HTML stocké dans mon fichier modèle nommé "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>

Le javascript (mycms.js) pour gérer l'édition en ligne est:

 $(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" }); } } } ); }); });

Le code ci-dessus fait quelques éléments:

Il convertit toute balise div avec l'attribut contenteditable = "true" pour éditer en ligne.
Une fois le contenu édité (au flou), l'identifiant de l'élément éditable, le nom du fichier tpl et le contenu édité sont envoyés au serveur via un appel ajax.

L'attribut tpl est nécessaire dans ma situation pour identifier le fichier en cours d'édition. L'identifiant d'élément spécifie quel élément a été modifié.

Bien que mon exemple ne contienne qu'une région modifiable, ce code prend en charge plusieurs régions modifiables dans un seul fichier.

Du côté du serveur, voici mon code PHP. J'utilise un cadre, donc mes $ ces fonctions -> _ POST () peuvent paraître un peu inhabituelles, mais j'espère que vous avez l'idée:

  // 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); }

Le code PHP ci-dessus consiste essentiellement à charger le HTML, à localiser la balise div avec l'identifiant approprié, puis à remplacer le contenu de cette balise div par le contenu envoyé via l'appel ajax. Le HTML est ensuite sauvegardé sur le serveur. J'incline également un code pour stocker des révisions de sauvegarde au cas où les choses seraient terriblement fausses.

Je me rends compte que les expressions régulières ne sont pas toujours la meilleure solution. Dans mon cas, il était difficile d'utiliser le modèle d'objet DOM PHP parce que mon contenu HTML n'est pas un code HTML valide. Vous pourriez envisager d'utiliser le modèle d'objet Dom à la place si votre système est plus simple que le mien.

J'espère que ça aide!

J'ai trouvé la solution suivante: Comment puis-je enregistrer le contenu de l'éditeur en ligne sur le serveur?

J'utilise l'événement flou