J'ai travaillé à la création d'un éditeur de texte spécialisé fonctionnant dans le navigateur. J'ai une question qui m'a mis dans une stupeur. Comment détecter et diviser du texte long en pages distinctes, comme dans les documents Google? Je sais que google docs ne fonctionne pas par contenteditable, mais il doit y avoir une solution ...Comment diviser le texte en pages séparées (comme Google docs) dans contenteditable?
Edit1: Nous devons envisager quelques scénarios:
- On charge un document au moyen de objet JSON, puis en rendant nos pages.
- Nous tapons le texte et avons atteint la fin de la page.
- Nous supprimons le texte.
- Nous insérons ou supprimons un texte.
https://googleblog.blogspot.ru/2011/04/pagination-comes-to-google-docs.html
page.html
<div class="box-base">
<div id="page-1" class="page">
<div id="editable-1" class="document" contenteditable="true"></div>
</div>
<div id="page-2" class="page">
<div id="editable-2" class="document" contenteditable="true"></div>
</div>
</div>
styles.css
.box-base {
margin-left: 50px;
flex: 1 0 430px;
border-style: solid;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 900px;
overflow: auto;
}
.page {
width: @page-width;
height: @page-width * 1.414;
/*overflow-y: auto;*/
background: white;
margin: 25px 0 25px 0;
}
.document {
/*max-height: 1000px;*/
overflow: hidden;
}
Peut-être que cela pourrait aider: http://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows – huachengzan
@huachengzan Merci! Je pense que cela peut aider, mais maintenant j'essaie d'utiliser l'élément caché pour tester le débordement comme ceci http://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection –
Google docs n'utilise pas contented. Au lieu de cela, il capture chaque touche et met à jour le DOM manuellement. Tout le positionnement est fait par son propre code, en positionnant les mots dans des intervalles absolument, plutôt que de le laisser passer en HTML. – rjmunro