Develop Reference

Handle Ctrl+Z (undo/redo) for text editor in single page application

I have single page application which consists of a text editor (kendo Editor). The data in the text editor are replaced somewhat like this
$("#editor").kendoEditor({
resizable: {
content: false,
toolbar: true
}
});
var editor = $("#editor").data("kendoEditor");
var setValue = function () {
editor.value($("#value").val());
};
see demo here.
The Issue:
So I am changing record of A then save it. Then I switch to B. Now if I do Ctrl+Z the text editor shows the record of A. How can I prevent this behavior.
Is a way to remove the undo history on demand, or something which would prevent the text editor replacing text with previous record?

Updated: Better Solution.
I contacted Kendo devs and they provided a neat solution.
var editor = $("#editor").data("kendoEditor");
editor.undoRedoStack.clear();
Note: this function is not documented in the public api and is
may change in newer version. This is working as of version
2016.3.1118
demo
Old Solution.
I ended up destroying and rebinding the widget to the textarea.
http://dojo.telerik.com/OjIZe
$("#destroy").click(function(){
var copy=$("#editor").clone();
$("#editor").data('kendoEditor').wrapper.find("iframe").remove();
$("#editor").data('kendoEditor').destroy();
$("#test").empty();
$("#test").append(copy);
$("#editor").kendoEditor({ resizable: {
content: false, toolbar: true
}
});
});

Bootstrap multiselect - to trigger event 'onSelectAll' or 'onDeselectAll' when De-select / Uncheck all options in a single click (best way needed)

I want to put a listener on 'onDeselectAll' event, but 'onDeselectAll' - does not exist in the latest version of the Bootstrap multiselect plugin.
I want something like that
$('.multiselect').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
includeSelectAllDivider: true,
maxHeight: 400,
onSelectAll: function () {
console.log("select-all-nonreq");
},
onDeselectAll: function () {
console.log("deselect-all-nonreq");
}
});
What is the best way to do that?
What is the best fork solving this issue? I found this fork not quite the same as 'onDeselectAll' but close. Is there anything better?
I red somewhere that this option existed in older versions, why did they remove it?
I've found the developers made an issue about it. Does it mean they are planning to fix it? When?
I was checking if Select2 can do 'select all' is it possible?
What should I do? Wait, to go older version or use another fork use another plugin?
This is a desired result.

Your code is correct, these events already exist: http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onSelectAll
But... There is a bug. I created a fork on this project to fix this bug... I've already made a pull request that is waiting for merge.
Pull request: https://github.com/davidstutz/bootstrap-multiselect/pull/764/files
My Fork: https://github.com/lmcarreiro/bootstrap-multiselect

I added an onchange function to the HTML which counts how many options are selected and it is working:
<select id="yourID" class="custom-select" onchange="unselectAll();" multiple>
This is the function to verify that nothing is selected:
function unselectAll(){
if($('#yourID :selected').length==0){
//Do what you need here
}
}

Yup this was a bug I encountered as well hence you can consider going for something like this
$(document).on('change','.multiselect',function(){
var labels = [];
var brands = $('#field option:selected');
$(brands).each(function(index, brand){
labels.push($(this).text());
});
var values = $("#field").val();
if(values.length > 0){
console.log(labels);
console.log(values)
}
})

In CKEditor inline instances, how does one disable drag and dropping?

In CKEditor, how does one disable drag and dropping?
I do not want people to accidentally drag and drop other elements of the page into their respective editors.
I assume this requires intercepting browser specific events and blocking them but I am unsure how to do this in CKEditor.
Thanks for your help!

TAKEN FROM THIS STACKOVERFLOW ANSWER
At first I try disable with config.removePlugins = 'dragdrop,basket'; but it doesn't work at all.
Then I found this link, which help me to solved this problem and write a plugin to do the job.
Anyway I wrote here how to do the trick too.
With a Litle modification I wrote this plugin:
To use it you have to create a folder inside of ./plugins named "dropoff". Then create a file named plugin.js and put this content:
CKEDITOR.plugins.add('dropoff', {
init: function (editor) {
function regectDrop(event) {
event.data.preventDefault(true);
};
editor.on('contentDom', function() {
editor.document.on('drop',regectDrop);
});
}
});
After it, you have to registrate it on ckeditor config.js.
config.extraPlugins = 'dropoff';
If you already using an extra pluging just put a "," before like this:
config.extraPlugins = 'mypreviousplugin,dropoff';
And be Happy! \o/

Unable to apply a plugin to CKEDITOR

So, I use CKEDITOR in my application. I really like it, except one nasty thing - the toolbar disappears totally when I have some huge text and have to scroll down. So, when I scroll back there is no toolbar at all. I found a plugin
which is supposed to solve this problem. So, this is what I did - I added this plugin to my application like
<script type="text/javascript" src="/ckeditor/plugins/fixed/plugin.js"></script>
The script is loaded ok - I see it in the console. Then in the application itself I do this:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'fixed'
};
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height
});
But this plugin does not help - when I scroll down, he toolbar still disappears. So, I need some help. PS. I'm using CKEDITOR 4.

You don't have to manually add the js file itself, you just need to define the configuration properly.
Test this:
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height ,
extraPlugins : 'fixed'
});

Modify CKEditor link dialog to add custom attribute to links

I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?

You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...

I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.