富文本编辑器 Baidu UE

• 1. UEditor 概述
• 2. 完整代码如下

1. UEditor 概述

UEditor（简称UE）由百度 Web 演的研发部开发的所见即的富文本 Web 编辑器，有轻量、可定制、开源（能自由使用和修改代码）和注重用户体验等特点；UE 允许将页面内容作为数据库的一个字段来存取，放动态地编辑和浏览页面；
下载 UE ；
注意：

• 留言板是网站设计的一个重要内容；若使用表单元素 textarea 记录用户留言，只能是文本；使用富文本编辑器，通过 UE 工具栏能茶入带 CSS 样式的文本、上传图片等；
• 上传的文件默认存放在系统文件夹 www\ueditor\php\upload\image\yyyymmdd 中，并命名为当前时间戳；www，是PHP Web 站点的根目录，yyyy、mm 和 dd 是当前的年、月、日；

例子：富文本编辑器 UEditor 的使用
在表单页面引入 UEditor 提供的三个脚本文件，自定义脚本执行方法 UE.getEditor('editor')，指定表单元素 textarea 的 id 属性为 “editor”；
链接: UEditor 下载 ，提取码: 4xjn
下载 UEditor，

引入的文件部分：

<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><style type="text/css">p{width:100%;}</style>

主体部分：

<p align="center"><h1 align="center">完整 demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></p><p id="btns" ><p align="center"><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></p><p align="center"><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></p><p align="center"><button onclick="getLocalData()" >获取草稿箱内容</button><button onclick="clearLocalData()" >清空草稿箱</button></p></p><p align="center"><button onclick="createEditor()">创建编辑器</button><button onclick="deleteEditor()">删除编辑器</button></p>

JS 部分：

<script type="text/javascript">//实例化编辑器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 p = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(p, "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 p = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(p, "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>

2. 完整代码如下

<!DOCTYPE html><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><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script><style type="text/css">p{width:100%;}</style></head><body><p align="center"><h1 align="center"> demo </h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></p><p id="btns" ><p align="center"><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></p><p align="center"><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></p><p align="center"><button onclick="getLocalData()" >获取草稿箱内容</button><button onclick="clearLocalData()" >清空草稿箱</button></p></p><p align="center"><button onclick="createEditor()">创建编辑器</button><button onclick="deleteEditor()">删除编辑器</button></p></body></html><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 p = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(p, "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 p = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(p, "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>