`
zweichxu
  • 浏览: 134644 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

富文本框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']],
              ],

 

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

1
0
分享到:
评论

相关推荐

    node-v0.8.12-linux-x86.tar.gz

    标题 "node-v0.8.12-linux-x86.tar.gz" 暗示了这是一个针对Linux x86平台的Node.js版本的压缩文件。Node.js是一个开源、跨平台的JavaScript运行环境,它允许开发者在服务器端运行JavaScript代码,极大地扩展了...

    summernote编辑器

    `summernote`是一个流行的开源富文本编辑器,它基于流行的前端框架Bootstrap构建。这款编辑器以其轻量级、强大的功能和易于集成的特点深受开发者喜爱。在网页开发中,用于创建内容丰富的表单、博客文章或者任何需要...

    node-v0.8.12-x86.msi

    node-v0.8.12-x86

    Lin UI微信小程序组件库 v0.8.12.zip

    该组件库在v0.8.12版本中包含了丰富的功能和优化,使得开发过程更为便捷。 首先,我们要理解什么是微信小程序。微信小程序是腾讯公司推出的一种轻量级应用形态,它无需下载安装即可使用,极大地方便了用户。开发者...

    node-v0.8.12.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-x64.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-darwin-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-sunos-x86.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-darwin-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-linux-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    node-v0.8.12-sunos-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...

    vaspy-0.8.12版本安装包下载

    - 扩展功能:0.8.12版可能增加了新的分析模块或改进了原有功能,具体可查看官方文档了解详情。 5. 学习资源与社区支持: - Vaspy的官方文档是学习和使用的重要参考,包含了详细的API说明和示例代码。 - 在线社区...

    PyPI 官网下载 | flask_autoapi-0.8.12.tar.gz

    《PyPI上的Flask_AutoAPI 0.8.12版本详解》 在Python的Web开发领域,Flask框架以其轻量级、灵活的特点深受开发者喜爱。而Flask_AutoAPI则是为Flask应用程序提供自动化API文档生成的扩展,大大简化了API接口的文档...

    PyPI 官网下载 | ShelfCMS-0.8.12.tar.gz

    7. **持续更新**:随着项目的不断发展,开发者会发布新的版本以修复问题、增加新功能,然后重复上述过程,更新PyPI上的版本。 总的来说,ShelfCMS-0.8.12.tar.gz不仅是一个Python库的代码包,更是Python开发者社区...

    PyPI 官网下载 | django_classified-0.8.12-py3-none-any.whl

    Python库是一组预编写的功能,可以被其他Python项目引用和使用,以增加代码复用性和简化开发过程。`django_classified`很可能是这样一个库,专为Django框架提供特定的功能,例如分类广告或内容管理系统。 `.whl`是...

    Python库 | metaphor-connectors-0.8.12.tar.gz

    《Python库:深入理解metaphor-connectors-0.8.12》 在Python的广阔天地里,库是开发者的重要工具,它们提供了丰富的功能,让编程变得更加高效和便捷。今天我们将聚焦于一个名为"metaphor-connectors"的Python库,...

    mysql-apt-config_0.8.12-1_all.zip

    解压后为mysql-apt-config_0.8.12-1_all.deb文件,ubuntu和debian服务器下安装请参考https://blog.csdn.net/zhangenter/article/details/103475971

    MediaCoder0.8.12(5260)32bit.rar

    2. **新编码器支持**:可能增加了对当时最新的音频或视频编码格式的支持。 3. **稳定性增强**:修复了可能导致程序崩溃或转换失败的已知问题。 4. **用户界面改进**:可能改进了用户界面的易用性,提供了更直观的...

    Python库 | sanpy-0.8.12-py3-none-any.whl

    "Python库 | sanpy-0.8.12-py3-none-any.whl" 这个标题揭示了我们要讨论的是一个Python库,名为"sanpy",其版本为0.8.12,且该库是以whl(Wheel)格式提供的。在Python世界里,Wheel是一种预编译的Python包格式,它...

    PyPI 官网下载 | Dtautils-0.8.12-py2.py3-none-any.whl

    **PyPI 官网下载 | Dtautils-0.8.12-py2.py3-none-any.whl** PyPI(Python Package Index)是Python官方的软件仓库,它提供了大量的Python库供用户下载和使用。在Python开发中,通过PyPI获取和安装库是常见的操作。...

Global site tag (gtag.js) - Google Analytics