2
我有一個CKEDITOR插件，在編輯器中沒有選定副本時無法禁用。現在，用戶可以在編輯器中單擊按鈕而沒有任何突出顯示的文本。我想修改它，以便插件按鈕僅在編輯器中突出顯示副本時纔有效。我按照建議here，但它不起作用。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) {
\t return {
\t \t // Basic properties of the dialog window: title, minimum size.
\t \t title: 'Call to Action',
\t \t minWidth: 400,
\t \t minHeight: 200,
\t \t // Dialog window content definition.
\t \t contents: [{
\t \t \t // Definition of the Basic Settings dialog tab (page).
\t \t \t id: 'tab-basic',
\t \t \t label: 'Basic Settings',
\t \t \t // The tab content.
\t \t \t elements: [{
\t \t \t \t \t // Text input field for the Call to Action text.
\t \t \t \t \t type: 'text',
\t \t \t \t \t id: 'cta',
\t \t \t \t \t label: 'Call to Action',
\t \t \t \t \t // Validation checking whether the field is not empty.
\t \t \t \t \t validate: CKEDITOR.dialog.validate.notEmpty("Call to Action field cannot be empty.")
\t \t \t \t },
\t \t \t \t {
\t \t \t \t \t // Text input field for the link text.
\t \t \t \t \t type: 'text',
\t \t \t \t \t id: 'url',
\t \t \t \t \t label: 'URL',
\t \t \t \t \t // Validation checking whether the field is not empty.
\t \t \t \t \t validate: CKEDITOR.dialog.validate.notEmpty("URL field cannot be empty.")
\t \t \t \t }
\t \t \t ]
\t \t }],
\t \t // method invoked when the dialog button is clicked
\t \t onShow: function() {
\t \t \t var element = editor.getSelection();
\t \t \t var link = CKEDITOR.plugins.link; \t \t \t
\t \t \t var _this = this.getParentEditor();
\t \t \t var CTAhref = link.getSelectedLink(_this);
\t \t \t this.setValueOf('tab-basic', 'cta', element.getSelectedText().toString());
\t \t \t
\t \t \t if (CTAhref != '' && CTAhref !== null) {
\t \t \t \t this.setValueOf('tab-basic', 'url', CTAhref.$.href);
\t \t \t }
\t \t },
\t \t // This method is invoked once a user clicks the OK button, confirming the dialog.
\t \t onOk: function() {
\t \t \t var dialog = this;
\t \t \t var CTA = editor.document.createElement('a');
\t \t \t CTA.setAttribute('href', dialog.getValueOf('tab-basic', 'url'));
\t \t \t CTA.setAttribute('class', 'btn btn-special--lg');
\t \t \t CTA.setText(dialog.getValueOf('tab-basic', 'cta'));
\t \t \t editor.insertElement(CTA);
\t \t }
\t };
});爲什麼插件圖標任何想法當編輯器中沒有突出顯示副本時，工具欄上的按鈕不會變爲不活動狀態？我可以在控制檯中看到CKEDITOR.dom.range.collapsed正在TRUE/FALSE之間切換，具體取決於文本是否高亮顯示。這只是不禁用按鈕。