All geek questions in one place

Ckeditor and razor syntax patterns

I have an interesting problem. I have a website that sends emails. Email templates are often straightforward, but for one client, he wants me to convert content from his public website to email that supports email.

I want to not only solve the problem for its specific site, but also for other unknown sites. So I remembered that you can run Razor as a template engine.

Shortly speaking. It works and works well. My problem boils down to this. When someone edits a razor-style template for loops, Ckeditor acts pretty weird.

Any idea how to make CKEditor spin?

<table style="width: 100%;" width="100%"> <tbody> @foreach (var row in body.indexPageRow) { foreach (var cell in row.teaser) { <tr> <td class="row">@Raw(cell.teaserContent.a.Html)</td> <td class="row">@Raw(cell.teaserContent.div.InnerHtml)</td> </tr> }} </tbody> </table>

The above code, when saved in ckeditor, deletes the razor information and becomes an empty table

 <table style="width: 100%;" width="100%"> <tbody></tbody> </table>
+4
source share
2 answers

The only way I can come up with is to use html comments in combination with razor comments.

First you would create a razor template:

 @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <table> <tbody> <tr><td>X</td><td>Y</td></tr> @*<!--*@ @for (var x = 1; x < 5; x++) { for (var y = 1; y < 5; y++) { @*-->*@ <tr> <td class="row">@Html.Raw(x)</td> <td class="row">@Html.Raw(y)</td> </tr> @*<!--*@ } } @*-->*@ </tbody> </table> </body> </html>

The code above is valid and will display without errors. But when you put it in the html editor, it will be reordered by the browser, so you will need to change it immediately before displaying it for editing so that the razor comments are deleted and only the html comments remain.

So, as soon as you delete the razor comments by replacing all instances of @*<!--*@ with <!-- and all instances of @*-->*@ with --> , you should have the following

 <!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <table> <tbody> <tr><td>X</td><td>Y</td></tr> <!-- @for (var x = 1; x < 5; x++) { for (var y = 1; y < 5; y++) { --> <tr> <td class="row">@Html.Raw(x)</td> <td class="row">@Html.Raw(y)</td> </tr> <!-- } } --> </tbody> </table> </body> </html>

This will be displayed in the html editor and will not be crippled by the browser, as Alfonso pointed out, an example of this is at jsfiddle http://jsfiddle.net/wPGLd/3/

After editing is complete, you will need to grab the html and reapply the razor comments, replacing all instances of <!-- with @*<!--*@ and all instances of --> with @*-->*@

The html interception before and after entering ckeditor is pretty straight forward and well documented. I found the following article which explains a little how to get the contents of ckeditor when submitting

How to update CKEditor content on submit form - equivalent to OnAfterLinkedFieldUpdate FCKEditor

The next question also covers this

Refresh the contents of the editor immediately before saving it in the CKEditor plug-in

+3
source

You can not.

The browser will change this content: http://jsfiddle.net/wPGLd/

 <!DOCTYPE html> <html> <head> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ alert(document.body.innerHTML) }//]]> </script> </head> <body> <table style="width: 100%;" width="100%"> <tbody> @foreach (var row in body.indexPageRow) { foreach (var cell in row.teaser) { <tr> <td class="row">@Raw(cell.teaserContent.a.Html)</td> <td class="row">@Raw(cell.teaserContent.div.InnerHtml)</td> </tr> }} </tbody> </table> </body> </html>
0
source

Source: https://habr.com/ru/post/1478921/

More articles:


All Articles