如何在CKEditor小部件数据函数中访问子元素

Question

有没有办法在CKEditor中访问子元素

 editor.widgets.add( 'mytest', {

            button: showButtons ? 'Add left column box' : undefined,
            dialog: 'mytest',
            template:
                '<div class="span_wrapper col_1_2">' +
                    '<div class="span equal edit1 span1_3 wow bounceIn"><p class="nopadding"><img src="/sites/all/themes/cefort/images/img450_375.png" /></p></div>' +
                    '<div class="span equal edit2 span2_3 wow bounceIn"><h2>Sub Title</h2><p>Content</p></div>' +
                '</div>',
            init: function() {
                var bgc = this.element.getStyle( 'background-color' );
                if ( bgc )
                    this.setData( 'bgc', bgc );
            }, 
            data: function() {
                //HOW TO ACCESS .edit1 and .edit2 
                //I want to set a style to these element
                //I know how to access .span_wrapper but not his child

                //To access .span_wrapper is like this 
                //this.element.setStyle( 'background-color', '#c8c8c8' );
            },   
            editables: {
                col1: {
                    selector: '.edit1',
                    allowedContent: allowedText
                },
                col2: {
                    selector: '.edit2',
                    allowedContent: allowedText
                }
            },

            allowedContent: allowedFull,

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'col_1_2' );
            }

        } );

我需要在子元素.edit1和.edit2

上设置背景颜色

        data: function() {
            //HOW TO ACCESS .edit1 and .edit2 
            //I want to set a style to these element
            //I know how to access .span_wrapper but not his child

            //To access .span_wrapper is like this 
            //this.element.setStyle( 'background-color', '#c8c8c8' );
        },   

我该怎么做

Answer 1

有两种有用的方法可以实现这一点。

• this.element.find（选择器）
  • @return CKEDITOR.dom.nodeList
• this.element.findOne（选择器）
  • @return CKEDITOR.dom.element或未定义

两者都将css选择器作为参数。

data: function() {

    // find and return multiple children

    var edits = this.element.find( '.edit1, .edit2' );
    for (var i=0; i<edits.count(); i++) {
        edits.getItem(i).setStyle( 'background-color', '#c8c8c8' );
    }

    // find and return only one child

    var edit1 = this.element.findOne( '.edit1' );
    if (edit1) {
        edit1.setStyle( 'background-color', '#c8c8c8' );
    }

    var edit2 = this.element.findOne( '.edit2' );
    if (edit2) {
        edit2.setStyle( 'background-color', '#c8c8c8' );
    }
}