UEditor實戰分享（三）經常使用方法

時間 2019-11-09

標籤 ueditor 實戰分享經常使用方法简体版

原文原文鏈接

1.初始化

1. 1 建立basic_common.html文件

在Demo目錄下建立 basic_common.html 文件，填入下面的html代碼，初始化UEditor。javascript

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title>經常使用方法</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>     
     <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
 </head>
 <body>
    <div>
         <h1>經常使用方法</h1>
         <script id="editor" type="text/plain" style="width:100%;height:500px;">hello world!</script>
     </div>  
     <script type="text/javascript">
         //實例化編輯器       
         var editor= UE.getEditor('editor'});
     </script>
 </body>
 </html>

View Code

1.2 ready()

編輯器對外提供了ready()方法，編輯器ready以後所執行的回調, 若是在註冊事件以前編輯器已經ready，將會當即觸發該回調。html

editor.ready( function(editor) { editor.setContent('初始化完畢'); }); java

2.內容

2.1 設置內容

設置編輯器的內容，替換編輯器當前的html內容dom

<button onclick="setContent()">設置內容</button> 編輯器

function setContent() { editor.setContent('歡迎使用ueditor'); } ide

2.2 追加內容

設置編輯器的內容，可修改編輯器當前的html內容工具

<button onclick="setContent(true)">追加內容</button> ui

function setContent(isAppendTo) { editor.setContent('我是追加的內容！',isAppendTo); } spa

2.3 獲取html內容

<button onclick="getContent()">得到內容</button> code

function getContent() { alert(editor.getContent()); }

2.4 獲取純文本內容

<button onclick="getContentTxt()">得到純文本</button>

function getContentTxt() { alert(editor.getContentTxt()); }

2.5 獲取保留格式的文本內容

<button onclick="getPlainTxt()">得到帶格式的純文本</button>

function getPlainTxt() { alert(editor.getPlainTxt()) }

2.6 判斷編輯器是否有內容

<button onclick="hasContent()">判斷是否有內容</button>

function hasContent() { alert(editor.hasContents()); }

2.7 得到當前選中的文本

<button onclick="getText()">得到當前選中的文本</button>

function getText() { alert(editor.selection.getText()); }

3.其餘

這一節主要會講解獲取焦點、失去焦點、是否得到焦點、能夠編輯、禁用編輯、隱藏編輯器、顯示編輯器、建立新的編輯器、銷燬編輯器、以及對編輯器的長寬進行初始化設置等功能，因爲比較簡單，因此在此不一一展開說明了，具體請看下面代碼。

<div>
<button onclick="setFocus()">使編輯器得到焦點</button>
<button onmousedown="isFocus(event)">編輯器是否得到焦點</button>
<button onmousedown="setblur(event)" >編輯器失去焦點</button>

<button id="enable" onclick="setEnabled()">能夠編輯</button>
<button onclick="setDisabled()">不可編輯</button>
        
<button onclick="setHide()">隱藏編輯器</button>
<button onclick="setShow()">顯示編輯器</button>
        
<button onclick="setHeight(300)">設置高度爲300默認關閉了自動長高</button>
    
<button onclick="createEditor()">建立編輯器</button>
<button onclick="deleteEditor()">刪除編輯器</button>
</div>

//獲取焦點
function setFocus() {
       editor.focus();
}

//編輯器是否獲取焦點
function isFocus(e){    
        alert(editor.isFocus());
        UE.dom.domUtils.preventDefault(e)
}

//編輯器失去焦點
function setblur(e){
       editor.blur();
        UE.dom.domUtils.preventDefault(e)
}

//不可編輯
function setDisabled() {
       editor.setDisabled('fullscreen');
       disableBtn("enable");
}

//能夠編輯
function setEnabled() {
       editor.setEnabled();
       enableBtn();
 }

//灰掉工具欄按鈕
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 setHide(){
  editor.setHide();
}

//顯示編輯器
function setShow(){
 editor.setShow();
}

//設置編輯器高度
function setHeight(hight){
  editor.setHeight(hight);
}

//建立編輯器
function createEditor() {
     enableBtn();
     editor = UE.getEditor('editor');
 }   

//銷燬編輯器
function deleteEditor() {
        disableBtn();
        editor.destroy();
}

相關標籤/搜索

每日一句

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