javascript - Ckeditor 自定义插件 - 带单选按钮的对话框

标签 javascript ckeditor wysiwyg ckeditor4.x

我正在尝试在 CKEditor 中构建一个自定义插件,其中选择单选按钮列表中的元素会更改所选元素的类。示例:

选择BIG将添加类bigMEDIUM => medSMALL => sml

我在必须检索所选元素的值的部分被阻止。其他一切都很顺利,我在下面的代码中设法将“MYCLASS”类应用到最接近的 li 标记。

问题:如何获取 CKeditor 的 dialog 元素中所选单选按钮的值?

代码如下:

CKEDITOR.dialog.add( 'MyDialog', function ( editor ) {
    function getListElement( editor, listTag ) {
      var range;
      try {
        range = editor.getSelection().getRanges()[ 0 ];
      } catch ( e ) {
        return null;
      }

      range.shrink( CKEDITOR.SHRINK_TEXT );
      return editor.elementPath( range.getCommonAncestor() ).contains( listTag, 1 );
    }

    return {
      title: 'Size of the element',
      minWidth: 400,
      minHeight: 200,
      contents: [
           {
               id: 'tab-basic',
               label: 'Size of an element',
               elements: [
                {
                  type: 'radio',
                  id: 'bullet-size',
                  label: 'Size of the bullets',
                  items: [ [ 'BIG', 'big' ], [ 'MEDIUM', 'mdm' ],[ 'SMALL', 'sml' ] ],
                  style: 'color: green',
                  'default': 'big',
                },
               ]
           },
       ],
       onOk: function() {

         var editor = this.getParentEditor(),
             element = getListElement( editor, 'ul' ),
             dialog = this,
             config = editor.config, 
             lang = editor.lang,
             style = new CKEDITOR.style(config.coreStyles_alpha);

         editor.attachStyleStateChange(style, function(state) {
           !editor.readOnly;
         });
         count = element.getChildren().count();
         for(k=1; k <= count; k++){
           element.getChild(k-1).setAttribute('class', 'MyClass');
         }
     }
    }
});

最佳答案

这里是获取值的方法。 onOk 函数内部:

var my_variable = this.getVazlueOf(Id_of_you_tab, id_of_the_radio_list);

关于javascript - Ckeditor 自定义插件 - 带单选按钮的对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36004753/

相关文章:

javascript - 无法使用 tablesorter 功能对表进行排序

javascript - 获取多边形的边界(JS)

javascript - 在 CKEditor 中添加语言列表

javascript - 带有 contenteditable 的 TinyMCE

javascript - TinyMCE编辑器工具栏高度不正确?

javascript - 捕获粘贴事件/粘贴的 html - javascript

javascript - 大量对象上的 JSON.parse() 使用的内存超出了应有的范围

javascript - 如何通过 JavaScript 中的回调避免堆栈蠕变?

javascript - 在 CKEditor 中,如何将 "indent"插件更改为 20px 而不是 40px?

javascript - 如何在 Ckeditor 中添加字体和字体大小?