uparse.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. //编辑器展示页面内容解析,加载资源工具
  2. //by zhanyi
  3. function uParse(selector,opt){
  4. //需要的工具方法
  5. var ie = !!window.ActiveXObject,
  6. cssRule = ie ? function(key,style,doc){
  7. var indexList,index;
  8. doc = doc || document;
  9. if(doc.indexList){
  10. indexList = doc.indexList;
  11. }else{
  12. indexList = doc.indexList = {};
  13. }
  14. var sheetStyle;
  15. if(!indexList[key]){
  16. if(style === undefined){
  17. return ''
  18. }
  19. sheetStyle = doc.createStyleSheet('',index = doc.styleSheets.length);
  20. indexList[key] = index;
  21. }else{
  22. sheetStyle = doc.styleSheets[indexList[key]];
  23. }
  24. if(style === undefined){
  25. return sheetStyle.cssText
  26. }
  27. sheetStyle.cssText = sheetStyle.cssText + '\n' + (style || '')
  28. } : function(key,style,doc){
  29. doc = doc || document;
  30. var head = doc.getElementsByTagName('head')[0],node;
  31. if(!(node = doc.getElementById(key))){
  32. if(style === undefined){
  33. return ''
  34. }
  35. node = doc.createElement('style');
  36. node.id = key;
  37. head.appendChild(node)
  38. }
  39. if(style === undefined){
  40. return node.innerHTML
  41. }
  42. if(style !== ''){
  43. node.innerHTML = node.innerHTML + '\n' + style;
  44. }else{
  45. head.removeChild(node)
  46. }
  47. },
  48. domReady = function (onready) {
  49. var doc = window.document;
  50. if (doc.readyState === "complete") {
  51. onready();
  52. }else{
  53. if (ie) {
  54. (function () {
  55. if (doc.isReady) return;
  56. try {
  57. doc.documentElement.doScroll("left");
  58. } catch (error) {
  59. setTimeout(arguments.callee, 0);
  60. return;
  61. }
  62. onready();
  63. })();
  64. window.attachEvent('onload', function(){
  65. onready()
  66. });
  67. } else {
  68. doc.addEventListener("DOMContentLoaded", function () {
  69. doc.removeEventListener("DOMContentLoaded", arguments.callee, false);
  70. onready();
  71. }, false);
  72. window.addEventListener('load', function(){onready()}, false);
  73. }
  74. }
  75. },
  76. _each = function(obj, iterator, context) {
  77. if (obj == null) return;
  78. if (obj.length === +obj.length) {
  79. for (var i = 0, l = obj.length; i < l; i++) {
  80. if(iterator.call(context, obj[i], i, obj) === false)
  81. return false;
  82. }
  83. } else {
  84. for (var key in obj) {
  85. if (obj.hasOwnProperty(key)) {
  86. if(iterator.call(context, obj[key], key, obj) === false)
  87. return false;
  88. }
  89. }
  90. }
  91. },
  92. inArray = function(arr,item){
  93. var index = -1;
  94. _each(arr,function(v,i){
  95. if(v === item){
  96. index = i;
  97. return false;
  98. }
  99. });
  100. return index;
  101. },
  102. pushItem = function(arr,item){
  103. if(inArray(arr,item)==-1){
  104. arr.push(item)
  105. }
  106. },
  107. loadFile = function () {
  108. var tmpList = [];
  109. function getItem(doc,obj){
  110. try{
  111. for(var i= 0,ci;ci=tmpList[i++];){
  112. if(ci.doc === doc && ci.url == (obj.src || obj.href)){
  113. return ci;
  114. }
  115. }
  116. }catch(e){
  117. return null;
  118. }
  119. }
  120. return function (doc, obj, fn) {
  121. var item = getItem(doc,obj);
  122. if (item) {
  123. if(item.ready){
  124. fn && fn();
  125. }else{
  126. item.funs.push(fn)
  127. }
  128. return;
  129. }
  130. tmpList.push({
  131. doc:doc,
  132. url:obj.src||obj.href,
  133. funs:[fn]
  134. });
  135. if (!doc.body) {
  136. var html = [];
  137. for(var p in obj){
  138. if(p == 'tag')continue;
  139. html.push(p + '="' + obj[p] + '"')
  140. }
  141. doc.write('<' + obj.tag + ' ' + html.join(' ') + ' ></'+obj.tag+'>');
  142. return;
  143. }
  144. if (obj.id && doc.getElementById(obj.id)) {
  145. return;
  146. }
  147. var element = doc.createElement(obj.tag);
  148. delete obj.tag;
  149. for (var p in obj) {
  150. element.setAttribute(p, obj[p]);
  151. }
  152. element.onload = element.onreadystatechange = function () {
  153. if (!this.readyState || /loaded|complete/.test(this.readyState)) {
  154. item = getItem(doc,obj);
  155. if (item.funs.length > 0) {
  156. item.ready = 1;
  157. for (var fi; fi = item.funs.pop();) {
  158. fi();
  159. }
  160. }
  161. element.onload = element.onreadystatechange = null;
  162. }
  163. };
  164. element.onerror = function(){
  165. throw Error('The load '+(obj.href||obj.src)+' fails,check the url')
  166. };
  167. doc.getElementsByTagName("head")[0].appendChild(element);
  168. }
  169. }();
  170. //默认的配置项目
  171. var defaultOption ={
  172. liiconpath : 'http://bs.baidu.com/listicon/',
  173. listDefaultPaddingLeft : '20',
  174. 'highlightJsUrl':'',
  175. 'highlightCssUrl':'',
  176. customRule:function(){}
  177. };
  178. if(opt){
  179. for(var p in opt){
  180. defaultOption[p] = opt[p]
  181. }
  182. }
  183. domReady(function(){
  184. //处理容器
  185. var contents;
  186. if(document.querySelectorAll){
  187. contents = document.querySelectorAll(selector)
  188. }else{
  189. if(/^#/.test(selector)){
  190. contents = [document.getElementById(selector.replace(/^#/,''))]
  191. }else if(/^\./.test(selector)){
  192. var contents = [];
  193. _each(document.getElementsByTagName('*'),function(node){
  194. if(node.className && new RegExp('\\b' + selector.replace(/^\./,'') + '\\b','i').test(node.className)){
  195. contents.push(node)
  196. }
  197. })
  198. }else{
  199. contents = document.getElementsByTagName(selector)
  200. }
  201. }
  202. _each(contents,function(content){
  203. if(content.tagName.toLowerCase() == 'textarea'){
  204. var tmpNode = document.createElement('div');
  205. if(/^#/.test(selector)){
  206. tmpNode.id = selector.replace(/^#/,'')
  207. }else if(/^\./.test(selector)){
  208. tmpNode.className = selector.replace(/^\./,'')
  209. }
  210. content.parentNode.insertBefore(tmpNode,content);
  211. tmpNode.innerHTML = content.value;
  212. content.parentNode.removeChild(content);
  213. content = tmpNode;
  214. }
  215. function checkList(nodes){
  216. var customCss = [],
  217. customStyle = {
  218. 'cn' : 'cn-1-',
  219. 'cn1' : 'cn-2-',
  220. 'cn2' : 'cn-3-',
  221. 'num' : 'num-1-',
  222. 'num1' : 'num-2-',
  223. 'num2' : 'num-3-',
  224. 'dash' : 'dash',
  225. 'dot' : 'dot'
  226. };
  227. _each(nodes,function(list){
  228. if(list.className && /custom_/i.test(list.className)){
  229. var listStyle = list.className.match(/custom_(\w+)/)[1];
  230. if(listStyle == 'dash' || listStyle == 'dot'){
  231. pushItem(customCss,selector +' li.list-' + customStyle[listStyle] + '{background-image:url(' + defaultOption.liiconpath +customStyle[listStyle]+'.gif)}');
  232. pushItem(customCss,selector +' ul.custom_'+listStyle+'{list-style:none;} '+ selector +' ul.custom_'+listStyle+' li{background-position:0 3px;background-repeat:no-repeat}');
  233. }else{
  234. var index = 1;
  235. _each(list.childNodes,function(li){
  236. if(li.tagName == 'LI'){
  237. pushItem(customCss,selector + ' li.list-' + customStyle[listStyle] + index + '{background-image:url(' + defaultOption.liiconpath + 'list-'+customStyle[listStyle] +index + '.gif)}');
  238. index++;
  239. }
  240. });
  241. pushItem(customCss,selector + ' ol.custom_'+listStyle+'{list-style:none;}'+selector+' ol.custom_'+listStyle+' li{background-position:0 3px;background-repeat:no-repeat}');
  242. }
  243. switch(listStyle){
  244. case 'cn':
  245. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:25px}');
  246. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  247. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:55px}');
  248. break;
  249. case 'cn1':
  250. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:30px}');
  251. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  252. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:55px}');
  253. break;
  254. case 'cn2':
  255. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:40px}');
  256. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:55px}');
  257. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-3{padding-left:68px}');
  258. break;
  259. case 'num':
  260. case 'num1':
  261. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:25px}');
  262. break;
  263. case 'num2':
  264. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-1{padding-left:35px}');
  265. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft-2{padding-left:40px}');
  266. break;
  267. case 'dash':
  268. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft{padding-left:35px}');
  269. break;
  270. case 'dot':
  271. pushItem(customCss,selector + ' li.list-'+listStyle+'-paddingleft{padding-left:20px}');
  272. }
  273. }
  274. });
  275. customCss.push(selector +' .list-paddingleft-1{padding-left:0}');
  276. customCss.push(selector +' .list-paddingleft-2{padding-left:'+defaultOption.listDefaultPaddingLeft+'px}');
  277. customCss.push(selector +' .list-paddingleft-3{padding-left:'+defaultOption.listDefaultPaddingLeft*2+'px}');
  278. //如果不给宽度会在自定应样式里出现滚动条
  279. cssRule('list', selector +' ol,'+selector +' ul{margin:0;pading:0;}li{clear:both;}'+customCss.join('\n'), document);
  280. }
  281. //解析内容
  282. var needParseTagName = {
  283. 'table' : function(){
  284. cssRule('table',
  285. selector +' table.noBorderTable td,'+selector+' table.noBorderTable th,'+selector+' table.noBorderTable caption{border:1px dashed #ddd !important}' +
  286. //插入的表格的默认样式
  287. selector +' table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
  288. selector +' td,'+selector+' th{ background:white; padding: 5px 10px;border: 1px solid #DDD;}' +
  289. selector +' caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
  290. selector +' th{border-top:2px solid #BBB;background:#F7F7F7;}' +
  291. selector +' td p{margin:0;padding:0;}',
  292. document);
  293. },
  294. 'ol' : checkList,
  295. 'ul' : checkList,
  296. 'pre': function(nodes){
  297. //避免重复加载高亮文件
  298. if(typeof XRegExp == "undefined"){
  299. loadFile(document,{
  300. id : "syntaxhighlighter_js",
  301. src : defaultOption.highlightJsUrl,
  302. tag : "script",
  303. type : "text/javascript",
  304. defer : "defer"
  305. },function(){
  306. _each(nodes,function(pi){
  307. if(/brush/i.test(pi.className)){
  308. SyntaxHighlighter.highlight(pi);
  309. var tables = document.getElementsByTagName('table');
  310. for(var t= 0,ti;ti=tables[t++];){
  311. if(/SyntaxHighlighter/i.test(ti.className)){
  312. var tds = ti.getElementsByTagName('td');
  313. for(var i=0,li,ri;li=tds[0].childNodes[i];i++){
  314. ri = tds[1].firstChild.childNodes[i];
  315. if(ri){
  316. ri.style.height = li.style.height = ri.offsetHeight + 'px';
  317. }
  318. }
  319. }
  320. }
  321. }
  322. });
  323. });
  324. }
  325. if(!document.getElementById("syntaxhighlighter_css")){
  326. loadFile(document,{
  327. id : "syntaxhighlighter_css",
  328. tag : "link",
  329. rel : "stylesheet",
  330. type : "text/css",
  331. href : defaultOption.highlightCssUrl
  332. });
  333. }
  334. }
  335. };
  336. //先插入默认的属性
  337. for(var tag in needParseTagName){
  338. var nodes = content.getElementsByTagName(tag);
  339. if(nodes.length){
  340. needParseTagName[tag](nodes)
  341. }
  342. }
  343. defaultOption.customRule(content);
  344. });
  345. })
  346. }