Question

我有一个有趣的问题。我有一个发送电子邮件的网站。电子邮件模板通常是直截了当的，但对于一个客户，他希望我将其公共网站上的内容转换为电子邮件友好的HTML。

我不仅要解决他的特定网站的问题，还要解决其他未知网站的问题。所以我记得你可以将Razor作为模板引擎运行。

长话短说。它运作良好，运作良好。我的问题归结为此。当有人使用razor样式进行循环编辑模板时，Ckeditor的行为非常奇怪。

知道如何防止CKEditor搞砸了吗？

<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>

保存在ckeditor中的上述代码会删除剃刀信息并变为空表

<table style="width: 100%;" width="100%">
    <tbody></tbody>
</table>

Answer 1

我能想到的唯一方法就是将html评论与剃刀评论结合使用。

最初你会像这样编写剃刀模板：

@{
    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>

上面的代码是有效的，并且会呈现而不会出错。但是当你把它放到html编辑器中时，它会被浏览器重新排列，因此你需要在显示它之前对其进行修改以便进行编辑，以便删除剃刀注释并仅保留html注释。

因此，一旦您删除了剃刀评论，将@**@的所有实例替换为-->，您应该拥有以下内容

<!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>

这将在html编辑器中呈现，并且不会被Alfonso所指出的浏览器破坏，jsfiddle http://jsfiddle.net/wPGLd/3/

的一个例子

编辑完成后，您需要捕获html并重新应用剃刀评论，将的所有实例替换为@*-->*@ }

在进入ckeditor之前和之后拦截html是非常直接的并且有很好的文档记录。我发现以下文章解释了如何在提交时获取ckeditor内容

How to update CKEditor content on form submit – equivalent of OnAfterLinkedFieldUpdate FCKEditor

以下问题也涵盖了这个

Update editor content immediately before save in CKEditor plug-in

Answer 2

你不能。

浏览器会重新排列这些内容：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>

ckeditor和razor语法模板

2 个答案: