如何在mvc的textarea中预览html

I am using a textarea in which I am allowing the user to enter his html.

我正在使用一个文本区域，允许用户输入他的html。

When the user is enter the HTML there is a option of preview (button), when the user click on Preview button, then the textarea is hid and the html is shown in a div.

当用户输入HTML时，有一个预览(按钮)选项，当用户点击预览按钮时，文本区域被隐藏，HTML显示在div中。

When the user is entering some html with body tag etc the design of the page is disturbed.

当用户输入一些带有body标签的html时，页面的设计就会受到干扰。

Any way to solve it

任何方法都可以。

The problem I am facing is when a preview is generated.

我面临的问题是在生成预览时。

demo HTML

演示的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contest Announcement</title>
<style type="text/css">

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto; padding:0; background-color:#FFFFFF;}
#outlook a {padding:0;} 
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block; border:none;} 
p {margin: 1em 0;}
table td {border-collapse: collapse;}

.symbolfix img{width:10px !important;height:10px !important;}

</style>

</head>

<body style="width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto; padding:0; background-color:#FFFFFF;">

2 个解决方案

#1

This may not be the most ideal, but why not try using javascript & jQuery to assign the content of the text area to an iframe? Here is a link to a post which details how to go about injecting the HTML in to an iframe.

这可能不是最理想的，但是为什么不尝试使用javascript和jQuery将文本区域的内容分配给iframe呢?这里有一个链接到一篇文章，详细介绍了如何将HTML注入到iframe中。

putting html inside an iframe (using javascript)

将html放到iframe中(使用javascript)

#2

You could use a WYSIWYG editor to accomplish this easily.

您可以使用WYSIWYG编辑器来轻松实现这一点。

check out Redactor

看看编辑者

#1