エディタで生成されたhtmlコードの再表示のスタイル競合の問題

2445 ワード

Webエディタは良いもので、多くの場合、さまざまなテキストを編集するために使用する必要があります.しかし、Webエディタを使用すると、さまざまな問題が発生し、これらの問題を解決するのは頭が痛いです.
最近エディタを使って本文を書き、フロントで展示する必要があるときにスタイルの衝突がひどいことに気づきました.ただし、既存のスタイルをクリアすることはできません.完全なエディタスタイルを使用するには、表示する必要がある内容と現在のページ全体を分離するしかありません.エディタスタイルを完全に表示できる2つの方法について説明します.
1.既存のエディタで再表示
エディタで編集したものは、エディタ内に表示されるのは必ず見たものです.したがって,エディタを用いて元のコンテンツを再表示するには,エディタを再度呼び出し,不要なプラグインを書き込み,消去し,最後にエディタを編集不可に設定すればよい.次にueditorを例に挙げます.



var ue = UE.getEditor('editor',{
	    toolbars: [],
	    autoHeightEnabled: true,
	    autoFloatEnabled: true,
	    enableAutoSave: false,
	    readonly:true,
	    wordCount:false
	});
	
	ue.addListener("ready", function () {
		var content = '${mail.content}';
		ue.setContent(content);
		}
	);

は読み取り専用に設定されており、補助編集の機能をすべて除去し、内容を入れればよい.
このようにして原滋原味を保証し、羊毛が羊の体に出て、編集の内容はどんな様子なのか、展示もそっくりです.
2.iframeによるページ埋め込み
iframeがロードしたページは現在のページとは関係なく、スタイルは自然ページと衝突せず、エディタの編集が完了したhtmlコードスタイルをよく示すことができます.もちろん、わずかな違いがありますが、ほぼ一致しています.
iframeを使用するメリットは、ページにエディタを構築する必要がないことです.結局、エディタのスタイルは、ページ内のコントロールの調整が複雑です.iframeのアイデアを以下に示します.