本文档不再维护,新版文档请移步

http://doc.eleditor.fixel.cn/

目录


引入资源

使用Eleditor需要手动引入jQuery或者Zepto。除了这个,基本上只需要引入eleditor.min.js就可以

    
    <!-- 引入jQuery -->
    <script src="Eleditor目录/jquery.min.js"></script>

    <!-- 插件核心 -->
    <script src="Eleditor目录/Eleditor.min.js"></script>

    <!-- 如果需要图片上传 -->
    <script src="Eleditor目录/webuploader.min.js"></script>
    

快速创建编辑器

直接实例化Eleditor就可以创建一个编辑器

    
    <div id="articleEditor"></div>

    <script>
    var Edr = new Eleditor({
                el: '#articleEditor', //容器
                upload:{
                   server: '/upload.json', //填写你的后端上传路径
                   fileSizeLimit: 2 //限制图片上传大小,单位M
                },
                //placeHolder: '请输入内容',
        });

    //请记住下面常用方法---------------------------------------->
    //Edr.append( str ); 往编辑器追加内容
    //Edr.getEditNode(); 获取当前选中的编辑节点
    //Edr.getContent(); 获取编辑器内容
    //Edr.getContentText(); 获取编辑器纯文本
    //Edr.destory(); 移除编辑器
    </script>

    
    

到这里,一个基本的编辑器就创建完成了,点击运行试试吧


自定义你的编辑器

Eleditor提供了toolbars参数来扩展所需的功能,如按钮排序,自定义按钮,示例代码如下

    
    <div id="articleEditor"></div>

    <script>
    var Ed = new Eleditor({
      el: '#contentEditor',
            upload:{
              server: '/upload.json',
              compress: false,
              fileSizeLimit: 2
            },
            toolbars: [
              'insertText',
              'editText',
              'insertImage',
              'insertLink',
              'deleteBefore',
              'deleteAfter',
              'insertHr',
              'deleteThis',

              //自定义一个按钮
              {
                  id: 'changeIndent',
                  tag: 'P', //指定P标签操作,可用逗号分隔多个标签
                  name: '缩进',
                  handle: function(select, controll){//回调返回选择的dom对象和控制按钮对象
                    var _$ele = $(select),
                      _$controll = $(controll);
                    _$controll.html(_$ele.css('text-indent') != '0px' ? '缩进' : '还原缩进');
                    _$ele.css('text-indent', _$ele.css('text-indent') == '0px' ? '5em' : '0px');
                  }
              },
              {
                  id: 'rotateImage',
                  tag: 'IMG',
                  name: '反转图片',
                  handle: function(select, controll){
                    var _$ele = $(select),
                      _$controll = $(controll);
                    if( _$ele.attr('transform-rotate') != '180deg' ){
                      _$controll.html('还原图片');
                        _$ele.attr('transform-rotate', '180deg').css('transform', 'rotate(180deg)');
                    }else{
                      _$controll.html('反转图片');
                      _$ele.removeAttr('transform-rotate').css('transform', 'rotate(0)');
                    }
                  }
              },

              'cancel',
            ]
    });
    </script>

    
    

关于图片上传

Eleditor内部上传封装了百度Webuploader插件,只需要配置upload参数即可,后端返回带url的JSON数据,格式参照以下代码,本站不提供后端处理逻辑,请自行编写

    
    //上传成功业务返回
    {
      "status": 1,
      "url": "http://image.uisdc.com/wp-content/uploads/2017/05/homestarrunner.jpg"
    }

    //上传失败业务返回 status: 1
    {
      "status": 0,
      "msg": "服务器磁盘不足"
    }
    

Eleditor的api并不复杂,看到这里相信你学会了如何使用了,如果在使用中碰到问题,请添加Eleditor官方交流群进行交流