编辑器添加图片居中功能

使用了一段时间的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')}else{$target.css('float', value);$target.css('margin', '')}
    });

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

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

OK,Summernote中包含图片居中按钮,如图所示:

attachments-2017-09-9br4KKkh59bbdb2bb1486.png

  • 发表于 2017-09-15 21:53
  • 阅读 ( 3359 )
  • 分类:二次开发

13 条评论

请先 登录 后评论
LALAL
LALAL

1 篇文章

作家榜 »

  1. sdf_sky 36 文章
  2. 福泽天下 17 文章
  3. 周易金 5 文章
  4. 张子豪 5 文章
  5. 0750.tv 5 文章
  6. 法务网 4 文章
  7. 三叔 3 文章
  8. 师说 3 文章