网站内容编辑器( 百度web前端研发部开发所见即所得富文本web编辑器(组图))

　　网站内容编辑器(

百度web前端研发部开发所见即所得富文本web编辑器(组图))

　　如何使用免费开源的百度编辑器（UEditor）

　　更新时间：2014年5月14日11:41:27 作者：

　　UEditor 是一个开源和免费的编辑器。百度网页前端研发部开发的WYSIWYG富文本网页编辑器，轻量级、可定制、注重用户体验。它是基于 BSD 协议的开源软件，允许自由使用和修改代码。

　　<IMG border=0 alt=点击新窗口打开大图 src="//img.jbzj.com/file_images/article/201405/201405141134552.jpg">

　　UEditor 效果图

　　一、简介

　　UEditor 是一个开源和免费的编辑器。百度网页前端研发部开发的WYSIWYG富文本网页编辑器，轻量级、可定制、注重用户体验。它是基于 BSD 协议的开源软件，允许自由使用和修改代码。.

　　官方 网站：

　　二、下载地址

　　官方下载：

　　从官网下载完整的源码包，解压到任意目录。解压后的源码目录结构如下：

　　_examples：完整版编辑器的示例页面

　　dialogs：弹出对话框对应的资源和JS文件

　　主题：样式图片和样式文件

　　php/jsp/.net：服务端操作涉及的后端文件，根据你选择的后端版本不同，这里会有所不同，这里应该是jsp,php,.net

　　第三方：第三方插件（包括代码高亮、源码编辑等组件）

　　editor_all.js：_src目录下所有文件的打包文件

　　editor_all_min.js：editor_all.js文件的压缩版本，建议正式部署时使用

　　editor_config.js：编辑器的配置文件，建议与编辑器实例化页面放在同一目录

　　或者在网上搜索别人配置的例子，就不用自己折腾了。自己做的，折腾了半天，差点放弃！

　　我下载的开发版【1.2.5.1 .Net版】2013年4月27日，最新版本。

　　三、部署方式

　　<IMG border=0 alt=点击新窗口打开大图 src="//img.jbzj.com/file_images/article/201405/201405141134553.jpg">

　　代码*敏*感*词*

　　第一步：在项目的任意文件夹中创建一个目录，用于存放UEditor相关的资源和文件。在项目根目录下这里创建，命名为ueditor（你喜欢）。

　　第二步：将源码包中的dialogs、themes、第三方、editor_all.js和editor_config.js复制到ueditor文件夹中。其中，除了ueditor目录之外的其他文件都是具体的工程文件，这里列举的只是一个例子。

　　第三步：为简单起见，这里将根目录下的index.php页面作为编辑器的实例化页面，展示完整版的UEditor。在index.php文件中，首先导入编辑器需要的三个入口文件。示例代码如下：

　　复制代码代码如下：

　　完整版编辑器示例

　　第 4 步：然后在 index.php 文件中创建一个编辑器实例及其 DOM 容器。具体代码示例如下：

　　复制代码代码如下：

　　最后一步：在/UETest/ueditor/editor_config.js中找到你项目中URL变量配置编辑器的路径

　　复制代码代码如下：

　　//强烈建议这样配置绝对路径（注意：下面的UETest是虚拟目录的名字）

　　URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

　　至此，一个完整的编辑器实例已经部署到我们的项目中了！在浏览器中试用UE强大的功能，进入运行！

　　四、备注

　　1.引用editor_config.js时，最好在editor_all.js之前加载，否则在某些情况下可能会报错。

　　2.如果你想让编辑器分配初始值，请参考_examples文件中的一些示例代码，或者阅读官方文档。

　　3. 需要注意的是编辑器资源文件的根路径。意思是：以编辑器实例化的页面为当前路径，指向编辑器资源文件的路径（即dialog等文件夹）。针对很多同学在使用编辑器时遇到的各种路径问题，强烈建议大家使用“相对于网站根目录的相对路径”进行配置。“相对于网站的根目录的相对路径”是以斜杠开头的路径，格式为“/UETest/ueditor/”。

　　另外，如果使用了相对路径，比如“ueditor/”（相对于图1的路径结构），如果站点中有多个页面不属于同一级别，需要实例化编辑器，以及引用相同的 UEditor，它可能不是每个页面的 Editor。因此，UEditor 提供了一个根路径，可以为不同页面的编辑器单独配置。具体来说，在需要实例化编辑器的页面顶部编写如下代码。

　　当然，这里的URL需要等于对应的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";

　　例如：根据图1的目录结构

　　如果在 index.aspx 中使用编辑器，则 editor_config.js 中的顶部 var URL 更改为 var URL = "/UETest/ueditor/"

　　五、常见问题

　　1. 乱码

　　如果操作成功出现乱码，请检查您的编码方式。UEditor 引用的脚本有一个编码方法和一个元标记。我下载的是utf-8版本，运行时出现乱码。我删除了引用脚本中的 charset="utf-8" ，没有问题。

　　2.上传图片出错

　　如果上传的图片有红叉，或者上传到一半没有反应。删除net文件夹下的web.config（PHP语言对应php，JSP语言对应jsp）因为使用.net的配置4.0和3.5，会出现问题以下版本，删除不影响。

　　六、最后附上我的代码

　　复制代码代码如下：