百度富文本編輯器ueditor使用啓示

時間 2020-06-08

標籤百度文本編輯器 ueditor 使用啓示简体版

原文原文鏈接

百度富文本編輯器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 -->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。