如何向带有类名列表的CK编辑器添加下拉菜单

<select id="class-selector">
  <option value="">请选择类名</option>
  <option value="class1">类名1</option>
  <option value="class2">类名2</option>
  <option value="class3">类名3</option>
</select>

CKEDITOR.instances.editor1.addCommand('addClass', {
  exec: function(editor) {
    var className = document.getElementById('class-selector').value;
    if (className) {
      editor.insertHtml('<span class="' + className + '">选中的文本</span>');
    }
  }
});

CKEDITOR.instances.editor1.ui.addButton('ClassSelector', {
  label: '添加类名',
  command: 'addClass',
  toolbar: 'insert',
  icon: 'path/to/icon.png'
});

CKEDITOR.replace('editor1', {
  toolbar: [
    // 其他默认的工具按钮
    'ClassSelector'
  ]
});