如何使 summernote 的调色板具有响应性？

Question

我对 summernote 编辑器中的调色板外观有疑问。当显示调色板并且我减小浏览器的大小 window 时，我看到一半的颜色没有显示。 我想要的是找到一种使调色板响应的方法，以便看到所有颜色。

截图：

问题是这样的：

现在 我正在考虑的解决方案（我不知道如何实施）是让调色板像 "image options" 一样响应。

这是最初的样子：

这就是它响应的方式：

那么，我们如何才能实现这种响应能力呢？？

Answer 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 的调色板具有响应性？

How to make summernote's colors palette responsive?

css

editor

colors

responsive-design

summernote