编辑器添加图片居中功能
使用了一段时间的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中包含图片居中按钮，如图所示：
- 发表于 2017-09-15 21:53
- 阅读 ( 12746 )
- 分类：二次开发
