>前言：以前写博客时使用的百度ueditor编辑器，在使用过程中也是遇到了很多的问题，最终在我的不懈努力之下慢慢解决掉了。 ## 编辑器配置： *** 下载编辑器：到官网下载 [UEditor](http://ueditor.baidu.com/website/download.html#ueditor "UEditor") 最新版 ### 创建demo文件： 解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码 ```html <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>ueditor demo</title></head><body> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script></body></html> ``` ### 在浏览器打开demo.html: 如果看到了下面这样的编辑器，恭喜你，初次部署成功！  ### 传入自定义的参数： 编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器 ```javascript var ue = UE.getEditor('container', { autoHeight: false }); ``` 配置项也可以通过 ueditor.config.js 文件修改，具体的配置方法请看[前端配置项说明](http://fex.baidu.com/ueditor/#start-config "前端配置项说明") ### 设置和读取编辑器的内容： 通 getContent 和 setContent 方法可以设置和读取编辑器的内容 ```javascript var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做 ue.ready(function() { //设置编辑器的内容 ue.setContent('hello'); //获取html内容，返回: <p>hello</p> var html = ue.getContent(); //获取纯文本内容，返回: hello var txt = ue.getContentTxt(); }); ``` ## 编辑器配置图片上传 ### 在线编辑器在页面正常显示 - 上百度Editor首页下载http://ueditor.baidu.com/website/ - COPY到自己的项目中去，然后记住ueditor所在文件的目录 - 配置editor_config.js中的URL(这一步很重要)，因为我在html文件中测试的时候是没有修改配置文件的信息也可以用，但是用在项目编辑器就无法显示。 ```javascript /** * 此处配置写法适用于UEditor小组成员开发使用，外部部署用户请按照上述说明方式配置即可，建议保留下面两行，以兼容可在具体每个页面配置window.UEDITOR_HOME_URL的功能。 */ var tmp = location.protocol.indexOf("file")==-1 ? location.pathname : location.href; URL = window.UEDITOR_HOME_URL || tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/",""); //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径） ``` ```javascript /** * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径，这个不能被注释 UEDITOR_HOME_URL : URL //图片上传配置区 ,imageUrl:URL+"jsp/imageUp.jsp" //图片上传提交地址 ,imagePath:URL + "jsp/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置 ``` 图片上传路径配置区域是在：ueditor.config.js里URL路径是直接指向了ueditor所在项目中的位置。如：/tools/editor/ ```html <!DOCTYPE HTML> <html> <head> <title>完整的demo</title> <meta http-equiv="Content-Type" content="text/html;charset=gbk"/> <script> var UEDITOR_HOME_URL = "/ueditor/"; //从项目的根目录开始 </script> <link type="text/css" href="./themes/default/css/ueditor.css" rel="stylesheet"/> <script type="text/javascript" src="./editor_config.js"></script> <script type="text/javascript" src="./editor_all.js"></script> </head> <body> <div> <script id="myEditor" type="text/plain">欢迎使用</script> </div> <script type="text/javascript"> //初始化 var ue = UE.getEditor('myEditor'); </script> </body> </html> ``` 原因是window.UEDITOR_HOME_URL没有定义，只要在引入script脚本前声明并复制就可以正常使用了。 如果没有引入editor.css文件那么部分功能的显示将会没有那么好看。 ### 图片上传 - 具体包括imageUp.jsp和Uploader.java这两个文件 - 在jsp页面中只需要引入正确Uploader.java所在的包就行。 - 剩下的工作就是在Uploader.java中修改图片上传的目录、制定文件名生成规则等等。 做实现过程中让我很纠结的是：配置完成没问题了，但是就是图片上传不成功具体错误如下： - 在没有找到Uploader类的情况下就会报：网络设置不正确，上传失败(大概就是这个意思。。。)。 - - - ## 实现编辑器自适应宽度的解决方案 由于我的网站后台是自适应的，但我们在使用时会发现编辑器不能自适应宽度了，下文我们就一起来看问题解决办法。 UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000.不能够自适应屏幕宽度。 刚开始的时候,我是直接设置initialFrameWidth=null的。 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性。 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG. 由于它不会自适应宽度.所以会发现编辑器宽度溢出。 * 解决方案: 打开/ueditor/ueditor.config.js 找到initialFrameWidth属性,默认值是1000.即是initialFrameWidth: 1000 把值更改为'100%' , 即是initialFrameWidth: '100%' 保存后,刷新浏览器再看看... - - - ## 百度编辑器ueditor 如何用JS取得内容 调用百度编辑器后，用JS怎么取得内容呢？如下代码： ```javascript <div id="myEditor"> <script type="text/javascript" id="myEditor"> var editor = new baidu.editor.ui.Editor({ initialContent: '' }); editor.render("myEditor"); </script> </div> ```
