Question

我有一个CKEDITOR插件，我在编辑器中没有选定的副本时无法禁用。现在，用户可以单击编辑器中没有任何突出显示文本的按钮。我想修改它，以便插件按钮仅在编辑器中突出显示副本时才处于活动状态。我已按照here的建议，但它不起作用。

主要插件代码：

＆＃13;

CKEDITOR.plugins.add('cta', {
    icons: 'cta',
    init: function (editor) {

        // Funciton depending on editor selection (taken from the scope) will set the state of our command.
        function RefreshState() {
            console.log('RefreshState');
            var editable = editor.editable(),
                // Command that we want to control.
                command = editor.getCommand('source'),
                range,
                commandState;

            if (!editable) {
                // It might be a case that editable is not yet ready.
                console.log("editable not ready yet");
                return;
            }

            // We assume only one range.
            range = editable.getDocument().getSelection().getRanges()[0];
            console.log(`range: `);
            console.log(range);

            // The state we're about to set for the command.
            commandState = (range && !range.collapsed) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;

            console.log('commandState');
            console.log(commandState);
            command.setState(commandState);
        }

        // We'll use throttled function calls, because this event can be fired very, very frequently.
        var throttledFunction = CKEDITOR.tools.eventsBuffer(250, RefreshState);

        // Now this is the event that detects all the selection changes.
        editor.on('selectionCheck', throttledFunction.input);

        // You'll most likely also want to execute this function as soon as editor is ready.
        editor.on('instanceReady', function (evt) {
            // Also do state refresh on instanceReady.
            RefreshState();
        });



        editor.addCommand('ctabtn', new CKEDITOR.dialogCommand('ctaDialog'));
        editor.ui.addButton('cta', {
            label: 'Insert Call to Action button',
            command: 'ctabtn',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add('ctaDialog', this.path + 'dialogs/cta.js');
    }
});

＆＃13;

我的对话框代码在这里：

＆＃13;

CKEDITOR.dialog.add('ctaDialog', function (editor) {
	return {

		// Basic properties of the dialog window: title, minimum size.
		title: 'Call to Action',
		minWidth: 400,
		minHeight: 200,

		// Dialog window content definition.
		contents: [{
			// Definition of the Basic Settings dialog tab (page).
			id: 'tab-basic',
			label: 'Basic Settings',

			// The tab content.
			elements: [{
					// Text input field for the Call to Action text.
					type: 'text',
					id: 'cta',
					label: 'Call to Action',
					// Validation checking whether the field is not empty.
					validate: CKEDITOR.dialog.validate.notEmpty("Call to Action field cannot be empty.")
				},
				{
					// Text input field for the link text.
					type: 'text',
					id: 'url',
					label: 'URL',
					// Validation checking whether the field is not empty.
					validate: CKEDITOR.dialog.validate.notEmpty("URL field cannot be empty.")
				}
			]
		}],

		// method invoked when the dialog button is clicked
		onShow: function () {
			var element = editor.getSelection();

			var link = CKEDITOR.plugins.link;			
			var _this = this.getParentEditor();
			var CTAhref = link.getSelectedLink(_this);

			this.setValueOf('tab-basic', 'cta', element.getSelectedText().toString());
			
			if (CTAhref != '' && CTAhref !== null) {
				this.setValueOf('tab-basic', 'url', CTAhref.$.href);
			}
		},

		// This method is invoked once a user clicks the OK button, confirming the dialog.
		onOk: function () {
			var dialog = this;
			var CTA = editor.document.createElement('a');
			CTA.setAttribute('href', dialog.getValueOf('tab-basic', 'url'));
			CTA.setAttribute('class', 'btn btn-special--lg');
			CTA.setText(dialog.getValueOf('tab-basic', 'cta'));
			editor.insertElement(CTA);
		}
	};
});

＆＃13;

当编辑器中没有突出显示副本时，有关为什么工具栏上的插件图标按钮不会变为非活动状态的任何想法？我可以在控制台中看到CKEDITOR.dom.range.collapsed在TRUE / FALSE之间切换，具体取决于文本是否突出显示。它只是没有禁用按钮。

Answer 1

如上所述，建议的处理方法对我不起作用。如果在编辑器中进行了选择，那么正在使用range.collapsed返回真值。有了这个，我转向使用Jquery来处理剩下的事情。

// Hacky. But it gets the job done.
// a.cke_button.cke_button__cta.cke_button_off is the selector for my toolbar button.
// The onclick function listed was pulled from looking at the CKeditor functions
// to initiate my plugins modal.
// The setting of the "onclick" prop to null is needed to override the modal onclick
// binding when there is no selection.

range = editable.getDocument().getSelection().getRanges()[0];

if (range.collapsed === false) {
  $('a.cke_button.cke_button__cta.cke_button_off').attr("onclick", 'CKEDITOR.tools.callFunction(83,this);return false;');
  $('a.cke_button__cta').toggleClass('cta_button_disabled');
} else {
  $('a.cke_button.cke_button__cta.cke_button_off').prop("onclick", null);
}

CKEDITOR：当文本未突出显示时禁用插件按钮

1 个答案: