preview.js
4.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('preview', function(K) {
var self = this, name = 'preview', undefined;
self.clickToolbar(name, function() {
var lang = self.lang(name + '.'),
width = document.documentElement.clientWidth * 0.9,
height = document.documentElement.clientHeight - 160,
html = '<div style="padding:10px 20px;">' +
'<iframe class="ke-textarea" frameborder="0" style="width:'+(width-42)+'px;height:'+height+'px;"></iframe>' +
'</div>',
dialog = self.createDialog({
name : name,
width : width,
title : self.lang(name),
body : html
}),
iframe = K('iframe', dialog.div),
doc = K.iframeDoc(iframe);
doc.open();
var cssPath = self.options.cssPath;
var jsPath = self.options.jsPath;
var arr = [
'<html lang="en">',
'<head><meta charset="utf-8" /><title></title>',
//'<link href="http://localhost/editor/nkeditor/plugins/code/prettify.css" rel="stylesheet">',
'<style>',
'html {margin:0;padding:0;}',
'body {margin:0;padding:5px;}',
'body, td {font:12px/1.5 "sans serif",tahoma,verdana,helvetica;}',
'body, p, div {word-wrap: break-word;}',
'p {margin:5px 0;}',
'table {border-collapse:collapse;}',
'img {border:0;}',
'noscript {display:none;}',
'table.ke-zeroborder td {border:1px dotted #AAA;}',
'img.ke-flash {',
' border:1px solid #AAA;',
' background-image:url(' + self.options.themesPath + 'common/flash.svg);',
' *background-image:url(' + self.options.themesPath + 'common/flash.png);',
' background-size:64px 64px;',
' background-position:center center;',
' background-repeat:no-repeat;',
' width:100px;',
' height:100px;',
'}',
'img.ke-rm {',
' border:1px solid #AAA;',
' background-image:url(' + self.options.themesPath + 'common/rm.gif);',
' background-position:center center;',
' background-repeat:no-repeat;',
' width:100px;',
' height:100px;',
'}',
'img.ke-media {',
' border:1px solid #AAA;',
' background-image:url(' + self.options.themesPath + 'common/play.svg);',
' *background-image:url(' + self.options.themesPath + 'common/play.png);',
' background-position:center center;',
' background-size:64px 64px;',
' background-repeat:no-repeat;',
' width:100px;',
' height:100px;',
'}',
'img.ke-anchor {',
' border:1px dashed #666;',
' width:16px;',
' height:16px;',
'}',
'.ke-script, .ke-noscript, .ke-display-none {',
' display:none;',
' font-size:0;',
' width:0;',
' height:0;',
'}',
'.ke-pagebreak {',
' border:1px dotted #AAA;',
' font-size:0;',
' height:2px;',
'}'
];
if (self.options.showHelpGrid) {
arr.push('p,ul,ol,li,div{border: 1px dashed #c1c1c1;}');
arr.push('li{margin:5px 0px}');
arr.push('div,ul,ol{margin-bottom:10px}');
}
arr.push('</style>');
// 加载 css
if (!K.isArray(cssPath)) {
cssPath = [cssPath];
}
if (K.inArray(self.options.pluginsPath+'code/prism.css', cssPath) < 0) {
cssPath.push(self.options.pluginsPath+'code/prism.css');
}
K.each(cssPath, function(i, path) {
if (path) {
arr.push('<link href="' + path + '" rel="stylesheet" />');
}
});
if (self.options.cssData) {
arr.push('<style>' + self.options.cssData + '</style>');
}
arr.push('</head><body ' + (self.options.bodyClass ? 'class="' + self.options.bodyClass + '"' : '') + '>');
// 获取编辑器内容
arr.push(self.fullHtml());
// 加载脚本
if (!K.isArray(jsPath)) {
jsPath = [jsPath];
}
// 加载代码高亮的脚本
if (K.inArray(self.options.pluginsPath+'code/prism.js', jsPath) < 0) {
jsPath.push(self.options.pluginsPath+'code/prism.js');
}
K.each(jsPath, function(i, path) {
if (path) {
arr.push('<script type="text/javascript" src="' + path + '"></script>');
}
});
arr.push('</body></html>');
doc.write(arr.join('\n'));
doc.close();
K(doc.body).css('background-color', '#FFF');
iframe[0].contentWindow.focus();
});
});