Question

正如问题所述，我试图找出是否有办法为彩色弹出窗口添加更多标签或添加更多自定义颜色按钮的方法。我在一个空的froala元素中添加了一个输入，每当你从编辑器改变元素的颜色时，我已经黑了它来改变输入的文本颜色和背景相同，但现在我想要第三个颜色选择器来改变边框颜色。有没有办法呢？

如果有人想知道我是如何破解它的，那么这就是代码。也许我可以在那里做一些改变？

$('.froala-editor-input')
    .keydown(false) // Don't let user type anything
    .froalaEditor({
        key: froalaKey,
        toolbarInline: true,
        charCounterCount: false,
        toolbarVisibleWithoutSelection: true,
        toolbarButtons: [
            'showMoreBtn', 'bold', 'align', 'horGridAlign', 'boxShadow', 'color', 'fontSize', 'fontFamily', '-', 
            'radiusBtn', 'rightToLeft', 'leftToRight', 'undo', 'redo'
        ]
    })
    .on('froalaEditor.commands.after', function (e, editor, cmd, param1, param2) {
        // console.log(e);
        // console.log(editor, cmd, param1, param2);
        if(cmd == 'textColor'){
            $('.ui-selected input').css('color',param1+' !important');

            // remove previous styles
            $('#fr-styles').remove();
            // create a new <style> element, set its ID
            var $style = $('<style>').attr('id', 'fr-styles');
            // create the style string: it's the text node of our <style> element
            $style.text(
                '::placeholder { ' +
                    'color: '+param1+' !important'+
                '}');
            // append it to the <head> of our document
            $style.appendTo('head');
        }
        if(cmd == 'backgroundColor'){
            $('.ui-selected input').css('background',param1);
        }
    });

HTML如下：

<div class="froala-editor-input">
    <input/>
</div>

Froala - 如何在彩色弹出窗口中添加更多标签或添加自定义颜色按钮？

0 个答案: