summernote富文本框提供了插入图片功能,对插入的图片的编辑,提供了“缩放至100%”,“缩放至50%”,“缩放至25%”以及原始大小四个按钮,想要增加“缩放至75%”的功能。本文记录如何增加“缩放至75%”功能(本文将“缩放至75%”按钮命名为resizePrecent75)。
要增加“缩放至75%”功能,需要修改summernote.js(或者summernote.min.js)及summernote-zh-CN.js文件。
1.修改summernote-zh-CN.js文件,在image结构体中增加 resizePrecent75 的定义:
image: {
image: '图片',
insert: '插入图片',
resizeFull: '缩放至 100%',
resizePrecent75: '缩放至 75%',
resizeHalf: '缩放至 50%',
resizeQuarter: '缩放至 25%',
floatLeft: '靠左浮动',
floatRight: '靠右浮动',
floatNone: '取消浮动',
shapeRounded: '形状: 圆角',
shapeCircle: '形状: 圆',
shapeThumbnail: '形状: 缩略图',
shapeNone: '形状: 无',
dragImageHere: '将图片拖拽至此处',
dropImage: '拖拽图片或文本',
selectFromFiles: '从本地上传',
maximumFileSize: '文件大小最大值',
maximumFileSizeError: '文件大小超出最大值。',
url: '图片地址',
remove: '移除图片',
original: '原始图片',
}
2.修改summernote.js(或者summernote.min.js)
(1)在en-US的image的结构体定义中增加resizePrecent75的定义:
image: { image: 'Picture', insert: 'Insert Image', resizeFull: 'Resize full', resizePrecent75: 'Resize 75%', resizeHalf: 'Resize half', resizeQuarter: 'Resize quarter', resizeNone: 'Original size', floatLeft: 'Float Left', 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) 修改Buttons.prototype.addImagePopoverButtons函数定义,Image Size Buttons增加button.resizePrecent75的事件:
找到 this.context.memo('button.resizeFull', function () { 的定义和 this.context.memo('button.resizeHalf', function () { 的定义,在button.resizeFull定义和button.resizeHalf定义之间增加如下代码:
this.context.memo('button.resizePrecent75', function () { return _this.button({ contents: '<span class="note-fontsize-10">75%</span>', tooltip: _this.lang.image.resizePrecent75, click: _this.context.createInvokeHandler('editor.resize', '0.75') }).render(); });
(3)找到image的resize按钮组,增加 resizePrecent75按钮定义:
在'resizeFull' 与 'resizeHalf'之间增加'resizePrecent75'
popover: { image: [ ['resize', ['resizeFull', 'resizePrecent75', 'resizeHalf', 'resizeQuarter', 'resizeNone']], ['float', ['floatLeft', 'floatRight', 'floatNone']], ['remove', ['removeMedia']], ], link: [ ['link', ['linkDialogShow', 'unlink']], ],
至此修改完毕,可以更新发布查看效果。还可以根据需要增加其他缩放比例
相关推荐
标题 "node-v0.8.12-linux-x86.tar.gz" 暗示了这是一个针对Linux x86平台的Node.js版本的压缩文件。Node.js是一个开源、跨平台的JavaScript运行环境,它允许开发者在服务器端运行JavaScript代码,极大地扩展了...
`summernote`是一个流行的开源富文本编辑器,它基于流行的前端框架Bootstrap构建。这款编辑器以其轻量级、强大的功能和易于集成的特点深受开发者喜爱。在网页开发中,用于创建内容丰富的表单、博客文章或者任何需要...
node-v0.8.12-x86
该组件库在v0.8.12版本中包含了丰富的功能和优化,使得开发过程更为便捷。 首先,我们要理解什么是微信小程序。微信小程序是腾讯公司推出的一种轻量级应用形态,它无需下载安装即可使用,极大地方便了用户。开发者...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 ...
- 扩展功能:0.8.12版可能增加了新的分析模块或改进了原有功能,具体可查看官方文档了解详情。 5. 学习资源与社区支持: - Vaspy的官方文档是学习和使用的重要参考,包含了详细的API说明和示例代码。 - 在线社区...
该版本可能包括了新的功能改进、bug修复或者性能优化。 Flask_AutoAPI的核心功能在于自动分析Flask应用的路由和视图函数,生成易于理解和使用的RESTful API文档。它通过解析注释和元数据,生成Markdown格式的文档,...
7. **持续更新**:随着项目的不断发展,开发者会发布新的版本以修复问题、增加新功能,然后重复上述过程,更新PyPI上的版本。 总的来说,ShelfCMS-0.8.12.tar.gz不仅是一个Python库的代码包,更是Python开发者社区...
例如,可能修复了某些已知的bug,提升了数据读取和写入的速度,或者增加了新的查询优化策略。此外,库的维护者可能会引入新的API设计,使得与数据源的交互更加直观和简洁,为开发者提供更好的用户体验。 在实际应用...
Python库是一组预编写的功能,可以被其他Python项目引用和使用,以增加代码复用性和简化开发过程。`django_classified`很可能是这样一个库,专为Django框架提供特定的功能,例如分类广告或内容管理系统。 `.whl`是...
2. **新编码器支持**:可能增加了对当时最新的音频或视频编码格式的支持。 3. **稳定性增强**:修复了可能导致程序崩溃或转换失败的已知问题。 4. **用户界面改进**:可能改进了用户界面的易用性,提供了更直观的...
解压后为mysql-apt-config_0.8.12-1_all.deb文件,ubuntu和debian服务器下安装请参考https://blog.csdn.net/zhangenter/article/details/103475971
"Python库 | sanpy-0.8.12-py3-none-any.whl" 这个标题揭示了我们要讨论的是一个Python库,名为"sanpy",其版本为0.8.12,且该库是以whl(Wheel)格式提供的。在Python世界里,Wheel是一种预编译的Python包格式,它...
《PyPI官网下载Faker-0.8.12-py2.py3-none-any.whl:深入了解Python库Faker》 在Python编程中,我们常常需要生成模拟数据以进行测试、演示或者数据分析。这时,一个名为Faker的Python库就显得尤为重要。Faker是一个...