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

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