html 预览页面,在HTML页面中预览HTML代码

这是我为编写报告而编写的JavaScript模块。用户可以在textarea中输入HTML或Markdown，然后查看完成的结果，并在它们之间切换。

function Report (id) {

this.div = gel(id);

this.div.style.height = '100%';

this.trip;

}

//initializes the Report object and renders the HTML of the report to this.div

Report.prototype.init = function(trip) {

this.report = {'author':trip.owner,

'time_created':trip.time_created,

'title':trip.title,

'text':trip.summary,

'url':trip.url,

'category':trip.category,

'id':trip.id}

this.div.appendChild(this.renderHTML());

}

//show the edit form when the user clicks the edit link

Report.prototype.editForm = function() {

var r = this.report;

var form = dec('form');

form.action = '/trips/submit_link';

form.method = 'POST';

var t = dec('table');

t.style.width ='95%';

t.style.paddingBottom ='10px';

var tr = dec('tr');

t.appendChild(tr);

var td = dec('td');

td.style.width = '15%';

var strong = dec('strong');

strong.appendChild(dct('Title'));

td.appendChild(strong);

tr.appendChild(td);

td = dec('td');

td.style.width = '100%';

var input = dec('input');

input.type = 'text';

input.style.width = '100%';

input.className = "required"

input.name = 'reportTitle';

input.value = r.title;

td.appendChild(input);

tr.appendChild(td);

tr = dec('tr');

t.appendChild(tr);

td = dec('td');

var input = dec('input');

var strong = dec('strong');

strong.appendChild(dct('URL '));

td.appendChild(strong);

tr.appendChild(td);

td = dec('td');

input.type = 'text';

input.name = 'reportURL';

//input.className = "validate-url"

input.value = r.url;

input.style.width = '100%';

td.appendChild(input);

tr.appendChild(td);

form.appendChild(t);

var strong = dec('strong');

strong.appendChild(dct('Summary or Report '));

form.appendChild(strong);

var input = dec('textarea');

input.style.width = '96%';

input.style.height = '350px';

input.name = 'reportBody';

var converter = new Showdown.converter();

input.innerHTML = converter.makeHtml(r.text);

input.style.marginTop = "5px";

input.style.marginBottom = "5px";

form.appendChild(input);

var strong = dec('strong');

strong.appendChild(dct('Category'));

strong.style.marginRight = '10px';

form.appendChild(strong);

var input = dec('input');

input.type = 'text';

input.name = 'category';

input.style.width = '75%';

input.value = r.category;

form.appendChild(input);

form.appendChild(dec('br'));

form.appendChild(dec('br'));

input = dec('input');

input.type = 'submit';

input.value = 'Save';

input.style.cssFloat = 'left';

input.style.styleFloat = 'left';

input.style.fontWeight = 'bold';

form.appendChild(input);

input = dec('input');

input.type = 'button';

input.value = 'Cancel';

input.style.color = '#cc5500';

input.style.fontWeight = 'bold';

input.style.cssFloat = 'right';

input.style.styleFloat = 'right';

var self = this;

input.onclick = function() {

rac(self.div);

self.div.appendChild(self.renderHTML());

}

form.appendChild(input);

input = dec('input');

input.type = 'hidden';

input.name = 'tripID';

input.value = tripID;

form.appendChild(input);

return form;

}

//renders the HTML of the report to this.div

Report.prototype.renderHTML = function() {

var report = this.report

var rDiv = dec('div');

rDiv.style.height = '100%';

var h1 = dec ('h1')

if (report.url) {

var a = dec('a')

a.href = report.url;

a.target = '_blank';

a.appendChild(dct(report.title));

h1.appendChild(a);

var img = dec('img');

img.src = '/site_media/images/external_link.gif';

img.style.marginLeft = '5px';

h1.appendChild(img);

} else {

h1.appendChild(dct(report.title));

}

if (report.author == user) {

var a = dec('a');

var self = this;

a.onclick = function() {

rac(self.div);

self.div.appendChild(self.editForm());

attachToForms();

}

a.className = 'jLink';

a.appendChild(dct('(edit)'));

h1.appendChild(dct(' '));

h1.appendChild(a);

}

rDiv.appendChild(h1);

rDiv.appendChild(dct('Posted on '));

rDiv.appendChild(dct(report.time_created));

rDiv.appendChild(dct(' by '));

var a = dec('a');

a.href = '/user/' + report.author;

a.appendChild(dct(report.author));

rDiv.appendChild(a);

if (report.url) {

var div = dec('div');

div.style.color = 'green';

div.style.fontSize = '.8em';

div.appendChild(dct(report.url));

rDiv.appendChild(div);

}

rDiv.appendChild(dec('hr'));

var div = dec('div');

div.style.height = '75%';

div.style.overflowY = 'auto';

if (report.text) {

var converter = new Showdown.converter();

div.innerHTML = converter.makeHtml(report.text);

}

rDiv.appendChild(div)

rac(this.div)

this.div.appendChild(rDiv)

return rDiv;

}