Éditeur de texte enrichi [WYSIWYG] avec pagination utilisant javascript

Est-il possible d'implémenter un paging similaire à MS Word dans un éditeur de texte enrichi utilisant JavaScript?Éditeur de texte enrichi [WYSIWYG] avec pagination utilisant javascript

J'ai besoin de mettre en œuvre un éditeur utilisant JavaScript qui contient du texte dans les pages. Si je tape du texte qui dépasse la limite de prix d'une page, une nouvelle page est créée automatiquement et le texte déborde sur la nouvelle page avec le formatage intact. Aussi, si je copie du texte volumineux à partir d'une autre source, il devrait calculer le nombre de pages en fonction de la longueur du texte et le diviser en pages avec tout le formatage du texte original.

J'ai besoin de diviser le texte en lignes basées sur la taille de pixel en utilisant seulement JavaScript, HTML et CSS.

Si je supprime le contenu d'une page, le contenu de la page suivante doit être rempli dans la page en cours et si tout le contenu d'une page est supprimé, la page doit être supprimée. Presque toutes les fonctionnalités de paging dans MS Word devraient être implémentées dans celui-ci.

Source

2009-04-15 rahul

On dirait que vous voulez utiliser une scie à chaîne pour pomper le sous-sol . – dkretz

@ Phoenix Je pense que ce qu'il veut dire, c'est qu'une application web est le meilleur endroit pour cela? Je pense que cela peut être fait, mais c'est une tâche difficile. – alex

Ya je sais, mais j'ai besoin de savoir à quel point c'est difficile. À ma connaissance, je pense que c'est une tâche énorme. – rahul

Bien sûr que c'est possible. Une implémentation pourrait consister à compter les lignes de texte tout en prenant en compte line-height/font-size.

Source

2009-04-15 06:08:38

mais j'ai besoin de l'implémenter en fonction de la taille des pixels et non de la taille de la police. – rahul

et aussi j'ai besoin de l'appliquer en utilisant javascript, HTML et CSS – rahul

vous pouvez obtenir la taille de pixel sur les polices en utilisant JS – alex

S'il vous plaît essayer ...

fichier pagination.js code Javascript

function Pager(tableName, itemsPerPage) { 
    this.tableName = tableName; 
    this.itemsPerPage = itemsPerPage; 
    this.currentPage = 1; 
    this.pages = 0; 
    this.inited = false; 
    this.showRecords = function(from, to) { 
     var rows = document.getElementById(tableName).rows; 
     // i starts from 1 to skip table header row 
     for (var i = 1; i < rows.length; i++) { 
      if (i < from || i > to) 
      rows[i].style.display = 'none'; 
      else 
      rows[i].style.display = ''; 
     } 
    } 

    this.showPage = function(pageNumber) { 
     if (! this.inited) { 
      alert("not inited"); 
      return; 
     } 
     var oldPageAnchor = document.getElementById('pg'+this.currentPage); 
     oldPageAnchor.className = 'pg-normal'; 

     this.currentPage = pageNumber; 
     var newPageAnchor = document.getElementById('pg'+this.currentPage); 
     newPageAnchor.className = 'pg-selected'; 

     var from = (pageNumber - 1) * itemsPerPage + 1; 
     var to = from + itemsPerPage - 1; 
     this.showRecords(from, to); 
    } 

    this.prev = function() { 
     if (this.currentPage > 1) 
      this.showPage(this.currentPage - 1); 
    } 

    this.next = function() { 
     if (this.currentPage < this.pages) { 
      this.showPage(this.currentPage + 1); 
     } 
    } 

    this.init = function() { 
     var rows = document.getElementById(tableName).rows; 
     var records = (rows.length - 1); 
     this.pages = Math.ceil(records/itemsPerPage); 
     this.inited = true; 
    } 

    this.showPageNav = function(pagerName, positionId) { 
     if (! this.inited) { 
      alert("not inited"); 
      return; 
     } 
     var element = document.getElementById(positionId); 

     var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | '; 
     for (var page = 1; page <= this.pages; page++) 
     pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | '; 
     pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; 

     element.innerHTML = pagerHtml; 
    } 
}

fichier HTML

<html version="-//W3C//DTD HTML 4.01 Transitional//EN"> 

<head> 
<style type="text/css"> 
.pg-normal { 
color: black; 
font-weight: normal; 
text-decoration: none; 
cursor: pointer; 
} 
.pg-selected { 
color: black; 
font-weight: bold; 
text-decoration: underline; 
cursor: pointer; 
} 
</style> 

<script type="text/javascript" src="pagination.js"></script> 
</head> 

<body> 
<form action="" method="get" enctype="application/x-www-form-urlencoded"> 
<table id="results"> 
<tr> 
<th>#</th> 
<th>field</th> 
</tr> 
<tr> 
<td>1</td> 
<td>rajeev</td> 
</tr> 
<tr> 
<td>2</td> 
<td>ramesh</td> 
</tr> 
<tr> 
<td>3</td> 
<td>Rahul</td> 
</tr> 
<tr> 
<td>4</td> 
<td>Bala</td> 
</tr> 
<tr> 
<td>5</td> 
<td>Teamjhon</td> 
</tr> 
<tr> 
<td>6</td> 
<td>Robin</td> 
</tr> 
<tr> 
<td>7</td> 
<td>Sambha</td> 
</tr> 
<tr> 
<td>8</td> 
<td>Arjun</td> 
</tr> 
<tr> 
<td>9</td> 
<td>Satyan</td> 
</tr> 
<tr> 
<td>10</td> 
<td>Singapore</td> 
</tr> 
</table> 
<div id="pageNavPosition"></div> 
<div><input type="submit" onclick="alert('Hey this is just a sample!'); return false;" /> <input type="reset" /></div> 
</form> 

<script type="text/javascript"><!-- 
var pager = new Pager('results' 3); 
pager.init(); 
pager.showPageNav('pager' 'pageNavPosition'); 
pager.showPage(1); 
//--></script> 

</body> 
</html>

Source

2011-05-23 05:24:34 ggg

Cela ne répond pas du tout à la question. – escproxy

Éditeur de texte enrichi [WYSIWYG] avec pagination utilisant javascript

Répondre

Questions connexes