3 votes

Redimensionner EpicEditor en fonction du contenu qui y est placé

J'utilise epiceditor dans mon site, et je le remplis avec du markdown intégré à la page par le serveur. Actuellement, lorsque epiceditor s'affiche, il a une très petite hauteur par défaut, avec des barres de défilement pour permettre l'affichage de l'ensemble du contenu. Je peux définir manuellement la hauteur de la division et, pour l'instant, c'est ce que j'ai pu faire de mieux (j'ai défini une hauteur raisonnable : 800px). Cependant, j'aimerais que sa hauteur soit toujours suffisante pour contenir l'ensemble du contenu sans barres de défilement. Essentiellement quelque chose comme overflow:visible.

Voici les parties pertinentes jusqu'à présent

<html>
    <head>
        <script src="/assets/javascripts/epiceditor/js/epiceditor.min.js"       type="text/javascript"></script>

        <script id="postMarkdown" type="text/markdown" data-postId="1">
            #Markdowns in here
            ...
        </script>
        <style>
            #epiceditor{
                height: 800px;
            }
        </style>
        <script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="epiceditor">
        </div>
    </body>
</html>

Et voici la source de edit.js (compilé à partir de coffescript)

$ ->
    postMarkdown = $("#postMarkdown").first()

    options =
        basePath : '../../assets/javascripts/epiceditor'
    editor = new EpicEditor(options).load()
    postId = postMarkdown.data('postId')
    markdown = postMarkdown.html()
    editor.importFile('posts/'+postId,markdown);
    editor.reflow();

J'espérais que le reflux pourrait augmenter la hauteur après l'insertion du contenu, mais pas de chance. Cependant, si je redimensionne le div et que j'appelle reflow, il se redimensionne correctement. J'ai inspecté le balisage qu'il crée dans l'espoir de pouvoir déterminer la hauteur, redimensionner son conteneur et lui dire de refluer. Cependant, il semble qu'il contienne plusieurs iframes, et à première vue, je ne m'attendais pas à ce que ce soit un changement rapide, ou même que ce soit possible. Cependant, toute solution est la bienvenue.

Je comprends également que si je dimensionne son conteneur à la bonne hauteur, epiceditor remplira l'espace approprié. Cependant, je veux que sa hauteur soit le montant nécessaire pour le rendu, de sorte que l'éditeur prend la bonne place dans le reste de la conception des sites. Par conséquent, s'il y a quelque chose que je peux régler dans EpicEditor pour qu'il ne déborde pas de la manière dont il est, ou un moyen de déterminer la hauteur après son chargement, je suis prêt. Merci pour toute aide.

4voto

Oscar Godson Points 6070

Je suis le gars qui a fait EpicEditor, voici une solution pour vous :

var editor = new EpicEditor({
  basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});

var updateEditorHeight = function () {
  editorHeight = $(editor.getElement('editor').body).height();
  // +20 for padding
  $('#epiceditor').height(editorHeight + 20);
  editor.reflow();
}

editor.load(function (){
  updateEditorHeight();
});

editor.on('update', function () {
  // You should probably put a check here so it doesn't
  // run for every update, but just on update, AND if the
  // element's height is different then before.
  updateEditorHeight();
});

De plus, dans le CSS, j'ai ajouté un overflow: hidden au wrapper d'epiceditor pour que les barres de défilement n'apparaissent pas lors de sa croissance.

DEMO : http://jsbin.com/eyidey/1/
CODE DEMO : http://jsbin.com/eyidey/1/edit

UPDATE

Depuis EpicEditor 0.2.2, la croissance automatique est intégrée. Il suffit d'activer la fonction autogrow option.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X