javascript - CKEDITOR:文本未突出显示时禁用插件按钮

Question

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

主要插件代码:

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');
    }
});

我的对话代码在这里:

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);
		}
	};
});

当编辑器中没有突出显示的副本时，关于为什么工具栏上的插件图标按钮不会变为非事件状态的任何想法？我可以在控制台中看到 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);
}