移动端富文本编辑器

目录

• 引入资源

• 快速创建编辑器

• 自定义你的编辑器

引入资源

使用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', //容器                //placeHolder: '请输入内容',                upload:{ //上传配置                   server: '/upload.json', //上传路径                   compress: true, //上传前是否压缩图片                   fileSizeLimit: 2 //限制图片上传大小，单位M                },        });    //请记住下面常用方法---------------------------------------->    //Edr.append( str ); 往编辑器追加内容    //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');                  }              },              //自定义按钮，该按钮只有在编辑IMG标签时才会显示              {                  id: 'rotateImage',                  tag: 'IMG', //指定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>