we are trying to implement CKEditor 5 into our apps and we are struggling a bit with docs.
We want to disable drop event into an editing area or control it somehow. Is there an event for that?
We were trying editor.model.document.on('clipboardInput') or editor.model.document.on('dragover') without any luck. These events are not fired.
You need to listen to the dragover and drop events on the view layer instead of on the model.
I prepared a simple function that can be loaded as a plugin to CKEditor 5 which cancels these events:
/**
* Cancel the `drop` and `dragover` events.
*
* #param {module:core/editor/editor~Editor} editor
*/
function cancelDropEvents( editor ) {
// High priority means that the callbacks below will be called before other CKEditor's plugins.
editor.editing.view.document.on( 'drop', ( evt, data ) => {
// Stop executing next callbacks.
evt.stop();
// Prevent the default event action.
data.preventDefault();
}, { priority: 'high' } );
editor.editing.view.document.on( 'dragover', ( evt, data ) => {
evt.stop();
data.preventDefault();
}, { priority: 'high' } );
}
You can check how it works online – https://jsfiddle.net/pomek/qz0o9ku0/.
Related
I am aware of the following http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template
but it is not what I need.
I need to display a custom modal dialog for task edition that is used in other parts of the app instead of the default kendo dialog.
Here's a possible way:
Implement a handler for the edit event and use e.preventDefault() to cancel kendo's built-in handling. This will prevent their dialog(or the template) from showing.
Now you show your own dialog(however you need to do that) and push in the GanttTask data passed to the edit event.
When your dialog is closed, you push the values of the edited data into the GanttTask...this is important! Since you cancelled the built-in functionality, it is now your responsibility to update the underlying data model.
Example edit handler:
edit: function(e) {
// Cancel the built-in editing functionality
e.preventDefault();
var editResult = showMyDialog(e.task);
if (editResult.ok) {
// User clicked OK instead of Cancel...or whatever mechanism your dialog uses.
e.task.set("title", editResult.data.title);
// other data...
}
}
Example custom dialog:
function showMyDialog(task) {
// Fetch/show your actual window, push in the data from the GanttTask
alert("This is my window: " + task.title);
// Simulate user editing of GanttTask.
var editedTitle = "NeW tAsK!";
// other data...
return {
ok: true, // or false if user clicked cancel.
data: {
title: editedTitle
// other data...
}
};
}
Simple demo: http://dojo.telerik.com/#Stephen/apEYa
I try to get the onSelectionChange event for ckeditor.
When you select something it ckeditor rise correctly the event, but if you select something else in the same paragraph the event is not raised.
Is there a way to make creditor rise onSelectionChange event any time i select some text. ?
Any advice on solve this issue ?
Thanks
The answer is in the API documentation:
Fired when selection inside editor has been changed. Note that this event is fired only when selection's start element (container of a selecion start) changes, not on every possible selection change. Thanks to that selectionChange is fired less frequently, but on every context (the elements path holding selection's start) change.
You can observe all mouse and keyboard actions though (JSFiddle):
function logSelection() {
console.log( this.getSelection() );
}
CKEDITOR.replace( 'editor', {
on: {
contentDom: function() {
this.document.on( 'mouseup', logSelection, this );
this.document.on( 'keyup', logSelection, this );
}
}
} );
I see in CKEitor 4.5 there is a new drag and drop system. I would like to drop external DIVs or SPANs into my CkEditor and have them turn into "placeholders" "fake objects" or "protected source" objects. I.e., the dropped object should turn into arbitrary HTML that's related to the content.
The available demos seem to be about uploading content, but this is different and I'd appreciate a demo ...
Yes, it is possible. CKEditor 4.5 is in the beta phase at the moment, what means there is no tutorials yet, but here is sample how to do it.
First, you need to mark your data on dragstart. You can simple set text:
dragstart( evt ) {
evt.dataTransfer.setData( 'text', 'foo' );
} );
But then you need to make your text unique, otherwise every time someone drop foo it will be recognize as your container.
I prefer to use CKEditor data transfer facade, which let you use custom data type on every browser (including IE 8+):
dragstart( evt ) {
var evt = { data: { $: $evt } }; // Create CKEditor event.
CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
evt.data.dataTransfer.setData( 'mydatatype', true );
// Some text need to be set, otherwise drop event will not be fired.
evt.data.dataTransfer.setData( 'text', 'x' );
} );
Then in the CKEDITOR you can recognize this data and set your html to be dropped. You can replace dropped content whit whatever you need. Simple set text/html data in the drop event:
editor.on( 'drop', function( evt ) {
var dataTransfer = evt.data.dataTransfer;
if ( dataTransfer.getData( 'mydatatype' ) ) {
dataTransfer.setData( 'text/html', '<div>Bar</div>' );
}
} );
You can find working sample here: http://jsfiddle.net/oqzy8dog/3/
I'm newbie to CKEDITOR. It might sound worthless to some of you to answer this questions. But, I'm struggling to find a solution for my problem for the past few hours.
Aim :
I would like to add an event listener to particular kind of element ( For ex : span )
What i tried :
I used contentDom event thrown by CKEDITOR, to add the event listener to span elements.
Problem :
However, Adding event listener to span will be applicable for the span which are currently available in editor. But, Not for the elements ( span ) which will be created by the user in future. What should i do now?
Use the benefits of event bubbling [1, 2]. Attach the listener to the topmost element of the editor (editable) and filter out the events:
CKEDITOR.replace( 'editor1', {
on: {
contentDom: function() {
this.editable().on( 'click', function( evt ) {
var target = evt.data.getTarget();
if ( target.is( 'span' ) ) {
console.log( 'clicked span!' );
}
} );
}
}
} );
I'm working on a CKEditor plugin for annotating text and adding margin comments, but I'd like some of my custom toolbar buttons to be enabled only when the user has already selected a range of text. Whenever the user is typing, or the cursor is at a single-point (instead of a range), the buttons (and their associated commands) should be disabled.
I'm a pretty experienced plugin author, and I've spent a fair amount of time hunting through the core API docs, but I haven't found anything yet that looks like it'll help.
Your case is a little tricky, because selection change event is not well implemented across browsers, FF is the main problem.
In your case you'll going to need check selection changes very frequently, as you're interested in all selection changes therefore CKEditor selectionChange won't fit it.
Fortunately there's a selectionCheck event in editor that fires much more frequently and is implemented for FF.
Solution:
Here you have init method of a plugin that I've mocked to solve your problem. It will disable / enable Source button the way you explained.
I've already added throttling to this function, so that customers with less expansive machine can admire your feature :)
init: function( editor ) {
// Funciton depending on editor selection (taken from the scope) will set the state of our command.
function 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.
return;
}
// We assume only one range.
range = editable.getDocument().getSelection().getRanges()[ 0 ];
// The state we're about to set for the command.
commandState = ( range && !range.collapsed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
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();
} );
}
If you are working on a plugin, I guess that you are registering commands with the ckeditor.
In that case, you should provide a refresh method, which will be called by the CKEditor to update the state of the button when needed:
Defined by the command definition, a function to determine the command
state. It will be invoked when the editor has its states or selection
changed.
You can see examples of implementation in several of the plugins developed by the CKEditor team. Here is one taken from the source code of the Link plugin:
refresh: function( editor, path ) {
var element = path.lastElement && path.lastElement.getAscendant( 'a', true );
if ( element && element.getName() == 'a' && element.getAttribute( 'href' ) && element.getChildCount() )
this.setState( CKEDITOR.TRISTATE_OFF );
else
this.setState( CKEDITOR.TRISTATE_DISABLED );
}
Here is the code required to answer exactly the question using the refresh method as suggested by Gyum Fox.
I mention that to make it work, contextSensitive has to be set to 1.
editor.addCommand( 'myCommand', {
exec: function( editor ) {
// Custom logic of the command
},
refresh: function( editor ) {
var editable = editor.editable();
range = editable.getDocument().getSelection().getRanges()[ 0 ]; // We assume only one range.
commandState = ( range && !range.collapsed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;
this.setState( commandState );
},
contextSensitive: 1
});
EDIT: I noticed some refresh issues on my side. So, because of that, I'd go for the Marek Lewandowski answer.