使用Ckeditor版本4.4.7选择图像时,将值(advRel)设置为对话框链接

时间:2015-02-16 23:01:28

标签: javascript jquery ckeditor

当我从图像对话框中选择图像时,我使用dialogDefinition(如标题,Alt,链接,类,宽度,VSpace,HSpace)填充所有需要的输入信息。

我的问题是我还想在使用 Image 对话框的dialogDefinition期间填充 Link 对话框中链接href的关系和标题字段。< / p>

这是我的代码:

CKEDITOR.on('dialogDefinition', function(ev) {
    var editor = ev.editor;
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image') {
        var advancedTab = dialogDefinition.getContents( 'advanced' );
        var classField = advancedTab.get( 'txtGenClass' );
        classField['default'] = 'thumbnail col-xs-11 col-sm-4'; // Add class

        var infoTab = dialogDefinition.getContents( 'info' );
        var field = infoTab.get('txtAlt');
        field['label'] = "Image caption"; // Change label text
        field = infoTab.get('txtBorder');
        field['label'] = "Border size"; // Change label text
        field = infoTab.get('txtHSpace');
        field['label'] = "Left/Right space"; // Change label text
        field = infoTab.get('txtVSpace');
        field['label'] = "Up/Down space"; // Change label text

        var txtUrl = infoTab.get( 'txtUrl' ); // Now fill the url link into Link Tab
        txtUrl['onMyEvent'] = txtUrl['onChange']; // Save current event onChange to use later because if not then the new onChange function will remove the old event and got an error into the functionality of the editor
        txtUrl['onChange'] = function(evt){
            var dialog = CKEDITOR.dialog.getCurrent();
            $(this).trigger( 'onMyEvent' ); // Fire the saved event and continue fill data
            dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
            dialog.getContentElement('info', 'txtHSpace').setValue(10);
            dialog.getContentElement('info', 'txtVSpace').setValue(10);
            dialog.getContentElement('info', 'cmbAlign').setValue('left');
            dialog.getContentElement('info', 'txtWidth').setValue('');
            dialog.getContentElement('info', 'txtHeight').setValue('');

            var extEle = editor.name.substr(editor.name.length - 6); // Get last 6 characters for current editor
            var titlePageSection = $("input[id$='" + extEle + "']"); // Use Jquery selector to find my title input ( Editor name = my_editor_dummy_extension and title input = my_title_dummy_extension
            var titleValueEle = "";
            if( titlePageSection.length > 0 ) {
                titleValueEle = titlePageSection.val(); // If title id found then get the value
            }
            dialog.getContentElement('info', 'txtAlt').setValue(titleValueEle); // Fill value
            dialog.getContentElement('advanced', 'txtGenLongDescr').setValue(titleValueEle);
            dialog.getContentElement('advanced', 'txtGenTitle').setValue(titleValueEle);


            // Code above running without any problem and do what I need

            // Now make change on link dialog (title)

            // Here is my problem

            // I want also fill title of href and relationship field from Link Dialog
            // But nothing work and did't find any way to how handle the link dialog and make my changes ( I create new dialog , create new definition, use open dialog link... )

            // I want make this code below work ( 3 lines below )
            // Note: dialogLinkObj is created using new dialog, new definition...)

            //dialogLinkObj.getContentElement('advanced', 'advRel').setValue('Shadowbox[' + n + ']');
            //dialogLinkObj.getContentElement('advanced', 'advTitle').setValue(titleValueEle);
            //dialogLinkObj.getContentElement('target', 'linkTargetType').setValue('notSet');

            // I want this because I want forced create a link around the image dynamic after any inserted image and I don't want use : instanceReady: function() { this.dataProcessor.htmlFilter.addRules or this.dataProcessor.dataFilter.addRules
        }
    }

    if (dialogName == 'link') {
        var targetTab = dialogDefinition.getContents( 'target' );
        var target = targetTab.get( 'linkTargetType' );
        target['default'] = '_blank';
    }
});

0 个答案:

没有答案