編輯器UEditor入門學習

時間 2019-11-10

標籤編輯器 ueditor 入門學習简体版

原文原文鏈接

優勢：很是使用的富文本編輯器，對比於以前使用的summernote，比前者多出了更多的字體圖標javascript

廢話少說，直接步驟：css

一、導入資源（所有放在單獨的文件下便可，下圖爲「UEditor」文件夾）html

二、引用UEditor和JS實例化java

<div class="container" style="margin:20px 10px;">
	<script id="editor" type="text/plain"></script>
</div>

<script type="text/javascript">

    //實例化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    var ue = UE.getEditor('editor',{
        initialFrameWidth:1400,
        initialFrameHeight:500
    });
</script>

三、若是按照以上操做是能正常顯示完整Demo，可是會提示閉包

這個須要本身去手動配置上傳文件目錄，一下提供JSP部署的博文，引用別人的：https://blog.csdn.net/gfd54gd5f46/article/details/60887313dom

提供官方完成實例：編輯器

index.htmlide

  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.config.js"></script>
  8     <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
  9     <!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
 10     <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
 11     <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
 12 
 13     <style type="text/css">
 14         div{
 15             width:100%;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <div>
 21     <h1>完整demo</h1>
 22     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
 23 </div>
 24 <div id="btns">
 25     <div>
 26         <button onclick="getAllHtml()">得到整個html的內容</button>
 27         <button onclick="getContent()">得到內容</button>
 28         <button onclick="setContent()">寫入內容</button>
 29         <button onclick="setContent(true)">追加內容</button>
 30         <button onclick="getContentTxt()">得到純文本</button>
 31         <button onclick="getPlainTxt()">得到帶格式的純文本</button>
 32         <button onclick="hasContent()">判斷是否有內容</button>
 33         <button onclick="setFocus()">使編輯器得到焦點</button>
 34         <button onmousedown="isFocus(event)">編輯器是否得到焦點</button>
 35         <button onmousedown="setblur(event)" >編輯器失去焦點</button>
 36 
 37     </div>
 38     <div>
 39         <button onclick="getText()">得到當前選中的文本</button>
 40         <button onclick="insertHtml()">插入給定的內容</button>
 41         <button id="enable" onclick="setEnabled()">能夠編輯</button>
 42         <button onclick="setDisabled()">不可編輯</button>
 43         <button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button>
 44         <button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button>
 45         <button onclick=" UE.getEditor('editor').setHeight(300)">設置高度爲300默認關閉了自動長高</button>
 46     </div>
 47 
 48     <div>
 49         <button onclick="getLocalData()" >獲取草稿箱內容</button>
 50         <button onclick="clearLocalData()" >清空草稿箱</button>
 51     </div>
 52 
 53 </div>
 54 <div>
 55     <button onclick="createEditor()">
 56     建立編輯器</button>
 57     <button onclick="deleteEditor()">
 58     刪除編輯器</button>
 59 </div>
 60 
 61 <script type="text/javascript">
 62 
 63     //實例化編輯器
 64     //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
 65     var ue = UE.getEditor('editor');
 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>