|
| 1 | +<%-- |
| 2 | + User: wistbean |
| 3 | + Date: 2018/12/4 |
| 4 | + Time: 1:09 |
| 5 | +--%> |
| 6 | +<%@ page contentType="text/html;charset=UTF-8" language="java" %> |
| 7 | +<html> |
| 8 | +<head> |
| 9 | + <title>完整demo</title> |
| 10 | + <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> |
| 11 | + <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> |
| 12 | + <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script> |
| 13 | + <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--> |
| 14 | + <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--> |
| 15 | + <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> |
| 16 | + |
| 17 | + <style type="text/css"> |
| 18 | + div{ |
| 19 | + width:100%; |
| 20 | + } |
| 21 | + </style> |
| 22 | +</head> |
| 23 | +<body> |
| 24 | +<div> |
| 25 | + <h1>完整demo</h1> |
| 26 | + <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> |
| 27 | +</div> |
| 28 | +<div id="btns"> |
| 29 | + <div> |
| 30 | + <button onclick="getAllHtml()">获得整个html的内容</button> |
| 31 | + <button onclick="getContent()">获得内容</button> |
| 32 | + <button onclick="setContent()">写入内容</button> |
| 33 | + <button onclick="setContent(true)">追加内容</button> |
| 34 | + <button onclick="getContentTxt()">获得纯文本</button> |
| 35 | + <button onclick="getPlainTxt()">获得带格式的纯文本</button> |
| 36 | + <button onclick="hasContent()">判断是否有内容</button> |
| 37 | + <button onclick="setFocus()">使编辑器获得焦点</button> |
| 38 | + <button onmousedown="isFocus(event)">编辑器是否获得焦点</button> |
| 39 | + <button onmousedown="setblur(event)" >编辑器失去焦点</button> |
| 40 | + |
| 41 | + </div> |
| 42 | + <div> |
| 43 | + <button onclick="getText()">获得当前选中的文本</button> |
| 44 | + <button onclick="insertHtml()">插入给定的内容</button> |
| 45 | + <button id="enable" onclick="setEnabled()">可以编辑</button> |
| 46 | + <button onclick="setDisabled()">不可编辑</button> |
| 47 | + <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button> |
| 48 | + <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button> |
| 49 | + <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button> |
| 50 | + </div> |
| 51 | + |
| 52 | + <div> |
| 53 | + <button onclick="getLocalData()" >获取草稿箱内容</button> |
| 54 | + <button onclick="clearLocalData()" >清空草稿箱</button> |
| 55 | + </div> |
| 56 | + |
| 57 | +</div> |
| 58 | +<div> |
| 59 | + <button onclick="createEditor()"> |
| 60 | + 创建编辑器</button> |
| 61 | + <button onclick="deleteEditor()"> |
| 62 | + 删除编辑器</button> |
| 63 | +</div> |
| 64 | + |
| 65 | +<script type="text/javascript"> |
| 66 | +
|
| 67 | + //实例化编辑器 |
| 68 | + //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 |
| 69 | + var ue = UE.getEditor('editor'); |
| 70 | +
|
| 71 | +
|
| 72 | + function isFocus(e){ |
| 73 | + alert(UE.getEditor('editor').isFocus()); |
| 74 | + UE.dom.domUtils.preventDefault(e) |
| 75 | + } |
| 76 | + function setblur(e){ |
| 77 | + UE.getEditor('editor').blur(); |
| 78 | + UE.dom.domUtils.preventDefault(e) |
| 79 | + } |
| 80 | + function insertHtml() { |
| 81 | + var value = prompt('插入html代码', ''); |
| 82 | + UE.getEditor('editor').execCommand('insertHtml', value) |
| 83 | + } |
| 84 | + function createEditor() { |
| 85 | + enableBtn(); |
| 86 | + UE.getEditor('editor'); |
| 87 | + } |
| 88 | + function getAllHtml() { |
| 89 | + alert(UE.getEditor('editor').getAllHtml()) |
| 90 | + } |
| 91 | + function getContent() { |
| 92 | + var arr = []; |
| 93 | + arr.push("使用editor.getContent()方法可以获得编辑器的内容"); |
| 94 | + arr.push("内容为："); |
| 95 | + arr.push(UE.getEditor('editor').getContent()); |
| 96 | + alert(arr.join("\n")); |
| 97 | + } |
| 98 | + function getPlainTxt() { |
| 99 | + var arr = []; |
| 100 | + arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容"); |
| 101 | + arr.push("内容为："); |
| 102 | + arr.push(UE.getEditor('editor').getPlainTxt()); |
| 103 | + alert(arr.join('\n')) |
| 104 | + } |
| 105 | + function setContent(isAppendTo) { |
| 106 | + var arr = []; |
| 107 | + arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容"); |
| 108 | + UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo); |
| 109 | + alert(arr.join("\n")); |
| 110 | + } |
| 111 | + function setDisabled() { |
| 112 | + UE.getEditor('editor').setDisabled('fullscreen'); |
| 113 | + disableBtn("enable"); |
| 114 | + } |
| 115 | +
|
| 116 | + function setEnabled() { |
| 117 | + UE.getEditor('editor').setEnabled(); |
| 118 | + enableBtn(); |
| 119 | + } |
| 120 | +
|
| 121 | + function getText() { |
| 122 | + //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容 |
| 123 | + var range = UE.getEditor('editor').selection.getRange(); |
| 124 | + range.select(); |
| 125 | + var txt = UE.getEditor('editor').selection.getText(); |
| 126 | + alert(txt) |
| 127 | + } |
| 128 | +
|
| 129 | + function getContentTxt() { |
| 130 | + var arr = []; |
| 131 | + arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容"); |
| 132 | + arr.push("编辑器的纯文本内容为："); |
| 133 | + arr.push(UE.getEditor('editor').getContentTxt()); |
| 134 | + alert(arr.join("\n")); |
| 135 | + } |
| 136 | + function hasContent() { |
| 137 | + var arr = []; |
| 138 | + arr.push("使用editor.hasContents()方法判断编辑器里是否有内容"); |
| 139 | + arr.push("判断结果为："); |
| 140 | + arr.push(UE.getEditor('editor').hasContents()); |
| 141 | + alert(arr.join("\n")); |
| 142 | + } |
| 143 | + function setFocus() { |
| 144 | + UE.getEditor('editor').focus(); |
| 145 | + } |
| 146 | + function deleteEditor() { |
| 147 | + disableBtn(); |
| 148 | + UE.getEditor('editor').destroy(); |
| 149 | + } |
| 150 | + function disableBtn(str) { |
| 151 | + var div = document.getElementById('btns'); |
| 152 | + var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); |
| 153 | + for (var i = 0, btn; btn = btns[i++];) { |
| 154 | + if (btn.id == str) { |
| 155 | + UE.dom.domUtils.removeAttributes(btn, ["disabled"]); |
| 156 | + } else { |
| 157 | + btn.setAttribute("disabled", "true"); |
| 158 | + } |
| 159 | + } |
| 160 | + } |
| 161 | + function enableBtn() { |
| 162 | + var div = document.getElementById('btns'); |
| 163 | + var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); |
| 164 | + for (var i = 0, btn; btn = btns[i++];) { |
| 165 | + UE.dom.domUtils.removeAttributes(btn, ["disabled"]); |
| 166 | + } |
| 167 | + } |
| 168 | +
|
| 169 | + function getLocalData () { |
| 170 | + alert(UE.getEditor('editor').execCommand( "getlocaldata" )); |
| 171 | + } |
| 172 | +
|
| 173 | + function clearLocalData () { |
| 174 | + UE.getEditor('editor').execCommand( "clearlocaldata" ); |
| 175 | + alert("已清空草稿箱") |
| 176 | + } |
| 177 | +</script> |
| 178 | +</body> |
| 179 | +</html> |
0 commit comments