jq富文本插件之wangEditor

开发时经常会用到富文本，今天记录这个wangEditor也是一个非常好用的富文本插件。直接上图使用方法：
1、先是下载插件，这个大家就自行到百度上下载吧
2、引入插件文件

3、然后就在js代码里面定义富文本编辑器了

<script type="text/javascript">
        var E =  = window.wangEditor
  r
        var editor = new E('#editor')
        // 或者 var editor = new E( E( document.getElementByItById('editor') )
           editor.customConfig.uploadImgServServer = '上传图片方法url';

           editor.customConfig.uploadFileNameName = '上传图片文件夹名';
           editor.customConfig.uploadImgMaxSMaxSize = 图片限制大小;
           editor.customConfig.uploadImgHeadHeaders = {
            'Accept' : 'multipart/form-data'
        };
           editor.customConfig.debug=tru=true;
           editor.create()
 ()
        var editor_value=$('.content').html();
           editor.txt.html(edi(editor_value);
    </script>

其中uploadImgServer就是上传文本内容中图片的接口，uploadFileName就是根目录下上传图片的文件夹名了,uploadImgMaxSize就是定义上传图片的最大大小
这些配置填写好后，在需要插入富文本框的地方加入如下代码：

<div id="editor"></div>

div中的id一定要是editor,然后在js里面写editor.create()就可以创建富文本框了,效果如下：

至于上传图片的方法，也贴出来吧。这里要注意的是，返回给富文本的参数一定要正确！也就是error要为0，而data就是图片的url

   function uploadimg(){
        global $host_url;
            //上传图片
        $re=array('errno'=>0,'data'=>"");  
        $allow_file_types = array('jpg','png','gif','jpeg');
        $upload_dir='data/upload/activity_img/';
        if ($_FILES['activity_img']['name'] && $_FILES['activity_img']['size'] > 0) {
            /* 检查文件合法性 */
            if (!get_file_suffix($_FILES['activity_img']['name'], $allow_file_types)) {
                echo('图片格式有误，可上传的图片格式有：jpg,png,jpeg,gif!');
            }
            /* 处理 */
            $name = date('YmdH');
            for ($i = 0; $i < 6; $i++) {
                $name .= chr(mt_rand(97, 122));
            }
            $name .= '.' . end(explode('.', $_FILES['activity_img']['name']));
            $target = ROOT_PATH  . $upload_dir . $name;
            //上传成功
            if (move_upload_file($_FILES['activity_img']['tmp_name'], $target)) {
                $big_img = $upload_dir . $name;
            $re['data'] = $target;
            $data=array();
                $data[]=$host_url.$big_img;
                $re['data']=$data;
        die(json_encode($re));
                }else{
                    $re['statusCode']='-1';
            $re['statusMsg']='上传失败';
            die(json_encode($re));
                }
            }
    }

就这样富文本的功能也基本实现出来了，在富文本中上传图片也会在文本框中显示，wangEditor的使用基本就这样了。