ver resultado no PDF desse link:
http://tivideotutoriais.blogspot.com.br/2018/01/eletron.html
Para demonstração dois arquivos. O Texto e o arquivo que controlará o posicionamento, criação de índices, paginas e formatação. Para adicionar imagens e índices, estude o fonte exemplo.
Editor.js
/*
Março de 2018
Autor: Luiz Augusto da Silva Prado
Site: www.codigorapido.com.br
*/
var altura_pagina=760;
var largur_coluna=460;
var cor_borda="#dddddd";
var pagina_bordas="border:8px;margin:8px;padding:8px;";
//======================================
// EXCLUIR QUEBRAS DE LINHA REPETIDOS
//======================================
function replaceAllBreak(str)
{
str = str.replace(new RegExp("\<\/tr\>\n", 'gi'), "\<\/tr\>");
str = str.replace(new RegExp("\n\<tr\>", 'gi'), "\<tr\>");
str = str.replace(new RegExp("\<\/td\>\n", 'gi'), "\<\/td\>");
str = str.replace(new RegExp("\n\<td\>", 'gi'), "\<td\>");
str = str.replace(new RegExp("\<\/table\>\n", 'gi'), "\<\/table\>");
str = str.replace(new RegExp("\n\<table", 'gi'), "\<table");
str = str.replace(new RegExp("\n\n", 'gi'), "\n");
//espaçamento dos parágrafos
str = str.replace(new RegExp("\n", 'gi'), "</br>        ");
return str;
}
//======================================
// TÓPICO DO ÍNDICE
//======================================
pontos_indice = function(str)
{
var resp=""
strr= str.replace(/\<span (.*?)\>/gi, '')
strr= strr.replace(/\<\/span\>/gi, '')
// Quantidade de caracteres maximos por linha
for( var i=0; i<53 - strr.length; i++)
{
resp+=".";
}
return resp;
}
//======================================
// ÍNDICE
//======================================
getIndex = function(str)
{
var Array_Parte = str.match( /\<div parte\>((\n|.)*?)#parte \<\/div\>/gi, '');
var indice = new Array();
var total_paginas=0;
var array_romanos = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]
for(var n=0; n<Array_Parte.length; n++)
{
var t=new Object();
t.parte="<br><br><span style='color:red;font-size:18px;'><b>Parte "+array_romanos[n]+" </b></span><br><br>";
t.topicos=[];
t.paginas=[];
var Array_Paginas = Array_Parte[n].match( /\<div page\>((\n|.)*?)#page \<\/div\>/gi, '');
for(var i=0; i<Array_Paginas.length; i++)
{
var Array_Topico = Array_Paginas[i].match( /\n\<b\>((\w|.)*?)\<\/b\>/gi, '');
if(Array_Topico!=null)
{
for(var j=0; j<Array_Topico.length; j++)
{
topico = Array_Topico[j].replace("<b>", "").replace("</b>", "")
t.topicos = t.topicos.concat( topico )
t.paginas = t.paginas.concat(total_paginas+i+1);
}
}
}
indice = indice.concat(t)
total_paginas+=Array_Paginas.length;
}
paginas="";
temp="";
for(var n=0; n<indice.length; n++)
{
temp += indice[n].parte
for(var j=0; j<indice[n].paginas.length; j++)
{
temp += indice[n].topicos[j] + pontos_indice(indice[n].topicos[j] + indice[n].paginas[j]) + indice[n].paginas[j]+"<br>"
if((j+1)%22==0 || j==indice[n].paginas.length-1)
{
paginas+="<div indice>"+temp+"</div>"
temp="";
total_paginas++
}
}
}
if(total_paginas%2==1)
{
str += "<div page>\n#page </div>";
}
str = str.replace(new RegExp(/\n\<div parte\>/, 'gi'), "");
str = str.replace(new RegExp(/#parte \<\/div\>/, 'gi'), "");
str = str.replace("#indice", paginas);
return str
}
//======================================
// PAGINAÇÃO
//======================================
getPagination = function(str)
{
var Array_Paginacao = str.match(/#page/g);
if(Array_Paginacao!=null)
for(var i=0; i<Array_Paginacao.length; i++)
{
str = str.replace(Array_Paginacao[i], "<div style='width:"+largur_coluna+"px;text-align:center;position:absolute;bottom:0px;'>"+(i+1)+"</div>");
}
return str;
}
//======================================
// ADICIONAR IMAGEMS
//======================================
getImages = function(str)
{
var Array_Imagens = str.match(/#imagem[D-E][0-9] [0-9][0-9][0-9]\|[0-9][0-9][0-9]/g);
//if(Array_Imagens!=null)
for(var i=0; i<Array_Imagens.length; i++)
{
var DE = Array_Imagens[i].match(/[D-E][0-9]/g);
var NN = Array_Imagens[i].match(/[0-9][0-9][0-9]/g);
if(DE[0].charAt(0)=='D')
str = str.replace(Array_Imagens[i] + " ", "<img style='float:right;width:"+NN[0]+"px;height:"+NN[1]+"px;margin:8px;padding:0px;border:"+DE[0].charAt(1)+"px solid #777777' src='imagens/");
if(DE[0].charAt(0)=='E')
str = str.replace(Array_Imagens[i] + " ", "<img style='float:left; width:"+NN[0]+"px;height:"+NN[1]+"px;margin:8px;padding:0px;border:"+DE[0].charAt(1)+"px solid #777777' src='imagens/");
str = str.replace(" #fim", "'>");
}
return str;
}
//======================================
// DIVISÃO DE PÁGINAS
//======================================
getDivPages = function(str)
{
var Array_DivisaoPaginas = str.match(/<div page/g);
//if(Array_DivisaoPaginas!=null)
for(var i=0; i<Array_DivisaoPaginas.length; i++)
{
str = str.replace(Array_DivisaoPaginas[i], "<div style='"+pagina_bordas+"position:relative;width:"+largur_coluna+"px;height:"+altura_pagina+"px;border:1px solid "+cor_borda+";' ");
}
return str;
}
//======================================
// GERRAR ÍNDICE
//======================================
generateIndex = function(str)
{
var Array_Gerar_Indice = str.match(/<div indice/gi, '');
//if(Array_Gerar_Indice!=null)
for(var i=0; i<Array_Gerar_Indice.length; i++)
{
str = str.replace(Array_Gerar_Indice[i], "<div style='"+pagina_bordas+"font-size:12px; font-family:Courier New,Courier,monospace;font-weight: bolder;position:relative;width:"+largur_coluna+"px;height:"+altura_pagina+"px;border:0px solid #cccccc;' ");
}
return str;
}
//======================================
// START
//======================================
makePages = function()
{
var mapa = document.getElementById("mapa");
var str = mapa.value;
str = str.replace(new RegExp(/\n\n\<div/, 'gi'), "<div");
str = str.replace(new RegExp(/div\>\n\n/, 'gi'), "div>");
str = str.replace(new RegExp(/\n\<div/, 'gi'), "<div");
str = str.replace(new RegExp(/div\>\n/, 'gi'), "div>");
str = getImages(str)
str = getIndex(str)
str = getPagination(str)
str = getDivPages(str)
str = generateIndex(str)
str = replaceAllBreak(str);
document.getElementById("texto").innerHTML = str ;
mapa.style.visibility = "hidden";
mapa.style.height = "0%";
document.getElementById("myCheck").checked = true;
}
//======================================
// TESTE
//======================================
check = function()
{
var mapa = document.getElementById("mapa");
if(document.getElementById("myCheck").checked)
{
mapa.style.visibility = "hidden";
mapa.style.height = "0%";
}
else
{
mapa.style.visibility = "visible";
mapa.style.height = "100%";
}
}
//Ver como ficou: <input type="checkbox" id="myCheck" onclick="check()" > <button onclick="makePages()">Atualizar</button> <br>
Para inserir tópicos no índice, basta iniciar nova linha entre as tags <b> e </b>
Para inserir imagens basta inserir algo equivalente a:
#imagemD2 210|210 imagem.png #fim
D significa que será posicionado a direita do texto2 significa a espessura da borda
210|210 são as medidas w e h da imagem
Exemplo do uso do código. Crie um arquivo como mostrado abaixo:
<html> <script type="text/javascript" src="Editor.js"></script> <textarea id="mapa" rows="15" cols="120" > <div parte> <div page> <span style='color:red;font-size:18px;'><b>Parte I </b></span> Algo aqui <b>vai para o índice</b> #page </div> #parte </div> <div parte> <div page> <span style='color:red;font-size:18px;'><b>Parte II </b></span> Algo aqui <b>Indice</b> #imagemD2 210|210 imagem.png #fim #page </div> <div page> Algo aqui <b>Indice</b> #page </div> #parte </div> </textarea><br> <div id="texto" style="font-size:14px; text-align: justify; column-count: 2; -webkit-column-gap:0px; -moz-column-gap:0px; column-gap:0px;">Defeito</div> <script> makePages() </script> </html>
Nenhum comentário:
Postar um comentário