Rank 1
I have special requirements for the Editor and I don't know if its possible or not. I need the editor to paste the fonts of an Microsoft Office Document 1:1. So if the text is written in Calibri, it should show the text in Calibri. And if its a blue heading - it should also paste the text in a blue color with the right font.
Right now that doesn't seem to work for every font. The pasted text is declared as "Inherited Font" but actually it is using a completely different font (e.g.: Calibri doesnt work - there is no span-tag like the others have one declaring their style)! If i am pasting a heading (Cambria 14) it makes just a h1-tag around the text - and that is definitely not what I want it to do!!! I want it be shown in Cambria 14.
I attached a word-document with the text I used. The first two lines (the heading and the Calibri-text) are not copied correctly. What I need is, that the editor pastes the text 1:1 and that it looks exactly the same.
What can I do? Or will I get just the answer: "Not supported"?
Thank you
15 Answers, 1 is accepted
The content pasted from Word is cleaned automatically so that it becomes pure HTML. You can override this behavior by cleaning the content manually in the editor paste event -- update the html field of the event argument as needed, persisting any styles that you want to keep.
Kind regards,Alex Gyoshev
the Telerik team
Rank 1
thank you for your reply. That sounds quite good but can you tell me how I can get the clean pasted content in the event?
Thank you
Can you please elaborate? The event is triggered before the formatting is cleaned. The html field of the event argument holds the pasted content, which you can process. After you change the content as you need, store it back in the html field, and it will be inserted in the editor.
Greetings,Alex Gyoshev
the Telerik team
Rank 1
I think that doesn't solve my problem. e.g. if i copy a text which has "Calibri" as its font the html-content I get in the event is:
<p class="MsoNormal">Calibr<b style="mso-bidi-font-weight: normal;">i<o:p></o:p></b></p>Same with e.g. "Courier New" has a span-tag with the style-attribute "line-height: 115%; font-family: "Courier New"; font-size: 12pt;" - thats what I'm missing with some other fonts like Calibri.
I think I am missing something. I uploaded a picture to show you what I mean. Specially you can see it with the heading. The color, the font, nothing gets copied. There is just a h1-tag arount the text. I need the complete style of the text copied to the editor. Also in the html-field in the paste-event I only get <h1>Heading1</h1> - no fonts. And also the Calibri-text is shown with the default-font "Verdana,.."
Thank you
Indeed, it appears that Word does not report the default font. One possible solution that comes to mind is to change the default editor font to Calibri, you can do so through its stylesheets configuration option and provide a font-family for the <body> element.
Regards,Alex Gyoshev
the Telerik team
Rank 1
thanks again for your reply. I think that you are wrong and that Word reports the fonts. Otherwise all the other web-editors wouldn't insert these correctly.
Let me give you an example by the ComponentArt-Editor:
http://aspnetajax.componentart.com/control-specific/editor/features/core_features/webform1.aspx
And also the RadEditor does everything correctly!
http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
These editors are able to insert the headline correctly and also the Calibri-font is correctly inserted. And this is what I exactly need the Kendo-Editor to do.
Thanks for your help!
In order to achieve this, you need to disable all processing of the clipboard. This will result in non-standard markup that is unsupported by the editor and may yield strange results. You can disable the pasting handler with the following lines:
var editor = $("[data-role=editor]").data("kendoEditor");
$(editor.body).off("paste");
Regards,
Alex Gyoshevthe Telerik team
Rank 1
thanks to your solution that looks much better. This is something we can work with. At first sight the only problem is, that the editor makes a blank line after every paragraph, which the RadEditor is not doing. Any idea how to fix this? Or do I have to delete them manually in the paste-event?
EDIT: Ok this problem only occurs when there is already some text in the editor. If it is empty everything gets pasted correctly. Any idea?
Since the editor does not modify the pasted content in this case, you may need to remove any excessive markup manually, in a custom paste handler.
Kind regards,Alex Gyoshev
the Telerik team
Rank 1
the problem is, that when pasting text into the editor, it seems that the currently chosen font-format at the position effects on the pasted text.
e.g.: if the format is "Paragraph", the pasted text gets a blank line after every paragraph. If the format is "Heading 1", the font of the text changes totally (a few lines are bold, a few are normal, a few are completely different)
That is the reason why it works fine, when the editor is empty --> no format selected --> text gets pasted 1:1
And again, the RadEditor doesn't have this problem. Is there any way to prevent it using the format when pasting text? I don't think that a custom paste event is a good solution.
Since the provided hack does not fit your needs, consider that pasting uncleaned from Word is not supported. You can log this functionality as a feature request on uservoice; if needed, use RadEditor until this is implemented.
Greetings,Alex Gyoshev
the Telerik team
Rank 1
Hi Alex,
My ultimate goal is to offload HTML sanitation to the backend as much more powerful libraries are available (e.g. JSoup on Java platform).
In my particular case I am using this with Angular. My first example below works fine but very limited in what can be done as the HTML from various sources can be quite complex (e.g. Microsoft Office, etc.). The second example doesn't work as I expect it is far too late to make changes to the paste HTML buffer. So that leaves us with the last theoretical method below using promises.
Is there a way to achieve my end goal with locking up the event queue during remote call? ​
self.onPaste = function (event) {
$log.log('paste', event);
// this works
event.html = 'You got served!';
};
self.onPasteWithTimeout = function (event) {
$log.log('paste', event);
// timeout fires but HTML not updated
$timeout(function () {
$log.log('timeout occurred');
//Content.sanitize(event.html).then(function (sanitizedHtml) {
// $log.log('Update sanitized content');
// event.html = sanitizedHtml;
//});
event.html = 'You got timeout served!';
}, 5000);
};
self.onPasteWithPromise = function (event) {
$log.log('paste', event);
// ideal but not supported
var deferred = $.Deferred();
$timeout(new function () {
$log.log('timeout');
deferred.resolve('You got deferred served!');
}, 2000);
event.html = deferred.promise();
};
self.onPaste = function (event) {
$log.log('paste', event);
// this works
event.html = 'You got served!';
};
self.onPasteWithTimeout = function (event) {
$log.log('paste', event);
// timeout fires but HTML not updated
$timeout(function () {
$log.log('timeout occurred');
//Content.sanitize(event.html).then(function (sanitizedHtml) {
// $log.log('Update sanitized content');
// event.html = sanitizedHtml;
//});
event.html = 'You got timeout served!';
}, 5000);
};
self.onPasteWithPromise = function (event) {
$log.log('paste', event);
// ideal but not supported
var deferred = $.Deferred();
$timeout(new function () {
$log.log('timeout');
deferred.resolve('You got deferred served!');
}, 2000);
event.html = deferred.promise();
};
​
Hello Kirk,
> Is there a way to achieve my end goal with locking up the event queue during remote call? ​
No, and blocking the UI for an AJAX call on every paste would kill the user experience. You can keep the HTML sanitation on the server-side when the data is posted to the server, and provide an alternative approach on the client-side (for example, the sanitize-html project).
Regards,Alex Gyoshev
Telerik
Rank 1
Thanks that's what I figured. Is adding a promise to the event API (i.e. event.html = promise) above a feasible future solution offering? I was trying to avoid having the content flash changes post paste which IMO would be also a bad UX.
Otherwise would you suggest maybe hanging off the "change" event and then doing a server side check then? I think it would be surprising to the end user if the content changed only after hitting "save". Any other options?
Thanks again
Hello Kirk,
My suggestion is to use a client-side library that filters the content synchronously on paste (e.g. the sanitize-html project I linked previously). It may differ slightly from doing the same validation on the server, but will achieve similar results and will not be disruptive.
If that is not a viable option, you can execute the following steps to achieve remote filtering:
- cancel the immediate paste operation
- show an overlay over the window
- make a request to the server-side to filter the content
- insert the content at the current caret position
- remove the overlay
Alex Gyoshev
Telerik