Develop Reference

Codemirror editor is not loading content of the textarea

I'm trying to apply CodeMirror to this mini web app that I'm using. It has two has 2 textareas. I'd like to add CM for better visibility, so I can edit some stuff on the get to go. So far, I managed to apply the Eclipse theme, but the tool doesn't work anymore. It seems like CodeMirror is not copying the content to the textarea.
When I remove the Codemirror js the tool works again.
Here's my
JSFiddle
HTML
<textarea id="input" rows="10" cols="80"></textarea>
<textarea id="output" rows="10" cols="80" readonly></textarea>
JS
$('textarea').each(function(index, elem) {
CodeMirror.fromTextArea(elem, {
lineWrapping: true,
mode: "javascript",
theme: "eclipse",
lineNumbers: true,
});
});

It seems to me that the problem is in http://dean.edwards.name/packer/bindings.js, exactly, at the following code:
"#pack-script": {
disabled: false,
onclick: function() {
try {
output.value = "";
if (input.value) {
var value = packer.pack(input.value, base62.checked, shrink.checked);
output.value = value;
message.update();
}
} catch (error) {
message.error("error packing script", error);
} finally {
saveScript.disabled = !output.value;
decodeScript.disabled = !output.value || !base62.checked;
}
}
},
CodeMirror uses internal formatting, and applies custom styling to the textareas. So, the direct methods for the textarea, such as input.value won't work. You will need to tweak it so that it uses CodeMirror's methods to get/set the values as described in this guide under Content manipulation methods section.
Edit 1:
Apart from correcting some syntax errors, I got that working in this fiddle.
Changes done:
Returned the CodeMirror object from the editor function, so that it can be assigned to a variable.
Changed the onclick method. In finally block, there are undefined references to saveScript, and decodeScript, which I commented. And used CodeMirror's getValue(), and setValue() methods to get/set values respectively.
There still are some errors in the console, if observed, but that doesn't hamper the functionality of packer.

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

Onclick function not work in ckeditor [duplicate]

I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using CKEditor.</p>
</body>
</html>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});

Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-Released
Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
There's no configuration option for this, because it wouldn't make sense.
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.

DataTables: Confirm user wishes to page

We have a number of jQuery DataTables that all use server side processing. We have paging and sorting set up, and all is working well. In these tables there is at least one column of checkboxes to allow selecting of rows to do some kind of processing on. We want to confirm that the user wishes to page or sort if there are any checkboxes checked.
What I thought I could do (and can't)
"fnPreDrawCallback" : function(table) {
if (CullAddress.AddressIsChecked()) {
var $warningDiv = $('div#pageWarning');
var warningText = "One or more Addresses are selected for Excluding or Tagging. Are you sure you wish to nvaigate away?";
$warningDiv.find("div#pageWarningText").html(warningText);
$warningDiv.dialog({
resizable: false,
height: "auto",
width: "auto",
modal: true,
buttons: {
"Leave Page": function () {
CullAddress.resetWarningText();
$warningDiv.dialog('close');
},
"Stay On Page": function () {
CullAddress.resetWarningText();
$warningDiv.dialog('close');
return false;
}
},
});
}
},
Initially I thought this would be simple, but now, it is getting a bit hefty, and I am not sure of what the right way is. I am trying to use the fnPreDrawCallback, and initially I intended to create and display a jQueryUI Dialog, and have the buttons determine whether or not to return false; out of the callback thus staying on the page, or allowing the page/sort to go through.
I now understand that javaScript does not work that way. I suspect I will have to do the following, but before I go through that trouble I want to ask if there is a more concise (and reusable) way of doing this.
In fnPreDrawCallback, get properties to describe the intended set page/sort (e.g. offset, pageSize, sSortDir, iSortCol, etc).
Determine via dialog whether to continue or stay on page
Use aforementioned properties to construct the GET for the datatable to bypass the fnPreDrawCallback
Am I making this more difficult that it needs to be? Surely I am not the first person to want to do this, but for the life of me, I can find an example, or I cant figure out the keywords I should be searching for...
Any helps?

Link to working example: http://jsfiddle.net/6frQZ/3/
As already discussed in the comments to the question, I tried to circumvent the default behaviour of DataTables to fit your needs and created an example on jsFiddle to show, including numbered-pagination and sorting.
Basically, you'll need to unbind the event-handlers, that the DataTables - plugin binds to it's components, like so:
$('.dataTables_paginate a').unbind();
$('.dataTables_wrapper thead th').unbind();
Using .unbind without a parameter will unbind any event-listener on the element, so be careful when using this.
Gladly, the DataTables - API provides functions that let you call the internal paging and sorting-methods yourself, named fnSort (API-Link) and fnPageChange (API-Link).
To keep it simple, i just used a confirm - Box to ask for the user-interaction:
var userInteraction = confirm("Do you really want to change the page?");
if(userInteraction){
oTable.fnPageChange(dir);
$('.dataTables_paginate span a').unbind();
}
but all you'd need to do is call the DataTables-functions inside of your "Leave Page" - callback you already provided in the code.
Note: When it comes to the numbered buttons of the paging: It seems like DataTables regenerates those everytime the paging is changed, thus I need to unbind the event-Handlers again after every page-change.
The rest is simple yet not very elegant code, in which I just look for certain classes to know, what button was clicked or which state the sorting-header is in.
Excerpt:
var dir = "",
$this = $(this);
if($this.hasClass('previous')){
dir = "previous";
}else if ($this.hasClass('next')){
dir = "next";
}else if($this.hasClass('first')){
dir = "first";
}else if($this.hasClass('last')){
dir = "last";
}else{
dir = parseInt($this.text(),10)-1;
}

ExtJS: starting HtmlEditor defaulting to source

I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!

ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!

Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object

Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});

htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.