défilement parallèle textarea et page Web avec jquery

Question

C'est à la fois conceptuel et comment à la question:

en format wiki, ou des scénarios non éditeur WYSIWYG, vous généralement avez une zone de texte pour la saisie de contenu et un volet de visualisation auxiliaire à afficher les résultats, tout comme StackOverflow. Cela fonctionne assez bien, sauf avec de plus grandes quantités de texte, comme des pages entières, etc. wikis

J'ai un concept que j'aimerais critiques/conseils sur: Envision une mise en page à deux volets, avec le contenu d'aperçu sur le côté gauche, occupant ~ 2/3 de la page, et la zone de texte sur le côté droit, occupant ~ 1/3 de la page. La zone de texte flotterait pour rester visible, même si l'utilisateur faisait défiler la fenêtre du navigateur. En outre, si l'utilisateur fait défiler le contenu de la zone de texte, en supposant qu'il a dépassé la taille de la zone de texte, la page défile afin que le contenu présent dans la zone de texte soit parallèle au contenu affiché dans la fenêtre du navigateur. J'imagine un scénario wiki, où aller et venir entre le balisage et l'aperçu est frustrant. Je suis curieux de savoir ce que les autres pensent; Y at-il quelque chose là-bas comme ça? Des suggestions sur la façon d'attaquer cette fonctionnalité (idéalement en utilisant jquery)?

Merci

Answer 1

Cela ressemble à une bonne idée! Vous pourriez avoir un #preview et un #input, l'aperçu mis à jour avec un événement simple:

document.getElementById('preview').addEventListener('change', update, false); 

Answer 2

Tout langage de balisage ou langage de balisage simplifié comme la notation wiki diffère de la sortie en raison de la mise en forme, de sorte que le défilement à la fois textarea et sortie formatée par le même nombre de pixels ou avec certaines proportions sera toujours de synchronisation en vrac.

Donnez les utilisateurs de deux barres de défilement et de renoncer ...

ou

J'ai une idée pour vous. Il est basé sur l'idée de ne pas faire défiler l'aperçu du tout, mais de le générer uniquement à partir d'une partie actuellement éditée. Trouver ce qui est visible dans la zone de texte était ma première idée, mais ce ne sera pas plus fiable que de faire défiler les deux vues ensemble.

Ce que vous pouvez faire est d'obtenir la position du curseur dans la zone de texte (qui peut être fait. A quelques problèmes de navigateur) puis rendez-vous n caractères avant et après la position actuelle arrondie à des lignes complètes et générer aperçu de ce . Vous pouvez vérifier le changement de position du curseur toutes les 1 ou 2 secondes et prévisualiser si cela a changé.

n dépend de la taille de la zone de texte.

pros:

aucun problème de synchronisation, doivent générer seulement une partie d'un texte plus grand

contre:

mises à jour uniquement si l'utilisateur déplace le curseur de texte.

Vous pourriez en faire une fonctionnalité ... La zone de texte serait une partie dominante de la page et la div de prévisualisation flotterait par.

Si vous avez besoin de plus de détails ou d'aide, il suffit de demander dans les commentaires.