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

最新推荐文章于 2025-06-26 12:28:30 发布

来自阿兹卡班的囚徒奥斯特洛夫斯基

最新推荐文章于 2025-06-26 12:28:30 发布

阅读量2.8k

点赞数 2

分类专栏：工具类基础

基础同时被 2 个专栏收录

11 篇文章

订阅专栏

工具类

10 篇文章

订阅专栏

本文介绍如何为Summernote编辑器添加图片居中功能，通过修改JS文件实现更美观的网页排版效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用了一段时间的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中包含图片居中按钮，如图所示：