completeDemo.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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="X-UA-Compatible" content="IE=8">
  6. <title>完整demo</title>
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  8. <script type="text/javascript" charset="utf-8" src="../editor_config.js"></script>
  9. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
  10. <link rel="stylesheet" type="text/css" href="../themes/default/ueditor.css"/>
  11. <style type="text/css">
  12. .clear{
  13. clear: both;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <script type="text/plain" id="editor" style="width:1000px;" >
  19. </script>
  20. <div class="clear"></div>
  21. <div id="btns">
  22. <input type="button" value="获得内容" onclick="getContent()">
  23. <input type="button" value="写入内容" onclick="setContent()">
  24. <input type="button" value="获得纯文本" onclick="getContentTxt()">
  25. <input type="button" value="获得带格式的纯文本" onclick="getPlainTxt()">
  26. <input type="button" value="判断是否有内容" onclick="hasContent()">
  27. <input type="button" value="使编辑器获得焦点" onclick="setFocus()">
  28. <input type="button" value="获得当前选中的文本" onclick="getText()" />
  29. <input type="button" value="删除编辑器" onclick="deleteEditor()" />
  30. <input id="enable" type="button" value="可以编辑" onclick="setEnabled()" />
  31. <input type="button" value="不可编辑" onclick="setDisabled()" />
  32. <input type="button" value="隐藏编辑器" onclick="ue.setHide()" />
  33. <input type="button" value="显示编辑器" onclick="ue.setShow()" />
  34. <!--<input type="button" value="插入html代码" onclick="ue.execCommand('inserthtml','sadfsadfsadf')" />-->
  35. </div>
  36. </body>
  37. <script type="text/javascript">
  38. // document.domain = "baidu.con";
  39. var ue = new UE.ui.Editor();
  40. ue.render('editor');
  41. ue.addListener("selectionchange",function(){
  42. var state = ue.queryCommandState("source");
  43. var btndiv = document.getElementById("btns");
  44. if(btndiv && state==-1){
  45. disableBtn("enable");
  46. }
  47. });
  48. function getContent(){
  49. var arr = [];
  50. arr.push("使用editor.getContent()方法可以获得编辑器的内容");
  51. arr.push("内容为:");
  52. arr.push(ue.getContent());
  53. alert(arr.join("\n"));
  54. }
  55. function getPlainTxt(){
  56. var arr = [];
  57. arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
  58. arr.push("内容为:");
  59. arr.push(ue.getPlainTxt());
  60. alert(arr.join('\n'))
  61. }
  62. function setContent(){
  63. var arr = [];
  64. arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
  65. ue.setContent('欢迎使用ueditor');
  66. alert(arr.join("\n"));
  67. }
  68. function setDisabled(){
  69. ue.setDisabled('fullscreen');
  70. disableBtn("enable");
  71. }
  72. function setEnabled(){
  73. ue.setEnabled();
  74. enableBtn();
  75. }
  76. function getText(){
  77. //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
  78. var range = ue.selection.getRange();
  79. range.select();
  80. var txt = ue.selection.getText();
  81. alert(txt)
  82. }
  83. function getContentTxt(){
  84. var arr = [];
  85. arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
  86. arr.push("编辑器的纯文本内容为:");
  87. arr.push(ue.getContentTxt());
  88. alert(arr.join("\n"));
  89. }
  90. function hasContent(){
  91. var arr = [];
  92. arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
  93. arr.push("判断结果为:");
  94. arr.push(ue.hasContents());
  95. alert(arr.join("\n"));
  96. }
  97. function setFocus(){
  98. ue.focus();
  99. }
  100. function deleteEditor(){
  101. disableBtn();
  102. ue.destroy();
  103. }
  104. function disableBtn(str){
  105. var div = document.getElementById('btns');
  106. var btns = domUtils.getElementsByTagName(div,"input");
  107. for(var i=0,btn;btn=btns[i++];){
  108. if(btn.id == str){
  109. domUtils.removeAttributes(btn,["disabled"]);
  110. }else{
  111. btn.setAttribute("disabled","true");
  112. }
  113. }
  114. }
  115. function enableBtn(){
  116. var div = document.getElementById('btns');
  117. var btns = domUtils.getElementsByTagName(div,"input");
  118. for(var i=0,btn;btn=btns[i++];){
  119. domUtils.removeAttributes(btn,["disabled"]);
  120. }
  121. }
  122. </script>
  123. </html>