1

私は自分のコンテンツ管理システム（CMS）用の純粋なJavaScriptWYSIWYGエディターを開発しています。これを行うために必要なのは、IFRAMEのソースコードをTEXTAREA要素のコンテンツと同期することです。これにより、ソースコードの表示とリッチテキストの編集を切り替えることができます。いくつかのコードをまとめて、データを同期しますが、コンテンツを変更できるのはリッチテキストエディター（IFRAME）のみで、ソースエディター（TEXTAREA）は変更できません。これの目的は、他にどのようにできるかわからないため、POSTフォームを介してサーバーにデータを送信することです。私もjQueryを使いたくありません。私は「JavaScriptの専門家」ではありません。とにかくここに私のコードのセクションがあります：

<iframe id="editor" frameborder="0"></iframe>
<textarea id="html" onchange="document.getElementById('editor').contentWindow.document.body.innerHTML=this.value;"></textarea>
<script>
var e = document.getElementById("editor").contentWindow;
e.document.designMode = "on";
e.document.open();
e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>");
e.document.close();

function def() {
   document.getElementById("fontName").selectedIndex = 0;
   document.getElementById("fontSize").selectedIndex = 1;
   document.getElementById("foreColor").selectedIndex = 0;
}

function edit(x, y) {
   e.document.execCommand(x, false, y);
   e.focus();
}

setInterval(function() {
    document.getElementById("html").value = e.document.body.innerHTML;
}, 200);
</script>
4

2 に答える 2

2

それを理解しました、これが他の人に役立つことを願っています;）

<iframe id="editor" frameborder="0">test</iframe>
<textarea id="html" onfocus="editor.rte();" onblur="editor.source();"></textarea>
<script>
<!--
//<![CDATA[
var editor = function() {
    var e = document.getElementById("editor").contentWindow;
    e.document.designMode = "on";
    e.document.open();
    e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>");
    e.document.close();
    var a, b;
    return {
        run:function(c, s) {
            e.document.execCommand(c, false, s);
        },
        source:function() {
            clearInterval(b);
            a = setInterval(function(){document.getElementById("html").value = e.document.body.innerHTML;}, 200);
        },
        rte:function() {
            clearInterval(a);
            b = setInterval(function(){e.document.body.innerHTML = document.getElementById("html").value;}, 200);
        }
    };
}();
editor.source();
//]]>
-->
</script>
于 2012-10-11T01:08:19.957 に答える
0

@ソロ

そのコードは正しくありません。textarea内に<input>と入力してみてください。間隔があるため、入力できません。したがって、私のヒントは、コードを実行してからユーザーが入力を終了することだけです。好き..

var timer = null;
$('textarea').keydown(function(){
   clearTimeout(timer); 
   timer = setTimeout(doStuff, 300)
});

function doStuff() {
   e.document.body.innerHTML = document.getElementById("html").value;
}

私の悪い英語でごめんなさい

于 2013-12-28T03:56:25.957 に答える