4

Is it possible to implement paging similar to MS Word in a rich text editor using JavaScript.

I need to implement an editor using JavaScript that contains text in pages. If i type text that exceeds the ficed limit of a page then automatically a new page is created and text overflows to the new page with formatting intact. Also if I copy large text from another source then it should calculate the number of pages depending on the text length and divide it into pages with all the formatting of the original text.

I need to break the text into lines based on pixel size using only JavaScript, HTML and CSS.

If i delete contents from inside a page then contents from the next page should be populated in the current page and if all the contents from a page is deleted then the page should be deleted. Almost every paging feature in MS word should be implemented in this one.

rahul
  • 184,426
  • 49
  • 232
  • 263
  • It sounds like you want to use a chain saw to pump out the basement. – dkretz Apr 15 '09 at 06:17
  • @phoenix I think what he means is, is a web app the best place for this? I think it can be done, but it is a difficult task. – alex Apr 15 '09 at 06:38
  • Ya I know, but I need to find out how difficult it is. As of my knowledge I think its a huge task. – rahul Apr 15 '09 at 06:52
  • it surely is a huge task . You might need to understand a lot of basic things . Have you found any thing yet on this ? Also you want something like a inbuilt Google Doc right ? – Nishant Dec 27 '13 at 17:01

2 Answers2

2

Please try this...

Javascript code pagination.js file

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;
    }
}

HTML file

<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>
nderjung
  • 1,607
  • 4
  • 17
  • 38
ggg
  • 29
  • 2
1

Sure it's possible. One implementation might be to count lines of text while considering line-height/font-size.

Bjorn
  • 69,215
  • 39
  • 136
  • 164