X-Editable自定义类型后如何触发保存事件实现多字段功能

问题说明 #

在X-Editable中自定义了textareaWithColor类型，集成textarea文本域与颜色选择器后，仅修改颜色选择器的值时，无法触发value2html事件；修改文本域值时则能正常触发。

解决方案 #

核心原因是X-Editable默认只监听主输入控件（textarea）的变化，颜色选择器的变更未被组件感知。需通过以下步骤修复：

1. 统一管理文本与颜色值 #

将文本内容和颜色值合并为一个对象，让X-Editable识别为组件的完整值，而非单独处理两个控件。

2. 监听颜色选择器变更 #

在组件渲染时给颜色选择器添加change事件监听，颜色改变时手动更新组件内部值，触发X-Editable的变更流程。

3. 调整value2html方法 #

同时处理文本内容渲染和单元格背景颜色的设置，确保颜色修改后视图能同步更新。

4. 实现值双向同步方法 #

补充input2value和value2input方法，完成控件值与组件内部值的双向映射；可选实现html2value保证编辑状态连贯性。

修改后的完整代码 #

textareaWithColor.js #

(function ($) {
    "use strict";
    
    var TextareaWithColor = function (options) {
        this.init('textareaWithColor', options, TextareaWithColor.defaults);
    };

    $.fn.editableutils.inherit(TextareaWithColor, $.fn.editabletypes.abstractinput);

    $.extend(TextareaWithColor.prototype, {
        render: function () {
            this.setClass();
            this.setAttr('placeholder');
            this.setAttr('rows');                        
            
            // Ctrl+Enter快捷提交
            this.$input.keydown(function (e) {
                if (e.ctrlKey && e.which === 13) {
                    $(this).closest('form').submit();
                }
            });

            // 监听颜色选择器变更，同步更新组件值
            const $colorPicker = this.$tpl.find('#colorpicker');
            $colorPicker.on('change', () => {
                const currentValue = this.value() || { text: '', color: '#f6b73c' };
                this.value({
                    text: this.$input.val(),
                    color: $colorPicker.val()
                });
            });
        },
        
        value2html: function(value, element) {
            value = value || { text: '', color: '#f6b73c' };
            // 设置单元格背景色
            $(element).css('background-color', value.color);
            // 渲染文本内容
            $(element).html(value.text || '');
        },

        html2value: function(html) {
            // 从DOM中恢复文本和颜色值，保证再次编辑时加载历史状态
            const $element = $(html);
            return {
                text: $element.text(),
                color: $element.css('background-color') || '#f6b73c'
            };
        },

        value2input: function(value) {
            value = value || { text: '', color: '#f6b73c' };
            // 将组件值填充到两个输入控件
            this.$input.val(value.text);
            this.$tpl.find('#colorpicker').val(value.color);
        },

        input2value: function() {
            // 从两个控件收集值，返回统一对象
            return {
                text: this.$input.val(),
                color: this.$tpl.find('#colorpicker').val()
            };
        },
         
        activate: function() {
            this.$input.focus();
        }
    });

    TextareaWithColor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl:'<textarea class="form-control form-control-sm"></textarea> <input type="color" id="colorpicker" name="colorpicker" value="#f6b73c">',
        inputclass: 'input-large',
        placeholder: null,
        rows: 7        
    });

    $.fn.editabletypes.textareaWithColor = TextareaWithColor;

}(window.jQuery));

调用代码调整（可选） #

如果需要将值提交到后端，可在X-Editable配置中添加submit方法处理对象格式的数据：

function addEditFunc(parentSelector, childSelector, placement = 'left', wysihtml5CustomToolbar = false, tpl = null) {
    let config = {
        container: 'body',
        mode: 'inline',
        selector: childSelector,
        url: "",
        title: '编辑内容',
        dataType: 'json',
        escape: false,
        emptytext: '',
        validate: function(value) {
            if ($.trim(value.text) == '') return '内容不能为空';
        },
        // 格式化提交数据
        submit: function(params) {
            params.data = {
                text: params.value.text,
                color: params.value.color
            };
            return params;
        }
    }
    if (placement) config['placement'] = placement;
    if (tpl) {
        config['tpl'] = tpl;
    }

    $(parentSelector).editable(config);

    $(childSelector).hover(
        function() {
            $(this).css('cursor', 'alias');
        },
        function() {
            $(this).css('cursor', 'alias');
        }
    )
}

addEditFunc('.editable-row', 'td.editable', 'down', false);

内容的提问来源于stack exchange，提问作者Hassan Akhlaq