demo.html 5.0 KB

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