2

ユーザーが自分のHTMLを入力できるようにするテキストエリアを使用しています。

ユーザーがHTMLを入力すると、プレビュー（ボタン）のオプションがあります。ユーザーが[プレビュー]ボタンをクリックすると、テキストエリアが非表示になり、htmlがdivに表示されます。

ユーザーがbodyタグなどを使用して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;">
4

2 に答える 2

2

これは最も理想的ではないかもしれませんが、javascriptとjQueryを使用してテキスト領域のコンテンツをiframeに割り当ててみませんか？これは、HTMLをiframeに挿入する方法を詳しく説明した投稿へのリンクです。

htmlをiframe内に配置する（javascriptを使用）

于 2013-01-29T16:41:36.880 に答える
0

WYSIWYGエディターを使用すると、これを簡単に実行できます。

Redactorをチェックしてください

于 2013-01-29T13:05:13.243 に答える