富文本框summernote(v0.8.12)插入图片功能增加水平居中对齐

summernote富文本框提供了插入图片功能，对插入的图片的编辑，提供了“靠左浮动”，“靠右浮动”，“取消浮动”三个按钮，想要增加“居中对齐”功能。本文记录如何增加“居中对齐”功能。

要增加居中对齐功能，需要修改summernote.js（或者summernote.min.js）及summernote-zh-CN.js文件。

1.修改summernote-zh-CN.js文件，在image结构体中增加    floatCenter: '水平居中' 的定义：

image: {
        image: '图片',
        insert: '插入图片',
        resizeFull: '缩放至 100%',
        resizeHalf: '缩放至 50%',
        resizeQuarter: '缩放至 25%',
        floatLeft: '靠左浮动',
        floatCenter: '水平居中', 
        floatRight: '靠右浮动',
        floatNone: '取消浮动',
        shapeRounded: '形状: 圆角',
        shapeCircle: '形状: 圆',
        shapeThumbnail: '形状: 缩略图',
        shapeNone: '形状: 无',
        dragImageHere: '将图片拖拽至此处',
        dropImage: '拖拽图片或文本',
        selectFromFiles: '从本地上传',
        maximumFileSize: '文件大小最大值',
        maximumFileSizeError: '文件大小超出最大值。',
        url: '图片地址',
        remove: '移除图片',
        original: '原始图片',
}

 2.修改summernote.js（或者summernote.min.js）

 

  （1）在en-US的image的结构体定义中增加floatCenter的定义：

image: {
              image: 'Picture',
              insert: 'Insert Image',
              resizeFull: 'Resize full', 
              resizeHalf: 'Resize half',
              resizeQuarter: 'Resize quarter',
              resizeNone: 'Original size',
              floatLeft: 'Float Left',
              floatCenter: 'Float Center', 
              floatRight: 'Float Right',
              floatNone: 'Remove float',
              shapeRounded: 'Shape: Rounded',
              shapeCircle: 'Shape: Circle',
              shapeThumbnail: 'Shape: Thumbnail',
              shapeNone: 'Shape: None',
              dragImageHere: 'Drag image or text here',
              dropImage: 'Drop image or Text',
              selectFromFiles: 'Select from files',
              maximumFileSize: 'Maximum file size',
              maximumFileSizeError: 'Maximum file size exceeded.',
              url: 'Image URL',
              remove: 'Remove Image',
              original: 'Original'
     }

  （2）修改Editor对象的floatMe属性定义：

           floatMe原定义：

         this.floatMe = this.wrapCommand(function (value) {
              var $target = $$1(_this.restoreTarget());
              $target.toggleClass('note-float-left', value === 'left');
              $target.toggleClass('note-float-right', value === 'right');
              $target.css('float', (value === 'none' ? '' : value));
          });

 

          floatMe修改后的定义：

this.floatMe = this.wrapCommand(function (value) {
              var $target = $$1(_this.restoreTarget());
              $target.toggleClass('note-float-left', value === 'left');
              $target.toggleClass('note-float-right', value === 'right');
              $target.toggleClass('note-float-center', value === 'center'); 
              //$target.css('float', (value === 'none' ? '' : value));
              if(value=='center'){
                  $target.css('margin', '0 auto').css('float', 'none').css('display', 'block')
              }else{
                  $target.css('float', (value === 'none' ? '' : value)).css('margin', '');
              } 
});

  

  （3）修改Buttons.prototype.addImagePopoverButtons函数定义，对Float Buttons增加floatCenter的点击事件，绑定到floatMe：

    找到 this.context.memo('button.floatLeft', function () {  的定义和 this.context.memo('button.floatRight', function () {  的定义，在floatLeft定义和floatRight定义之间增加如下代码：

this.context.memo('button.floatCenter', function () {
              return _this.button({
                  contents: _this.ui.icon(_this.options.icons.alignCenter),
                  tooltip: _this.lang.image.floatCenter,
                  click: _this.context.createInvokeHandler('editor.floatMe', 'center')
              }).render();
}); 

  （4）找到image的float按钮组，增加 floatCenter 按钮定义：

   在'floatLeft' 与 'floatRight'之间增加'floatCenter'

       popover: {
              image: [
                  ['resize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                  ['float', ['floatLeft', 'floatCenter', 'floatRight', 'floatNone']],
                  ['remove', ['removeMedia']],
              ],
              link: [
                  ['link', ['linkDialogShow', 'unlink']],
              ],

 

    至此修改完毕，可以更新发布查看效果。