UEditor实战分享（三）常用方法

好闺女瑶瑶 2016-05-30

展开全文

1.初始化

1. 1 创建basic_common.html文件

在Demo目录下创建 basic_common.html 文件，填入下面的html代码，初始化UEditor。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www./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，将会立即触发该回调。

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

2.内容

2.1 设置内容

设置编辑器的内容，替换编辑器当前的html内容

< button onclick ="setContent()" > 设置内容 </ button >

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

2.2 追加内容

设置编辑器的内容，可修改编辑器当前的html内容

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

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

2.3 获取html内容

< button onclick ="getContent()" > 获得内容 </ button >

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();
}