1

はじめに、私は過度に経験豊富なプログラマーではありません。私の分野は主に HTML と CSS で、ここで少し立ち往生しており、オンラインで高低を検索しましたが、必要なものが見つかりません。私の言い回しが悪いのか、情報不足なのか、よくわかりません（笑）。

ライブバージョン

HTML
<select ONCHANGE="document.getElementById('display-inner').src = this.options[this.selectedIndex].value"> <option value="http://tessisamess.com/freeedit.html">Free Edit</option> <option value="http://tessisamess.com/completestyle.html">Complete Style</option> <option value="http://tessisamess.com/generator.html">Generator</option>

Jクエリ

    $(関数() {
    関数の変更() {
    var iFrame = document.getElementById('display-inner');
    var iFrameBody;
    if ( iFrame.contentDocument )
    { //FF
    iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    それ以外の場合 ( iFrame.contentWindow )
    { //IE
    iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    iFrameBody.innerHTML = document.getElementById('input-inner').value;
    }
    });

私が達成しようとしていること:
私は通常、レイアウトを作成するユーザー向けのライブ エディターを作成しています。また、自由編集モードと保存機能がすべて正常に機能しています。また、スタイルを変更してアップロードし、iframe に表示することが多い 2 つの基本レイアウトも用意しました。ドロップダウンからレイアウトまたは無料編集を呼び出して、右側のエディターの隣に表示できます。

ここでの目標は、3 つのモードのいずれかをクリックし、左側のコードを記述して、右側の iframe をクリアしてテキストエリアのコンテンツに置き換えるのではなく、更新が既に反映されていることを確認できるようにすることです (つまり、現在行っていること。)

機能する必要があるものと機能しないもの:
[完全なスタイル] または [ジェネレーター] をクリックすると、テキスト領域 (左) に、各レイアウトのスタイルを設定するために使用する基本コードが表示される必要があります。生成されたコードを使用するか、事前に作成されたレイアウト編集に置き換えて、その側の編集を開始すると、右側の接続先の iframe に変更が反映されます。(例: 背景画像を に追加するbodyと、iframe 内のページの背景が変更されます。)

目的:
サイトで私のフリー レイアウトを頻繁に使用し、サイトの非常に古いリソースを使用してレイアウトを編集するのに苦労しているユーザーに提供するためのツールとしてこれを使用しています。私のカスタム CSS を挿入して好きなように編集して、サイトに持ち帰って実際のジャーナルに実装できるようにしてほしい.

必要に応じて、これがすでに機能している方法を変更する必要があることに注意してください。すでに持っているものに固執するよりも、正しく機能することをお勧めします。私は TinyMCE をアップロードするつもりはありませんが、オプションが少ない場合はちょっと。何もありませんよね？

$(function() {
  function change() {
  var iFrame =  document.getElementById('display-inner');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    iFrameBody.innerHTML = document.getElementById('input-inner').value;
}
  });


$(function() {
 function saveTextAsFile()
        {
            var textToWrite = document.getElementById('input-inner').value;
            var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
            var fileNameToSaveAs = "mycode_tessisamess.txt";
        
            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "Download File";
            if (window.webkitURL != null)
            {
                // Chrome allows the link to be clicked
                // without actually adding it to the DOM.
                downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            }
            else
            {
                // Firefox requires the link to be added to the DOM
                // before it can be clicked.
                downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                downloadLink.onclick = destroyClickedElement;
                downloadLink.style.display = "none";
                document.body.appendChild(downloadLink);
            }
        
            downloadLink.click();
        }
    
        var button = document.getElementById('save');
        button.addEventListener('click', saveTextAsFile);
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

::selection{background:#EAA2B9;}
::-moz-selection{background:#EAA2B9;}

body,html{height:100%;}
body{margin:0;}

#input, #display{display:inline-block;height:100%;vertical-align:top;overflow:hidden;}

#input{position:relative;background:#ddd url(http://i.imgur.com/wBSwx5F.jpg)center no-repeat fixed;width:35%;-webkit-box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);}

#controls{font-family:Open Sans,Helvetica,arial,sans-serif;font-size:13px;text-align:right;height:24px;background:#fff;padding:7px;border-bottom:1px solid #ccc;-webkit-box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);}
.c-button, select, option{background:#fff;cursor:pointer;border:1px solid rgba(0,0,0,0.3);border-radius:4px;padding:2px 10px;margin:0 2px;font-family:Open Sans,Helvetica,arial,sans-serif;}

#input-inner{position:absolute;bottom:4px;top:38px;width:97%;margin:0;background:transparent;border:none;padding:10px;color:#000;overflow:auto;}
input:focus, textarea:focus, select:focus, option:focus{outline:none;}

#display{width:65%;}
#display-inner{height:100%;overflow:auto;border:none;width:100%;}
#display-inner p{max-width:600px;display:block;margin:0 auto;padding:100px;text-align:justify;font-family:Open Sans,Helvetica,arial,sans-serif;line-height:150%;font-size:115%;color:#444;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<form id="input">
<div id="controls">Options:
<select ONCHANGE="document.getElementById('display-inner').src = this.options[this.selectedIndex].value">
<option value="http://tessisamess.com/freeedit.html">Free Edit</option>
<option value="http://tessisamess.com/completestyle.html">Complete Style</option>
<option value="http://tessisamess.com/generator.html">Generator</option>
</select>
<button type="button" value="save" id="save" class="c-button">save</button>
<input type="reset" class="c-button" value="clear">
</div>
<textarea id="input-inner" onkeyup="change();" placeholder="You are in Free Edit mode! You can paste your code here, or start coding from scratch.

To style a layout instead, select your base from the dropdown above, and start with the base CSS given to create a new layout, or replace it with the free layout coding you wish to edit.

All changes will appear on the righthand side as you make them."></textarea>
</form><!---


---><div id="display">
<iframe id="display-inner" src="http://tessisamess.com/freeedit.html">
</iframe>
</div>


</body>

4

1 に答える 1