百度富文本編輯器ueditor使用啓示
1、總結
一句話總結：使用工具，多去看官方demo，很是詳細。
2、百度富文本編輯器ueditor使用啓示
官方完整demo
官方完整demo對應的源代碼
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 <title>完整demo</title> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 7 <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.config.js"></script> 8 <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.js"> </script> 9 <script type="text/javascript" charset="utf-8" src="../../ueditor/lang/zh-cn/zh-cn.js"></script> 10 11 <style type="text/css"> 12 div{ 13 width:100%; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 <h1>完整demo</h1> 20 <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> 21 </div> 22 <div id="btns"> 23 <div> 24 <button onclick="getAllHtml()">得到整個html的內容</button> 25 <button onclick="getContent()">得到內容</button> 26 <button onclick="setContent()">寫入內容</button> 27 <button onclick="setContent(true)">追加內容</button> 28 <button onclick="getContentTxt()">得到純文本</button> 29 <button onclick="getPlainTxt()">得到帶格式的純文本</button> 30 <button onclick="hasContent()">判斷是否有內容</button> 31 <button onclick="setFocus()">使編輯器得到焦點</button> 32 <button onmousedown="isFocus(event)">編輯器是否得到焦點</button> 33 <button onmousedown="setblur(event)" >編輯器失去焦點</button> 34 35 </div> 36 <div> 37 <button onclick="getText()">得到當前選中的文本</button> 38 <button onclick="insertHtml()">插入給定的內容</button> 39 <button id="enable" onclick="setEnabled()">能夠編輯</button> 40 <button onclick="setDisabled()">不可編輯</button> 41 <button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button> 42 <button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button> 43 <button onclick=" UE.getEditor('editor').setHeight(300)">設置高度爲300默認關閉了自動長高</button> 44 </div> 45 46 <div> 47 <button onclick="getLocalData()" >獲取草稿箱內容</button> 48 <button onclick="clearLocalData()" >清空草稿箱</button> 49 </div> 50 51 </div> 52 <div> 53 <button onclick="createEditor()"> 54 建立編輯器</button> 55 <button onclick="deleteEditor()"> 56 刪除編輯器</button> 57 </div> 58 59 <script type="text/javascript"> 60 61 //實例化編輯器 62 //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 63 var ue = UE.getEditor('editor', { 64 serverUrl: '/server/ueditor/controller.php' 65 }); 66 67 68 function isFocus(e){ 69 alert(UE.getEditor('editor').isFocus()); 70 UE.dom.domUtils.preventDefault(e) 71 } 72 function setblur(e){ 73 UE.getEditor('editor').blur(); 74 UE.dom.domUtils.preventDefault(e) 75 } 76 function insertHtml() { 77 var value = prompt('插入html代碼', ''); 78 UE.getEditor('editor').execCommand('insertHtml', value) 79 } 80 function createEditor() { 81 enableBtn(); 82 UE.getEditor('editor'); 83 } 84 function getAllHtml() { 85 alert(UE.getEditor('editor').getAllHtml()) 86 } 87 function getContent() { 88 var arr = []; 89 arr.push("使用editor.getContent()方法能夠得到編輯器的內容"); 90 arr.push("內容爲："); 91 arr.push(UE.getEditor('editor').getContent()); 92 alert(arr.join("\n")); 93 } 94 function getPlainTxt() { 95 var arr = []; 96 arr.push("使用editor.getPlainTxt()方法能夠得到編輯器的帶格式的純文本內容"); 97 arr.push("內容爲："); 98 arr.push(UE.getEditor('editor').getPlainTxt()); 99 alert(arr.join('\n')) 100 } 101 function setContent(isAppendTo) { 102 var arr = []; 103 arr.push("使用editor.setContent('歡迎使用ueditor')方法能夠設置編輯器的內容"); 104 UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo); 105 alert(arr.join("\n")); 106 } 107 function setDisabled() { 108 UE.getEditor('editor').setDisabled('fullscreen'); 109 disableBtn("enable"); 110 } 111 112 function setEnabled() { 113 UE.getEditor('editor').setEnabled(); 114 enableBtn(); 115 } 116 117 function getText() { 118 //當你點擊按鈕時編輯區域已經失去了焦點，若是直接用getText將不會獲得內容，因此要在選回來，而後取得內容 119 var range = UE.getEditor('editor').selection.getRange(); 120 range.select(); 121 var txt = UE.getEditor('editor').selection.getText(); 122 alert(txt) 123 } 124 125 function getContentTxt() { 126 var arr = []; 127 arr.push("使用editor.getContentTxt()方法能夠得到編輯器的純文本內容"); 128 arr.push("編輯器的純文本內容爲："); 129 arr.push(UE.getEditor('editor').getContentTxt()); 130 alert(arr.join("\n")); 131 } 132 function hasContent() { 133 var arr = []; 134 arr.push("使用editor.hasContents()方法判斷編輯器裏是否有內容"); 135 arr.push("判斷結果爲："); 136 arr.push(UE.getEditor('editor').hasContents()); 137 alert(arr.join("\n")); 138 } 139 function setFocus() { 140 UE.getEditor('editor').focus(); 141 } 142 function deleteEditor() { 143 disableBtn(); 144 UE.getEditor('editor').destroy(); 145 } 146 function disableBtn(str) { 147 var div = document.getElementById('btns'); 148 var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); 149 for (var i = 0, btn; btn = btns[i++];) { 150 if (btn.id == str) { 151 UE.dom.domUtils.removeAttributes(btn, ["disabled"]); 152 } else { 153 btn.setAttribute("disabled", "true"); 154 } 155 } 156 } 157 function enableBtn() { 158 var div = document.getElementById('btns'); 159 var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); 160 for (var i = 0, btn; btn = btns[i++];) { 161 UE.dom.domUtils.removeAttributes(btn, ["disabled"]); 162 } 163 } 164 165 function getLocalData () { 166 alert(UE.getEditor('editor').execCommand( "getlocaldata" )); 167 } 168 169 function clearLocalData () { 170 UE.getEditor('editor').execCommand( "clearlocaldata" ); 171 alert("已清空草稿箱") 172 } 173 </script> 174 </body> 175 </html>
能夠說功能很是完善了，javascript
全部，使用工具，多去看官方demophp
修改編輯器寬度
查看官方樣例，css
加上這個就在js中，因此修改編輯器寬度就是動態獲取寬度而後修改就成了html
1 <!-- ueditor --> 2 <script type="text/javascript"> 3 var width=$('.myEditor').width(); 4 //$('.myEditor').css({'border':'5px ridge #ff00ff'}); 5 //alert(width); 6 UE.getEditor('content',{ 7 initialFrameWidth:width, 8 initialFrameHeight:300, 9 }); 10 </script> 11 <!-- ueditor -->