百度富文本编辑器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 -->