6月21 百度文本编辑器
生活随笔
收集整理的這篇文章主要介紹了
6月21 百度文本编辑器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
百度文本編輯器的下載版本：需要引入ueditor.config.js和ueditor.all.min.js和lang/zh-cn/zh-cn.js
使用時將下載好的ueditor文件包放到www文件的目錄下，并根據自己的需要選擇以下的按鈕
以下是html代碼部分：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>完整demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script><!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗--><!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script><style type="text/css">div{width:100%;}</style> </head> <body> <div><h1>完整demo</h1><script id="editor" type="text/plain" style="width:800px;height:300px;"></script> </div> <div id="btns"><div><button onclick="getAllHtml()">獲得整個html的內容</button><button onclick="getContent()">獲得內容</button><button onclick="setContent()">寫入內容</button><button onclick="setContent(true)">追加內容</button><button onclick="getContentTxt()">獲得純文本</button><button onclick="getPlainTxt()">獲得帶格式的純文本</button><button onclick="hasContent()">判斷是否有內容</button><button onclick="setFocus()">使編輯器獲得焦點</button><button onmousedown="isFocus(event)">編輯器是否獲得焦點</button><button onmousedown="setblur(event)" >編輯器失去焦點</button></div><div><button onclick="getText()">獲得當前選中的文本</button><button onclick="insertHtml()">插入給定的內容</button><button id="enable" onclick="setEnabled()">可以編輯</button><button onclick="setDisabled()">不可編輯</button><button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button><button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button><button onclick=" UE.getEditor('editor').setHeight(300)">設置高度為300默認關閉了自動長高</button></div><div><button onclick="getLocalData()" >獲取草稿箱內容</button><button onclick="clearLocalData()" >清空草稿箱</button></div></div> <div><button onclick="createEditor()">創建編輯器</button><button onclick="deleteEditor()">刪除編輯器</button> </div><script type="text/javascript">//實例化編輯器//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例var ue = UE.getEditor('editor');function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插入html代碼', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor');}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以獲得編輯器的內容");arr.push("內容為：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文本內容");arr.push("內容為：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設置編輯器的內容");UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//當你點擊按鈕時編輯區域已經失去了焦點，如果直接用getText將不會得到內容，所以要在選回來，然后取得內容var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文本內容");arr.push("編輯器的純文本內容為：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判斷編輯器里是否有內容");arr.push("判斷結果為：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" ));}function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")} </script> </body> </html> View Code新建與ueditor同級的文件testueditor.php：進行自己的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title><script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script><!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗--><!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script></head><body> <div><h1>完整demo</h1><script id="editor" type="text/plain" style="width:800px;height:300px;"></script> </div> <div><button οnclick="getContent()">獲得內容</button><button οnclick="setContent()">寫入內容</button> </div> <div id="xianshi"></div> </body> <script type="text/javascript">var ue = UE.getEditor('editor');function getContent() {document.getElementById("xianshi").innerHTML = UE.getEditor('editor').getContent();}function setContent(isAppendTo) {var str = "<p>我看看是不是能行的，就是這么好會說話</p><p><img src='/ueditor/php/upload/image/20160625/1466820882121569.png' title='1466820882121569.png' alt='logo.png'></p>";UE.getEditor('editor').setContent(str, isAppendTo);} </script> </html>?
轉載于:https://www.cnblogs.com/Duriyya/p/5615952.html
總結
以上是生活随笔為你收集整理的6月21 百度文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Matlab中meshgrid的用法简介
- 下一篇： 回首往事的简短的句子186个