如何使summernote的调色板响应?
Posted
技术标签:
【中文标题】如何使summernote的调色板响应?【英文标题】:How to make summernote's colors palette responsive? 【发布时间】:2016-10-01 07:56:17 【问题描述】:我对 Summernote 编辑器中的调色板外观有疑问。 当显示调色板并且我减小浏览器窗口的大小时,我看到一半的颜色没有显示。 我想要的是找到一种方法使调色板具有响应性,以便查看所有颜色。
截图:
问题是这样的:
现在我正在考虑的解决方案(我不知道如何实现它)是让调色板像“图像选项”一样响应。
这是最初的样子:
这就是它的响应方式:
那么,我们如何才能实现这种响应能力?
【问题讨论】:
【参考方案1】:经过这么长时间,我必须在单击颜色插入符号时为调色板实现调整大小功能:
$('div[data-name="color"]').on('click', function (e)
var rt = ($(window).width() - ($('div[data-name="color"]').offset().left + $('div[data-name="color"]').outerWidth())); //get offset on the right
var lt = $('div[data-name="color"]').offset().left; //get offset on the left
var $colorsPalette = $('[data-name="color"] ul.dropdown-menu');
//if language is arabic and the offset on the left is not big enough to display the horizontal palette>> then display a vertical palette
if ((__IsArabic == '1' && lt < 340) || (__IsArabic != '1' && rt < 340)) //smaller size needed
//here I add en empty row to keep distance between the background colors (at the top) and the font colors (bottom)
if (($colorsPalette.find('li').children().length == 2) && !$(this).parent().hasClass('open')) //just opened
//make changes to style to display it correctly
$colorsPalette.find('.btn-group').first().after('<div class="btn-group" style="margin-top: 30px;"></div>');
$colorsPalette.css( 'min-width': '120px', 'height': '470px' );
$colorsPalette.find('li').css( 'width': '120px' );
$colorsPalette.find('li').children().each(function () $(this).css( 'margin-right': '5px', 'margin-left': '5px' ) );
$colorsPalette.find('li').children(":nth-child(2)").width(120);
else
if ($colorsPalette.find('li').children().length == 3)
// undo the changes made (palette back to normal)
$colorsPalette.find('li').children(":nth-child(2)").remove();
$colorsPalette.find('li').children().each(function () $(this).css( 'margin-right': '', 'margin-left': '' ) );
$colorsPalette.find('li').css( 'width': '338px' );
$colorsPalette.css( 'min-width': '340px', 'height': '' );
);
希望对遇到同样问题的人有所帮助
【讨论】:
以上是关于如何使summernote的调色板响应?的主要内容,如果未能解决你的问题,请参考以下文章
如何隐藏和显示 SummerNote 工具栏以响应焦点和模糊事件
django_summernote 所写内容的标签已暴露,未应用