ckeditor-如何将css类添加到对话框中的输入元素中

ckeditor - how to add css class to input element in dialog

本文关键字：对话框 输入 元素 添加 css ckeditor-      更新时间：2023-09-26

我正在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直接分配给输入元素，但它将其分配给输入元件的第三级父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');
    }
 }
根据文档，

className应该适合您。仔细检查您的代码。否则，请尝试在dialogDefinition事件上扰乱您的字段。请参阅我以前的回答。

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