百度编辑器ueditor的简单使用

首先下载到 ueditor1_4_3-utf8-jsp.rar，连接地址是：http://ueditor.baidu.com/website/。我选择的是utf-8版本的

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

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

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

themes：样式图片和样式文件 php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择php

third-party：第三方插件(包括代码高亮，源码编辑等组件）

editor_all.js：_src目录下所有文件的打包文件（用于发布版本）

editor_api.js: API接口配置文件（开发版本）

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

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

2. 配置editor_config.js中的URL(这一步很重要)，因为我在html文件中测试的时候是没有修改配置文件的信息也可以用，但是用在项目编辑器就无法显示

图片上传路径配置区域是在：ueditor.config.js里URL路径是直接指向了ueditor所在项目中的位置,原因是window.UEDITOR_HOME_URL没有定义，只要在引入script脚本前声明并复制就可以正常使用了

a.  //强烈推荐以这种方式进行绝对路径配置

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

b.

<scripttypescripttype="text/javascript">  
 UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/'; //一定要用这句话，否则你需要去ueditor.config.js修改路径的配置信息  
 UE.getEditor('myEditor');  
 </script> 

完全版：

1、引用两个头文件

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<link href="ueditor/themes/default/_css/ueditor.css" rel="stylesheet" type="text/css" />

2、创建容器，
有3种创建方法，但是官方推荐的是第2种script标签：

a：
<div id="editor" style="width:800px;"></div>
b：
<div style="width:800px;margin:20px auto 40px;">
<script type="text/plain" id="editor" style="width:100%;height:500px;"></script>
</div>
c：
<textarea name="后台取值的key" id="editor">这里写你的初始化内容</textarea>

3、载入编辑器

<script type="text/javascript" charset="utf-8">
        var editor = new baidu.editor.ui.Editor();
        editor.render('editor');  //editor为编辑器容器的id
</script>
或者：
<script type="text/javascript">
        var ue = UE.getEditor('editor',{
      　　toolbars:[
　　　　　　　　['insertimage','attachment','pasteplain','FontSize','link','unlink']
      　　 ],
          wordCount:true, //开启字数统计
          elementPathEnabled : false,//是否启用元素路径，默认是显示
          maximumWords:10000,       //允许的最大字符数
          initialContent:'欢迎使用ueditor!',    //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
          autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          pasteplain:true,  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
     });
 </script>
或者
<script type="text/javascript">
  var ue = UE.getEditor('editor');
</script>

迷你版：
1、加载
<script type="text/javascript" src="./umeditor/umeditor.config.js"></script>
<script type="text/javascript" src="./umeditor/umeditor.min.js"></script>
2、创建容器
<div style="width:800px;margin:20px auto 40px;">
<script type="text/plain" id="editor" style="width:100%;height:500px;"></script>
</div>
3、载入编辑器
<script type="text/javascript" charset="utf-8">
        var um = UM.getEditor('editor');
</script>