1,首先在head标签里引入编辑器的js文件
<script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/ueditor.all.min.js"> </script> <!--建议手动加载语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> <script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/lang/zh-cn/zh-cn.js"></script>
2,在需要使用的地方引入编辑器
<div class="inp_div"> <span class="inp_lx">详细内容:</span> <div> <script id="editor" type="text/plain" style="900px;height:500px;margin-left: 160px;"></script> <!--引入编辑器-->
</div>
</div>
3,实例化编辑器
<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(" ")); } function getPlainTxt() { var arr = []; arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容"); arr.push("内容为:"); arr.push(UE.getEditor('editor').getPlainTxt()); alert(arr.join(' ')) } function setContent(isAppendTo) { var arr = []; arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容"); UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo); alert(arr.join(" ")); } 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(" ")); } function hasContent() { var arr = []; arr.push("使用editor.hasContents()方法判断编辑器里是否有内容"); arr.push("判断结果为:"); arr.push(UE.getEditor('editor').hasContents()); alert(arr.join(" ")); } 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>
4,获取编辑器里的内容
var content = []; content.push(UE.getEditor('editor').hasContents()); if(content[0]==false){ alert("请填写详细内容!") return false; }else{ var content = []; content.push(UE.getEditor('editor').getContent()); console.log(content[0]) }
5,获取和设置上一次的内容
<div class="inp_div"> <span class="inp_lx">详细内容:</span> <div> <script id="editor" type="text/plain" style="900px;height:500px;margin-left: 160px;"></script> </div> <textarea name='content' style="display: none;" id="content">prevContent</textarea> //prevContent就是上一次的内容,一般有后台保存好,再发回来,用文本域先保存 </div>
function fo(){ ue.ready(function() { var con = document.getElementById('content').value; //获取文本域所保存的内容再设置回编辑器里 ue.setContent( con , true); }); } fo();