Our software uses both Telerik WPF editors and Kendo editors, and we transfer the HTML back and forth from these editors. The WPF editors export the HTML, and that HTML is loaded into the Kendo editor. One of the problems we encountered is that table cell (td) padding and borders are not showing up in the Kendo editor when loaded. The reason is that there appears to be a block of styles that always appears in the editor doc head, and these styles are overriding the class styles of the tables.
Here is the block of styles that gets inserted into the editor head (appears to come from the javascript:
<html lang="en"><head><meta charset="utf-8"><title>Kendo UI Editor content</title><style>html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table th{outline:0;border: 1px dotted #999;}.k-table p{margin:0;padding:0;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}</style>
Here is an example of a TD that is part of our HTML being loaded:
<td class="tc_8D184ABE" align="left" valign="top" data-role="resizable"><p class="Normal p_A43897F6"><span>Some text</span></p></td>
And the class styles:
.tc_8D184ABE { telerik-style-type: local;border-left: 12px double #548ED5;border-top: 12px double #548ED5;border-right: 12px double #548ED5;border-bottom: 12px double #548ED5;padding: 4px 12px 4px 12px;width: 189.466674804688px;vertical-align: top; }
Since the .k-table td style in the head block overrides the class styles, the borders and the padding do not render. Is there any suggestions for getting around this issue?
Thanks for any help.
4 Answers, 1 is accepted
Rank 3
Iron
Iron
Veteran
Please note that we found one workaround by using the PreMailer.Net product to move the styles inline.
private string TranslateHtml(string editorHtml){ return PreMailer.Net.PreMailer.MoveCssInline(editorHtml, stripIdAndClassAttributes: true, removeStyleElements: true).Html;}
Hi Bob,
It is nice to hear that you've managed to find a workaround for the issue. Another approach that you can try is to apply code similar to:
var editorBody = $("#editor").data("kendoEditor").body;
var head = $(editorBody).parent().find("head");
head.find("style").text("html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}");The above will remove the styles that are applied to the table DOM element in the Editor component. The long text above is the same as the one that loads by default but without the classes that syle the tables inside the Editor.
This approach isn't something I would usually recommend as it can break the Editor's functionality but is a possible approach that can work in your scenario with pre-defined styles. Attached to my reply you will find a project that demonstrates the usage of the above code. To load the styles of the tc_8D184ABE class, the attached example uses the stylesheets configuration of the Editor.
I hope the suggested approach can be an alternative to the workaround you've already implemented.
Regards,
Petar
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 3
Iron
Iron
Veteran
Hi Bob,
If the in-lining of the styles works correctly in your business logic, I will also recommend keeping to this approach. The idea of the previous example was to demonstrate another possible solution for your use-case scenario but for sure I will be better if we don't change the default Editor behavior.
Regards,
Petar
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.