1

私は自分の基本的なテキスト エディターを作成しています。ユーザーがコードを入力できる Iframe があります。

Iframe の下に、非表示の div があります。この div は通常、IFrame に記述されている内容をキャプチャします。つまり、ユーザーが上記の Iframe に入力するすべての HTML および CSS コードをキャプチャし、下の div で「OnKeyUp」アクションを実行します。

下の div は非表示になっているため、ユーザーがボタンをクリックした場合にのみプレビューされます。その結果、これが JQuery ダイアログ ボックスにポップアップ表示されます。つまり、div は JQuery UI のダイアログ ボックスを介してポップアップ表示され、ユーザーがコーディングしている結果を表示します。

テキストエリアでこれを行うことができることはわかっています。これは単なる「値」の問題ですが、Iframeでは取得できません。私はこれを作りました：

function pcode () {
    var frame = document.getElementById('code').value;
    var div = document.getElementById('preview');
    divout.innerHTML = frameout;    
}

上記のコードは、Iframe に書き込まれた値を取得し、OnKeyUp の下の div でプレビューするだけです。次に、ユーザーがボタンをクリックしたときに JQuery UI ダイアログ ボックスで div をプレビューするコードを示します。

function preview() {
    $('#preview').dialog({modal:true, height:600, width:1280, title:"Preview", show:"slow", hide:"fast"});
}
$('#previewbutton').click(function() {
    preview();
});

問題は、何も機能していないことです。問題を理解していない場合は、私にいくつか質問してください。私自身、これでストレスを感じています。以前にテキストエリアでこれを行ったので、それがテキストエリアであればすべて問題ありませんでした。

同じ考え方で、テキスト エディタをコーディングするときは IFrame を使用するようにアドバイスされています。テキストエリアでこれを行うと、ユーザーのコードがページの独自の CSS コードと競合する可能性があるためです。解決策がない場合に備えて、iframe の代わりに textarea を単独で使用する可能性があるかどうかを知りたいのですが、ユーザーの CSS および HTML コードが自分の CSS コードと競合してはなりません。たとえば、クラスまたは ID を宣言したり、たとえばすべての見出し 1 を青色にした場合、ユーザーがテキストエリアに見出し 1 タグを入力している場合、私の CSS コードはユーザーにも適用されるため、適用しません。これは欲しくない。

4

0 に答える 0