ckeditor - 如何在对话框中将css类添加到input元素

Question

我正在编辑链接插件下的CKEditor，link.js下的插件。我添加了一个文本输入字段，并尝试将css类分配给输入但不能这样做。这是我添加的代码。

{
    type : 'text',
    class: 'myClassName',
    label : 'myInputLabel'
}

我还尝试了className，inputClass，inputStyle而不是class，但都没有效果。

我需要这样的东西

<input class="cke_dialog_ui_input_text myClassName" type="text" aria-labelledby="cke_102_label">

使用jQuery的解决方法

似乎CKEditor不允许你直接将className分配给input元素，但是它将它分配给input元素的第三级父div

<div class='cke_dialog_ui_text myClassName'>
   <div>
      <div>
         <input class='cke_dialog_ui_input_text'>
      </div>
   </div>
</div>

我做了什么让它发挥作用

{
    type : 'text',
    className : 'myClassName',
    label : 'myInputLabel',
    onLoad : function () {
        var myid = this.getElement().getId();
        var that = this;
        var thatobj = $("#" + myid);
        var obj = $(".cke_dialog_ui_input_text", thatobj);

        //Have fun with your "obj" text input
        //variable "that" is good to have because you may need it inside of jQuery plugins like that.getDialog().setValueOf('info', 'url', 'blahblah');
    }
 }

Answer 1

className应该适合您according to the documentation。仔细检查您的代码。否则，请尝试在dialogDefinition事件中弄乱您的字段。查看我的previous answer。

Answer 2

{
  type: 'text',
  label: 'My text input',
  onLoad : function () {
    this.getInputElement().$.classList.add('class-for-my-input');
  }
}