preview.js 4.2 KB

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