介绍
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
特点
支持拖拽图片上传支持QQ截图后粘贴上传图片支持图片直传第三方云储存支持Chrome的图片拖动改变大小支持公式编辑支持地图插入支持表情插入支持附件图片插入下载
官网下载：/website/download.html#ueditor小编友情提供百度网盘：
链接：/s/1fKnwozEZLHwk4LxXC8QbQA
提取码：274r
使用方式
引入js和css文件：
<link href="umeditor.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="jquery.min.js"></script><!-- 配置文件 --><script type="text/javascript" src="ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="ueditor.js"></script><!-- 编辑器语言 --><script src="umeditor/js/lang/zh-cn/zh-cn.js"></script>
API
参数
{UEDITOR_HOME_URL:"", //{Path String} [默认值：根据config文件路径自动获取] // 为编辑器实例添加一个路径，这个不能被注释serverUrl :"",//{Path String} [默认值：URL + "php/controller.php"] // 服务器统一请求接口路径toolbars:[],// {2d Array} //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义labelMap:{},// {Object} [默认：从lang包的labelMap项获取] //参数格式是键值对，键名对应toolbar参数的项：{"bold": "加粗"} ]，当鼠标放在工具栏上时显示的tooltip提示，留空支持自动多语言配置，否则以配置值为准lang:"zh-cn",// {String} [默认值："zh-cn"] //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()，语言配置项，默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：langPath:"",// {Path String} [默认值：URL +"lang/"] //语言包文件存放目录theme:"default",// {String} [默认值：'default'] //主题配置项，默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：themePath:"",// {Path String} [默认值：URL +"themes/"] //现有如下皮肤：defaultzIndex:900,// {Number} [默认值：900] //编辑器在页面上的z-index层级的基数，默认是900charset:"utf-8",// {String} [默认值："utf-8"] //针对getAllHtml方法，会在对应的head标签中增加该编码设置。customDomain:false,// {Boolean} [默认值：false] //若实例化编辑器的页面手动修改的domain，此处需要设置为trueisShow:true,// {Boolean} [默认值：true] //默认显示编辑器textarea:"editorValue",// {String} [默认值：'editorValue'] // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值initialContent:"欢迎使用ueditor!",// {String} [默认值：'欢迎使用ueditor!'] //初始化编辑器的内容，也可以通过textarea/script给值，看官网例子autoClearinitialContent:true,// {Boolean} [默认值：true] //是否自动清除编辑器初始内容，注意：如果focus属性设置为true，这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了focus:false,// {Boolean} [默认值：false] //初始化时，是否让编辑器获得焦点true或falseinitialStyle:"p{line-height:1em}" ,//{String} [默认值：'p{line-height:1em}']//编辑器层级的基数，可以用来改变字体等 //如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感iframeCssUrl:"",// {Path String} [默认值：URL + '/themes/iframe.css'] //给编辑器内部引入一个css文件indentValue:"2em",// {String} [默认值：'2em'] //首行缩进距离，默认是2eminitialFrameWidth:1000,// {Number} [默认值：1000] //初始化编辑器宽度，默认1000initialFrameHeight:320,// {Number} [默认值：320] //初始化编辑器高度，默认320readonly:false,// {Boolean} [默认值：false] //编辑器初始化结束后，编辑区域是否是只读的，默认是falseautoClearEmptyNode:true,// {Boolean} [默认值：true] //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）enableAutoSave:true,// {Boolean} [默认值：true] //启用自动保存saveInterval:500,// {Number} [默认值：500] //自动保存间隔时间，单位msimageScaleEnabled:true,// {Boolean} [默认值：true] //启用图片拉伸缩放fullscreen:false,// {Boolean} [默认值：false] //是否开启初始化时即全屏，默认关闭imagePopup:true,// {Boolean} [默认值：true] //图片操作的浮层开关，默认打开autoSyncData :true,//{Boolean} [默认值：true] //自动同步编辑器要提交的数据emotionLocalization:false,// {Boolean} [默认值：false] //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹retainOnlyLabelPasted:false,// {Boolean} [默认值：false] //粘贴只保留标签，去除标签所有属性pasteplain:false,// {Boolean} [默认值：false] //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴filterTxtRules:{},// {Object} //纯文本粘贴模式下的过滤规则}
方法var ue = UM.getEditor('container')：实例化编辑器到id为 container 的 dom 容器上ue.setContent('<p>hello!</p>')：设置编辑器内容ue.setContent('<p>new text</p>', true)：设置编辑器内容ue.getContent()：获取编辑器html内容ue.getContentTxt()：获取纯文本内容ue.getPlainTxt()：获取保留格式的文本内容ue.hasContents()：判断编辑器是否有内容ue.focus()：让编辑器获得焦点ue.blur()：让编辑器失去焦点ue.isFocus()：判断编辑器是否获得焦点ue.setDisabled()：设置当前编辑区域不可编辑ue.setEnabled()：设置当前编辑区域可以编辑ue.setHide()：隐藏编辑器ue.setShow()：显示编辑器ue.selection.getText()：获得当前选中的文本 命令ue.execCommand('redo')：撤销回退编辑器内容ue.execCommand('source')：切换源码和可视化编辑模式ue.execCommand('selectall')：选中所有内容ue.execCommand('cleardoc')：清空内容ue.execCommand('drafts')：读取草稿箱ue.execCommand('clearlocaldata')：清空草稿箱ue.setShow()：显示编辑器ue.setShow()：显示编辑器ue.setShow()：显示编辑器ue.execCommand('inserthtml', '<span>hello!</span>')：在当前光标位置插入html内容ue.execCommand('bold'); //加粗 ue.execCommand('italic'); //加斜线 ue.execCommand('subscript'); //设置上标 ue.execCommand('supscript'); //设置下标 ue.execCommand('forecolor', '#FF0000'); //设置字体颜色 ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色:设置当前选区文本格式 事件ue.ready(）： 编辑器准备就绪后会触发该事件ue.destroy()：执行destroy方法,会触发该事件ue.reset()：执行reset方法,会触发该事件ue.focus()：执行focus方法,会触发该事件ue.langReady()：语言加载完成会触发该事件ue.beforeExecCommand()：运行命令之后会触发该命令ue.afterExecCommand()：运行命令之后会触发该命令ue.firstBeforeExecCommand()：运行命令之前会触发该命令ue.beforeGetContent()：在getContent方法执行之前会触发该事件ue.afterGetContent()：在getContent方法执行之后会触发该事件 示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="umeditor/themes/default/css/umeditor.css"><style type="text/css">h1{font-family: "微软雅黑";font-weight: normal;}.btn {display: inline-block;*display: inline;padding: 4px 12px;margin-bottom: 0;*margin-left: .3em;font-size: 14px;line-height: 20px;color: #333333;text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);vertical-align: middle;cursor: pointer;background-color: #f5f5f5;*background-color: #e6e6e6;background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat: repeat-x;border: 1px solid #cccccc;*border: 0;border-color: #e6e6e6 #e6e6e6 #bfbfbf;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-bottom-color: #b3b3b3;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*zoom: 1;-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {color: #333333;background-color: #e6e6e6;*background-color: #d9d9d9;}.btn:active,.btn.active {background-color: #cccccc \9;}.btn:first-child {*margin-left: 0;}.btn:hover,.btn:focus {color: #333333;text-decoration: none;background-position: 0 -15px;-webkit-transition: background-position 0.1s linear;-moz-transition: background-position 0.1s linear;-o-transition: background-position 0.1s linear;transition: background-position 0.1s linear;}.btn:focus {outline: thin dotted #333;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}.btn.active,.btn:active {background-image: none;outline: 0;-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}.btn.disabled,.btn[disabled] {cursor: default;background-image: none;opacity: 0.65;filter: alpha(opacity=65);-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}</style></head><body><script id="myEditor" name="content" type="text/plain"></script><script src="js/jquery.min.js"></script><script src="umeditor/js/umeditor.js"></script><script src="umeditor/js/umeditor.config1.js"></script><script src="umeditor/js/lang/zh-cn/zh-cn.js"></script><div id="btns"><table><tr><td><button class="btn" unselected="on" onclick="getAllHtml()">获得整个html的内容</button> <button class="btn" onclick="getContent()">获得内容</button> <button class="btn" onclick="setContent()">写入内容</button> <button class="btn" onclick="setContent(true)">追加内容</button> <button class="btn" onclick="getContentTxt()">获得纯文本</button> <button class="btn" onclick="getPlainTxt()">获得带格式的纯文本</button> <button class="btn" onclick="hasContent()">判断是否有内容</button></td></tr><tr><td><button class="btn" onclick="setFocus()">编辑器获得焦点</button> <button class="btn" onmousedown="isFocus();return false;">编辑器是否获得焦点</button> <button class="btn" onclick="doBlur()">编辑器取消焦点</button> <button class="btn" onclick="insertHtml()">插入给定的内容</button> <button class="btn" onclick="getContentTxt()">获得纯文本</button> <button class="btn" id="enable" onclick="setEnabled()">可以编辑</button> <button class="btn" onclick="setDisabled()">不可编辑</button></td></tr><tr><td><button class="btn" onclick="UM.getEditor('myEditor').setHide()">隐藏编辑器</button> <button class="btn" onclick="UM.getEditor('myEditor').setShow()">显示编辑器</button> <button class="btn" onclick="UM.getEditor('myEditor').setHeight(300)">设置编辑器的高度为300</button> <button class="btn" onclick="UM.getEditor('myEditor').setWidth(1200)">设置编辑器的宽度为1200</button></td></tr></table></div><table><tr><td><button class="btn" onclick="createEditor()"/>创建编辑器</button><button class="btn" onclick="deleteEditor()"/>删除编辑器</button></td></tr></table><div><h3 id="focush2"></h3></div><script type="text/javascript">//实例化编辑器var um = UM.getEditor('myEditor');um.addListener('blur',function(){$('#focush2').html('编辑器失去焦点了')});um.addListener('focus',function(){$('#focush2').html('')});//按钮的操作function insertHtml() {var value = prompt('插入html代码', '');um.execCommand('insertHtml', value)}function isFocus(){alert(um.isFocus())}function doBlur(){um.blur()}function createEditor() {enableBtn();um = UM.getEditor('myEditor');}function getAllHtml() {alert(UM.getEditor('myEditor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以获得编辑器的内容");arr.push("内容为：");arr.push(UM.getEditor('myEditor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");arr.push("内容为：");arr.push(UM.getEditor('myEditor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('欢迎使用umeditor')方法可以设置编辑器的内容");UM.getEditor('myEditor').setContent('欢迎使用umeditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UM.getEditor('myEditor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UM.getEditor('myEditor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容var range = UM.getEditor('myEditor').selection.getRange();range.select();var txt = UM.getEditor('myEditor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");arr.push("编辑器的纯文本内容为：");arr.push(UM.getEditor('myEditor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");arr.push("判断结果为：");arr.push(UM.getEditor('myEditor').hasContents());alert(arr.join("\n"));}function setFocus() {UM.getEditor('myEditor').focus();}function deleteEditor() {disableBtn();UM.getEditor('myEditor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {domUtils.removeAttributes(btn, ["disabled"]);}}</script></body></html>
官网地址：/ueditor/#start-start
Github地址：/fex-team/ueditor
