I want to get the letters as they are without modification but Kendo still encoded characters like "áéíóú" to "áéíóú"
KendoRTE = $(".myRte").kendoEditor({
encoded: true,
paste: function(e) {
console.log(e)
},
change: function() {
console.log(this.value());
}
}).data('kendoEditor');
Kendo UI Documentation
Example code of the issue
Any ideas to fix this?
Try using this trick:
var decoded = $('<div/>').html(this.value()).text();
console.log(decoded);
Your example modified in here: http://jsfiddle.net/OnaBai/E32m7/3/
Related
I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.
I'm struggling with 2 things:
I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.
Thanks!
For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:
$("#editor").kendoEditor({
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()
For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:
$("#editor").kendoEditor({
tools: [
"italic"
],
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.
This can be easily achieved now with pasteCleanup option.
See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting
Kendo MVC has also extension for this purpose. Example of usage:
.PasteCleanup(x => x.KeepNewLines(false))
false in this case means that you want to clear everything except new lines.
for me this is the complete solution
pasteCleanup: {
custom: function (html)
{
html = html.replace(/<\s*br\/*>/gi, '');
html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
html = html.replace(/<\s*\/*.+?>/ig, '');
html = html.replace(/ {2,}/gi, '');
html = html.replace(/\n+\s*/gi, '');
html = html.replace(" ", '');
html = html.replace(/<.*?>/g, '');
return html;
}
}
I have found some answers that explain how to remove the Kendo UI kendoDatePicker widget from a textbox here http://www.kendoui.com/forums/ui/general-discussions/method-for-removing-controls.aspx and here http://www.kendoui.com//forums/ui/date-time-pickers/datepicker-becomes-static.aspx
Unfortunately the above examples do not seem to help when i try to remove the property of a NumericTextBox. I ended up with the source below.
var numericTextBox = $(selector).data("kendoNumericTextBox");
var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
: numericTextBox.element;
// unwrap element
var input = numericTextBox.element.show();
input.removeClass("k-input").css("width", "12.4em");
input.removeClass("numerictextbox");
input.insertBefore(numericTextBox.wrapper);
numericTextBox.wrapper.remove();
input.removeAttr("data-role");
input.removeAttr("role");
I finally end up with a text box that looks like a simple textbox but i am still not allowed to add anything else than just numbers.
Furthermore i tried adding also the line input.removeData("kendoNumericTextBox"); which is close to what is suggested on the links i have posted above, but i could not identify what this line does.
Instead of playing with the widget decoration converting from text to numeric and viceversa it's much easier having both and have always one of them hidden. You just need to add a class / remove a class and get the correct one visible.
Lets say that I have the following CSS definition:
.ob-hide {
display: none;
}
The following HTML:
<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>
Then my JavaScript would be:
$("#combobox").kendoDropDownList({
dataSource: {
data: [ "string", "number" ]
},
value : "string",
change : function (e) {
console.log("change");
if (this.value() === "string") {
console.log("string");
$("#number").closest(".k-numerictextbox").addClass("ob-hide");
$("#text").closest(".k-autocomplete").removeClass("ob-hide");
} else {
console.log("number");
$("#number").closest(".k-numerictextbox").removeClass("ob-hide");
$("#text").closest(".k-autocomplete").addClass("ob-hide");
}
}
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});
I am trying to implement CKEditor 4 into an ASP NET website that I am working on, but I cannot figure out how I would save the edited material from the inline editor I know how to do it with the the old version, but I just don't understand the process for this.
I have looked in the forums... There is not v4 forum.
I looked in for the documentation.... Couldn't find it.
I have a feeling that this is a simple task, but I just don't know how.
You can get your data with CKEDITOR.instances.editor1.getData(). Then you can send it via AJAX or store it as a value of some input field. To do this periodically, follow this method:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable' );
var savedData, newData;
function saveEditorData() {
setTimeout( function() {
newData = editor.getData();
if ( newData !== savedData ) {
savedData = newData;
// Send it with jQuery Ajax
$.ajax({
url: 'yourUrl',
data: savedData
});
// Or store it anywhere...
// ...
// ...
}
saveEditorData();
}, 500 );
};
// Start observing the data.
saveEditorData();
You can also observe the submit event and update some (hidden) form field with your data.
Have fun!
Are you trying to get it with AJAX or send with a form? The value of for example the top right inline editor area with Lorem Ipsum can be gotten like in the older version with simply
CKEDITOR.instances.editor1.getData().
In the XHTML output example they have a simple form that seems to work and I believe that using an (static) inline editor is just the same.
If you transform elements into editors inline dynamically, I would try to bind to the submit event and before submitting loop through all CKEDITOR.instances, get their data into hidden from fields. As for the hidden field naming or identifying which hidden field corresponds to which dynamic editor you'll have to figure out yourself :)
In previous version when inline editing all looking good:
But in new version it is looking like that (i put read border over):
How to fix that?
I am using jQuery 1.6.1, jQueryUI 1.8.13
I also have using the latest jqGrid css file
The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:
onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');
see the source code of jquery.fmatter.js.
If I correct understand the problem the adding of 'ui-state-hover' class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.
So I suggest just remove the hover effects inside of loadComplete:
loadComplete: function() {
$("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
this.onmouseover = null;
this.onmouseout = null;
});
}
See the demo.
UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following
var iconHoverFixed = function(e) {
jQuery(this).addClass('ui-state-hover');
jQuery('span',this).removeClass('ui-state-hover');
},
iconNotHoverFixed = function(e) {
jQuery(this).removeClass('ui-state-hover');
};
and then we can fix the hovering problem so:
loadComplete: function() {
$("div.ui-inline-save, div.ui-inline-cancel").each(function() {
this.onmouseover = iconHoverFixed;
this.onmouseout = iconNotHoverFixed;
});
}
See the new demo here or here.
Looks like you need to update the jquerygrid css and the images folder the image is build from an offset inside an image (Sprite) http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png
and in you case it doesn't find the right place
Does anyone know how I can attach an onpaste event in CKEditor 3.x?
I basically want to grab CTRL + V data and add few text to it and then add it to the editor.
I have looked around but have not found a definitive answer. CKEditor forum is of not much help.
This should do the trick
var editor = CKEDITOR.instances.YourInputControlName;
editor.on('paste', function(evt) {
// Update the text
evt.editor.setData(evt.editor.getData() + ' your additional comments.');
}, editor.element.$);
Your both examples are a little bit synthetic.
At first, editor.getData() gets all the content of editor, so if you want to process only pasted data, you need to get ev.data.html and paste to correct place.
editor = CKEDITOR.instances.editor1;
editor.on('paste', function (evt) {
var editor = evt.editor;
evt.stop(); // we don't let editor to paste data, only for current event
// show loader that blocks editor changes
$.post('clean.php', {html: evt.data.html}, function (data) {
editor.insertHtml( data.html ); // text will be inserted at correct place
// hide loader
}, 'json');
});
Don't use functions editor.setReadonly(true/false), you won't be able to paste text in correct place (in cases with async data processing).
This example edits the content to be pasted by removing all img elements.
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<img( [^>]*)?>/gi, '');
});
});
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
var data = evt.data.dataValue;
if (window.chrome || window.safari) {
// removing span wrapper on webkit browsers.
data = $(data).html();
}
evt.editor.insertHtml(data);
});
I know it's an old question, but thought I'd add my version of aliaksej's answer as it allows the use of a custom 'cleaner' - it didn't quite work for me until I modded it as below.
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
$.post('/actions/clean.php', {html: evt.data.dataValue}).done(function (data) {
evt.editor.insertHtml(data);
}, 'json');
});