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

Codemirror, how to add add-ons

I am trying to add the scroll past end add-on for codemirror but I cannot add it to my codemirror instance.
I tried calling it like this scrollPastEnd: true in the options but that didn't work. I also tried using the defineOption function but the console says it is undefined.
Thanks for the help

First, you have to add the scrollpastend.js file (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/scroll/scrollpastend.min.js) to your HTML document and not to the editor.
As the following code from scrollpastend.js file says, the scrollPastEnd option is off by default:
CodeMirror.defineOption("scrollPastEnd", false, function(cm, val, old) {..});
Then It only remains to activate your add-on by setting new option like this:
editor.setOption("scrollPastEnd", true);
or adding scrollPastEnd option to the object option list:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "html",
lineNumbers: true,
scrollPastEnd: true
});
Hoping to help you, I wish you a good day.

TinyMCE - disable standard save button

I try to disable programmatically the standard "save" button of the save plugin
tinymce.init
({
selector: '#editorMain',
plugins: "save,code,textcolor,charmap,searchreplace,paste,wordcount",
height: 400,
setup: function(editor) {
editor.on('keyup',function(e){
console.log(getStats('editorMain').chars);
var body = tinymce.get('editorMain').getBody();
var currentValue=tinymce.trim(body.innerText || body.textContent);
var currentCharsCount=getStats('editorMain').chars;
var limit=10;
var diff=limit - currentCharsCount;
if (diff>-1)
{
$("#chars_left").html(diff + " characters left");
}
else
{
$("#chars_left").html("Your comment is too long");
// here should we disable the save button
}
});
},
I googled for a solution and found that in version 3.x there was an object called "ControlManager". This has been removed in version 4 (the one I currently use)
According to the documentation the following should be implemented to do that:
// In TinyMCE 4 you can use the simpler stateSelector setting
editor.addButton('SomeButton', {
text: 'My button',
stateSelector: 'a'
});
but how can this work for the "save" button ? the save button comes when I use the "save" plugin, this does not have to be programmatically added.

well that was a tough one. This:
tinymce.activeEditor.theme.panel.find('toolbar *')[1];
enables to access the button. then the ".disabled(1)" method.
That's a pity that we cannot access the elements using their names or ids...

If you don't want the functionality of the save plugin simply remove it from the list in the plugins: init options. Use the list shown here.
tinymce.init
({
selector: '#editorMain',
plugins: "code,textcolor,charmap,searchreplace,paste,wordcount",
....

How to set On Off state for CKEditor custom button

I have added a custom plugin to CKEditor inline to perform bold operation. The plugin is working as expected but the on/off state of button is not working.
When command is executed its state is always TRISTATE_OFF.
CKEDITOR.plugins.add( 'customBold', {
requires: 'toolbar',
icons: 'bold',
hidpi: false,
init: function( editor ) {
var boldCommand = {
exec: function( editor ) {
document.execCommand('bold', false, null);
}
}
editor.addCommand( 'bold', boldCommand );
editor.ui.addButton && editor.ui.addButton( 'Bold', {
label: 'bold',
command: 'bold',
toolbar: 'basic,10'
});
editor.setKeystroke( [
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ]
]);
}
});
When user selects the bold text I would like to toggle the bold style in toolbar.

You need to call the command.setState method which will set the state of the command which then automatically affects the state of related button.
However, you need to know when to call that method (when the state changes). CKEditor's plugins like the basicstyle plugin use the CKEditor's styles system which let them easily listen on style state changes:
editor.attachStyleStateChange( style, function( state ) {
!editor.readOnly && editor.getCommand( commandName ).setState( state );
} );
You, however, try to use the native commands, which I highly recommend not to. It is not a coincidence that CKEditor implements its own style system and its own commands.

I'm answering this purely because this result constantly came up when I was looking how to apply a style to a CKEditor custom plugin button on the toolbar.
This ended up being fairly simple, although not especially elegant.
Currently, I do my own handling of CKEditor buttons (outside of the plugin.js files). This is because I'm using CKEditor to dynamically create editor instances, which it doesn't seem very well suited to do and I often have to override functions.
Here's how I apply a style to a 'active' button in the editor on the myplugin button action:
//Catch the initial click
$('.parent_element').on('click', '.cke_button__myplugin', function(){
//Apply a gradiant style to the button
$('.cke_button__myplugin').css({'background':' radial-gradient(#FFF, #6E6E6E)'})
//Logic to handle button click
});
This way, you simply apply a style to the button without having to toggle the actual button.png

Get UI button clicked on CK Editor toolbar

I have built a very simple plugin for CK Editor (because apparently that's the only way to add a custom button to the toolbar?)
I'd like to know how I can get the DOM ID of my custom button when it is clicked (or any object representative of the button which will allow me to create a jQuery object)
(function () {
CKEDITOR.plugins.add('myplugin', {
icons: 'myicon',
hidpi: true,
init: function (editor) {
editor.addCommand('mycommand', {
exec : function(editor) {
// get button information
}
});
editor.ui.addButton && editor.ui.addButton('MyCommand', {
label: 'Custom Action',
command: 'mycommand',
toolbar: 'insert,5',
icon: 'myicon'
});
}
});
})();
I'd like to attach my own custom UI element to the toolbar when the button is clicked and I need a relative anchor point in order to display it in the correct position on the screen.
I'm using CK Editor 4.2

In your case, you can access the button with the following code (using jQuery):
$(document).on('click', '.cke_button__mycommand', function(){
// do stuff
});
You can inspect the toolbar with your browser to get more information.