UEditor编辑器的使用

1.首先咱们要去官网下载UEditor编辑器，选择语言，这里我用的是php utf-8版本（李昌辉）

2.下载完成以后解压文件，将解压的文件放到咱们的网站目录里面

3.ueditor/utf8-php目录下面有个index.html，也就是官方作的demo

 

 

能够打开这个demo看一下源代码，它的功能很是多，咱们要用的时候选择本身想用的功能使用就能够了。

4.下一步咱们本身建一个页面来测试

5.在页面内引入如下三个JS文件，注意根据本身的文件位置修改路径：

<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>  
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>  
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>  

6.而后在页面要显示编辑器的地方写入如下代码，能够修改宽度高度，注意要取一个惟一id：

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>  

7.在页面最后嵌入JS来实例化出编辑器：

<script type="text/javascript">  
  
    //实例化编辑器  
    //建议使用工厂方法getEditor建立和引用编辑器实例，若是在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例  
    var ue = UE.getEditor('editor');  
  
  
     
    function getContent() {  
        var arr = [];  
        arr.push("使用editor.getContent()方法能够得到编辑器的内容");  
        arr.push("内容为：");  
        arr.push(UE.getEditor('editor').getContent());  
        alert(arr.join("\n"));  
    }  
     
</script>  

其中getContent()函数是咱们取的其中一个功能，就是获取编辑器中的内容（包含html代码）。

8.其中如下这句代码是实例化编辑器，注意id是和第6步里面的id一致

 var ue = UE.getEditor('editor');  

9.若是要修改路径，能够在ueditor.config.js文件中修改

window.UEDITOR_HOME_URL = "/xxxx/xxxx/";  

10.编辑器默认上传的图片在ueditor\php\upload\image里面

11.要修改图片的上传存储路径能够在ueditor\utf8-php\php路径下config.json文件里面修改

 "imagePathFormat": "/zuoye/chajian/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,能够自定义保存路径和文件名格式 */