首页 > 代码库 > UEditor实战分享（三）常用方法

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

2024-07-15 11:16:27   225人阅读

1.初始化

1. 1 创建basic_common.html文件

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

 <!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，将会立即触发该回调。

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

 


联系
我们