ckeditor inline enregistrer et transmettre

Je ne peux pas travailler sur la façon de saisir les données éditées à partir d'un CKEditor instance et l'envoyer à une adresse url.

Je suis à la recherche de quelque chose de ce:

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

et je ne peux pas travailler sur la façon dont les changements peuvent être sauvegardés. Puis-je poster le nouveau modifié les données pour être affecté à un PHP avec l'ID de l'élément en cours d'édition?

De même à cela:

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

J'espérais que je pourrais faire quelque chose comme ceci:

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

Mais je n'arrive pas à trouver quoi que ce soit, n'importe où.

Quelqu'un a travaillé sur la façon de faire cela?

Merci.

OriginalL'auteur Mr Goobri | 2012-11-28

Je suis sûr qu'il y a de nombreuses façons de tirer cette off, mais voici ma solution. Je suis en utilisant le Moteur de Template Smarty, mais cette technique devrait fonctionner avec de la vanille HTML.

Tout d'abord, voici un exemple de code HTML stocké dans mon fichier de 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 n'a que peu de choses:

Il convertit toute balise div avec l'attribut contenteditable = "true" inline-modifiable.
Après que le contenu est modifié (le flou), l'modifiable id de l'élément, le nom de fichier tpl, et édité contenu sont envoyées au serveur par le biais d'un appel ajax.

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

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

Sur le côté serveur, voici mon code PHP. Je suis à l'aide d'un cadre, de sorte que mon $this->_POST fonctions() peut sembler un peu inhabituel, mais j'espère que vous avez compris 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))           # 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 est essentiellement le chargement du HTML, l'emplacement de la balise div avec le bon id, puis remplacez le contenu de la balise div avec du contenu transmis via l'appel ajax. Le HTML est alors ré-enregistré sur le serveur. J'ai aussi inclure du code de stocker la sauvegarde des révisions juste au cas où les choses vont terriblement mal.

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 PHP Objet Dom Modèle parce que mon contenu HTML n'est pas valide HTML. Vous devriez regarder dans l'aide de l'Objet Dom plutôt que le Modèle si votre système est plus simple que la mienne.

J'espère que cela aide!

Merci!!!! Je cherchais comment le feu d'une requête ajax pour cela. Votre solution est parfait pour mon adoption.

OriginalL'auteur clone45

1

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

Je suis en utilisant le flou de l'événement

drôle. la question liée est marqué comme un double de cette question

OriginalL'auteur Mateu

Ci-dessus en utilisant la réponse de @clone45 et l'a modifié. Les données seront enregistrées busing Save bouton et seulement après quelques modifications réalisées sont anciennes et les nouvelles données sont comparées.

Substituée existants bouton enregistrer en ligne de l'éditeur et inclus ci-dessous averti uniquement une partie de @clone45 de réponse.

<script>

CKEDITOR.disableAutoInline = true;
$("div[contenteditable='true']").each(function(index) {
    var content_id = $(this).attr('id');
    var tpl = $(this).attr('tpl');
    var oldData = null;
    CKEDITOR.inline(content_id, {
        on: {
            instanceReady: function(event) {
                //get current data and save in variable
                oldData = event.editor.getData();
                //overwrite the default save function
                event.editor.addCommand("save", {
                    modes: {
                        wysiwyg: 1,
                        source: 1
                    },
                    exec: function() {
                        var data = event.editor.getData();
                        //check if any changes has been carried out
                        if (oldData !== data) {
                            oldData = data;
                            $.ajax({
                                    type: 'POST',
                                    url: 'process.php',
                                    data: {
                                        content: data,
                                        content_id: content_id,
                                        tpl: tpl
                                    }
                                })
                                .done(function(data) {
                                    alert('saved');
                                })
                                .fail(function() {
                                    alert('something went wrong');
                                });
                        } else
                            alert('looks like nothing has been changed');
                    }
                });
            }
        }
    });
});

</script>

Espérons que cette aide!!

OriginalL'auteur Rohan Khude

Vous devez vous connecter pour publier un commentaire.