如何在jointJS/Rappid中自动大写检查器文本字段

// 创建自定义元素
var CustomElement = joint.shapes.basic.Rect.extend({
  markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',

  defaults: joint.util.deepSupplement({
    type: 'custom.Element',
    attrs: {
      'rect': { fill: 'white', stroke: 'black' },
      'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
    }
  }, joint.shapes.basic.Rect.prototype.defaults),

  initialize: function() {
    joint.shapes.basic.Rect.prototype.initialize.apply(this, arguments);

    // 添加事件监听器
    this.on('change:attrs', function() {
      var text = this.get('attrs').text.text;
      
      // 将文本字段内容转换为大写
      var upperCaseText = text.toUpperCase();
      
      // 更新文本字段内容
      this.attr('text/text', upperCaseText);
    }, this);
  }
});

// 创建画布
var graph = new joint.dia.Graph();

// 创建画布视图
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  model: graph,
  width: 800,
  height: 600
});

// 创建自定义元素实例
var customElement = new CustomElement({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    text: { text: 'Hello World' }
  }
});

// 将自定义元素添加到画布中
graph.addCell(customElement);