Question

我的CKEDITOR插件需要创建<select size="15"><option ...></select>，但size属性is not directly supported by the creation mechanism。我在创建之后尝试了各种添加size属性的方法，但到目前为止还没有任何乐趣。这就是我所拥有的; select已创建，但未获得size属性。

CKEDITOR.dialog.add('macrosDialog', function(editor) {
  return {
    // Basic properties of the dialog window: title, minimum size.
    title: 'Cadenza Macros',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 400,
    minHeight: 200,

    // Dialog window contents definition.
    contents: [
      {
        // Definition of the Basic Settings dialog tab (page).
        id: 'tab-basic',
        label: 'Basic Settings',

        // The tab contents.
        elements: [
          {
              type: 'select',
              id: 'groups',
              name: 'groups',
              label: 'Groups',
              style: "height: 300",
              items: [ [ 'Core Scala' ], [ 'Create Courses with Micronautics Cadenza' ], [ 'Java / Scala Interoperability' ], [ 'Play Framework' ] ],
              'default': 'Play Framework'
          },
          {
            // Text input field for the macro title (explanation).
            type: 'text',
            id: 'macroComment',
            label: 'Comment',
            validate: CKEDITOR.dialog.validate.notEmpty("Explanation field cannot be empty")
          }
        ]
      }
    ],

    onLoad: function(e) {
      var groups = editor.document.getElement("groups");
      groups.setAttribute("size", 15);
      //$("#groups").setAttr("size", 15);
    },

    onChange: function(e) {
      alert('Group: ' + this.getValue());
    },

    // This method is invoked once a user clicks the OK button, confirming the dialog.
    onOk: function() {
      // The context of this function is the dialog object itself.
      // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
      var dialog = this;

      // Creates a new <abbr> element.
      var abbr = editor.document.createElement('abbr');

      // Set element attribute and text, by getting the defined field values.
      abbr.setAttribute('title', dialog.getValueOf('tab-basic', 'title'));
      abbr.setText(dialog.getValueOf('tab-basic', 'abbr'));

      // Finally, inserts the element at the editor caret position.
      editor.insertElement(abbr);
    }
  };
});

Answer 1

我使用html元素插入我想要的内容：

contents: [
  {
    id: 'macrosDialog',
    label: 'Basic Settings',

    // The tab contents.
    elements: [
      {
        type: 'hbox',
        id: 'lists',
        //style: "vertical-align: top",
        widths: [ '25%', '25%', '25%', '25%' ],
        children: [
          {
            type: 'html',
            id: 'groups',
            name: 'groups',
            html: '<select size="15"></select>'
          },{
            type: 'html',
            id: 'courses',
            name: 'courses',
            html: '<select size="15"></select>'
          },{
            type: 'html',
            id: 'sections',
            name: 'sections',
            html: '<select size="15"></select>'
          },{
            type: 'html',
            id: 'lectures',
            name: 'lectures',
            html: '<select size="15"></select>'
          },
        ],
        onLoad: function(data) {
          var dialog = this.getDialog();
          var groups = dialog.getContentElement('macrosDialog', 'lists', 'groups');
          console.log(groups);
          var courses = dialog.getContentElement('macrosDialog', 'lists', 'courses');
          console.log(courses);
          var sections = dialog.getContentElement('macrosDialog', 'lists', 'sections');
          console.log(sections);
          var lectures = dialog.getContentElement('macrosDialog', 'lists', 'lectures');
          console.log(lectures);
        }
      }
    ]
  }
]

创建大小为＆gt; 1 CKEDITOR插件的选择标记

1 个答案: