富文本编辑器Summernote增加图片居中(转载)

 

使用了一段时间的Tipask，这是一个非常好的建站程序，现在为Tipask共享一些功能 Tipask使用Summernote编辑器，使用中发现没有图片居中的功能，而对于一般的网页正文部分，图片居中排版会美观一些，所以本次通过修改Summernote，添加图片居中功能。

使用了一段时间的Tipask，这是一个非常好的建站程序，现在为Tipask贡献一些功能

Tipask使用Summernote编辑器，使用中发现没有图片居中的功能，而对于一般的网页正文部分，图片居中排版会美观一些，所以本次通过修改Summernote，添加图片居中功能。

1、修改Summernote.min.js

popover: {
        image: [
          ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
          ['float', ['floatLeft', 'floatRight', 'floatCenter', 'floatNone']],

          ['remove', ['removeMedia']]

在上述代码的Float后面，加上floatCenter

image: {
        image: 'Picture',
        insert: 'Insert Image',
        resizeFull: 'Resize Full',
        resizeHalf: 'Resize Half',
        resizeQuarter: 'Resize Quarter',
        floatLeft: 'Float Left',
        floatRight: 'Float Right',
        floatNone: 'Float None',
	floatCenter: 'Float Center',
        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'
      },

在上述代码中加入floatCenter: 'Float Center'

然后修改：this.addImagePopoverButtons = function () 函数，添加如下代码：

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

还没有结束，需要修改 this.floatMe = this.wrapCommand(function (value) 函数，改为如下代码

this.floatMe = this.wrapCommand(function (value) {
      var $target = $(this.restoreTarget());
	  if(value=='center'){$target.css('margin', '0 auto');$target.css('float', 'none');$target.css('display', 'block')}else{$target.css('float', value);$target.css('margin', '')}
    });

2、修改summernote-zh-CN.min.js

在floatRight:"靠右浮动"，后面添加floatCenter:"水平居中"

OK，Summernote中包含图片居中按钮，如图所示：