highlightDemo.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6. <title></title>
  7. <script type="text/javascript" charset="utf-8" src="../editor_config.js"></script>
  8. <!--加入高亮的js和css文件,如果你的编辑器和展示也是一个页面那么高亮的js可以不加载-->
  9. <script type="text/javascript" charset="utf-8" src="../third-party/SyntaxHighlighter/shCore.js"></script>
  10. <link rel="stylesheet" type="text/css" href="../third-party/SyntaxHighlighter/shCoreDefault.css"/>
  11. <!--开发版-->
  12. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
  13. <link rel="stylesheet" type="text/css" href="../themes/default/ueditor.css"/>
  14. </head>
  15. <body>
  16. <h1>代码高亮演示</h1>
  17. <h2>页面上已经有的代码</h2>
  18. <div style="width:200px">
  19. <pre class="brush:js;toolbar:false;">
  20. var editor_a = new baidu.editor.ui.Editor();
  21. editor_a.render( 'myEditor' );
  22. </pre>
  23. <pre class="brush:js;toolbar:false;">
  24. function adjustList(list,tag,style){
  25. var nextList = list.nextSibling;
  26. if(nextList && nextList.nodeType == 1 && nextList.tagName.toLowerCase() == tag && (domUtils.getStyle(nextList,'list-style-type')||(tag == 'ol'?'decimal' : 'disc')) == style){
  27. domUtils.moveChild(nextList,list);
  28. if(nextList.childNodes.length == 0){
  29. domUtils.remove(nextList);
  30. }
  31. }
  32. var preList = list.previousSibling;
  33. }
  34. </pre>
  35. </div>
  36. <!--style给定宽度可以影响编辑器的最终宽度-->
  37. <script type="text/plain" id="myEditor" style="width:500px">
  38. <pre class="brush:js;toolbar:false;">
  39. function adjustList(list,tag,style){
  40. var nextList = list.nextSibling;
  41. if(nextList && nextList.nodeType == 1 && nextList.tagName.toLowerCase() == tag && (domUtils.getStyle(nextList,'list-style-type')||(tag == 'ol'?'decimal' : 'disc')) == style){
  42. domUtils.moveChild(nextList,list);
  43. if(nextList.childNodes.length == 0){
  44. domUtils.remove(nextList);
  45. }
  46. }
  47. }
  48. </pre>
  49. </script>
  50. <script type="text/javascript">
  51. //为了在编辑器之外能展示高亮代码
  52. SyntaxHighlighter.highlight();
  53. //调整左右对齐
  54. for(var i=0,di;di=SyntaxHighlighter.highlightContainers[i++];){
  55. var tds = di.getElementsByTagName('td');
  56. for(var j=0,li,ri;li=tds[0].childNodes[j];j++){
  57. ri = tds[1].firstChild.childNodes[j];
  58. ri.style.height = li.style.height = ri.offsetHeight + 'px';
  59. }
  60. }
  61. var editor_a = new baidu.editor.ui.Editor();
  62. editor_a.render( 'myEditor' );
  63. </script>
  64. </body>
  65. </html>